TimePicker in a grid cell

Question

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-column2. 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 · Accepted Answer

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-formatQuery 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-paramsHere, we have prepared a sample for your reference.Sample:  https://stackblitz.com/edit/uilw4f?file=index.tsLet us know if you have any concerns.regards,Praveenkumar G