TimePicker in a grid cell

[Muzaffer Birben]

Hi,

1. I wasn't able to find a sample for timepicker in a grid cell for TypeScript. Is there a sample? I followed the link below but it didn't work.

https://www.syncfusion.com/kb/7138/how-to-have-ejtimepicker-as-edit-type-for-a-column

2. I added a dropdown list as shown below. Is there a way to increment that number to 120 instead of 60?  

 { field: "Duration", headerText: "Duration", editType: "dropdownedit", edit: { params: { value: "0"} }, allowEditing: true },

Thank you for your great support,

Muzaffer

[Praveenkumar Gajendiran]

Hi Muzaffer Birben,

Greetings from Syncfusion support,

Query 1: “I wasn't able to find a sample for timepicker in a grid cell for TypeScript. Is there a sample?”

By default, we don’t have pre-defined Timepicker editor component in Grid. But you can create the own component while editing through CellEditTemplate feature.
Please check the below code example for your reference. 

,edit: { 

                create: function(){ 

                    elem = document.createElement('input'); 

                    return elem; 

                }, 

                read: function() { 

                    return timePickerObj.value; 

                }, 

                destroy: function() { 

                    timePickerObj.destroy(); 

                }, 

                write: function(args){ 

                    timePickerObj = new  TimePicker({ 

                        value: new Date(args.rowData[args.column.field]), 

                         format: 'HH:mm', 

                         step: 15 

                    }); 

                    timePickerObj.appendTo(elem); 

                } 

            } 

In above code example , we have render TimePicker component using create, read, destroy and write method  through ‘Cell EditTemplate’ feature. 

Documentation Link: https://ej2.syncfusion.com/documentation/grid/edit/#cell-edit-template
                                       https://ej2.syncfusion.com/documentation/timepicker/getting-started/#setting-the-time-format

Query 2: “I added a dropdown list as shown below. Is there a way to increment that number to 120 instead of 60?”

From your query, We suspect that you want to dynamically change the dropdownlist dataSource while editing. To achieve your requirement we suggest you to use edit.params property of column API. In edit.params property we suggest you to set dynamic dataSource  and query as demonstrated in the below code snippet, 

{ field: "Duration", headerText: "Duration", editType: "dropdownedit", edit: { params: { dataSource:[0,15,30,45,120], query: new Query() ,value: 0} }, allowEditing: true }, 

Documentation link: https://ej2.syncfusion.com/documentation/grid/edit/#cell-edit-type-and-its-params


Here, we have prepared a sample for your reference.

Sample:  https://stackblitz.com/edit/uilw4f?file=index.ts


Let us know if you have any concerns.

regards,
Praveenkumar G