Capture change event for the "datetimeinput" column of jqxGrid

[kourav963Participant]

Hi,

I have a datetimeinput column in my grid, once clicked on the calendar icon in that cell it would show the calendar.

After clicking on any date it is displaying the date on the row, calendar disappears but it is not ending the cell edit mode and not saving the value.

I want to end the cell editing & save the value once the user clicks on the date from the calendar, I tried calling the method endcelledit but it didn’t work.

May be if I can somehow capture the change event of that datetimeinput column (like onChange event of jqxCalendar), I can call the endcelledit method to end the cell editing but not sure how to capture such event.

Can you please help?

Thanks.

[adminKeymaster]

Hi kourav963,

Withing the column’s createeditor method, you have access to the editor widget i.e you can bind to the “change” event there and handle your custom logic.

hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[kourav963Participant]

Hi Admin,

Thanks for the answer but looks like we cannot call any custom methods of our component from the this function createeditor.

createeditor: (row: number, cellvalue: any, editor: any): void => {
          editor.jqxDateTimeInput();
          editor.on('change',function(event){
           this.testMethod(); // Error here
           this.grid.endrowedit(row, 'dateColumn', false); // Error Here
          });
        }

I’m trying to save the row once the date is selected but unable to do it.

[adminKeymaster]

Hi kourav963,

The this keyword is always in the context of the function. You can add var that = this; before editor.jqxDateTimeInput and use that within the event handler. In addition, editor.jqxDateTimeInput is not necessary to be called when the columntype is already a column with datetimeinput editor.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts