We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Michael,
Thankyou for using Syncfusion product.
For your kind information, it is possible to render the TreeGrid widget with time columns and we can change the start Time and End time of the TreeGrid columns using ejTimePicker close event, but currently it is not possible to split up the TreeGrid cell and hence it is not possible to render two timepicker in the same cell either for start time or for end time column ,We have prepared a workaround for this requirement using custom columns to edit start time and end time. Please refer the below code snippet to achieve the requirement.
|
<head> <script type="text/javascript"> function querycellinfo(args) { if (args.column.field == "startDatetime") { $(args.cellElement).find(".startDatepicker").ejTimePicker({ open: function (args) { var treeObj = $("#Treegrid").data("ejTreeGrid"); //To hide the Start time field while editing the custom column treeObj.hideColumn("Start Time"); }, close: function (args) { var treeObj = $("#Treegrid").data("ejTreeGrid"); //To change the field value with the selected time if (treeObj.model.selectedRowIndex) treeObj.model.flatRecords[treeObj.model.selectedRowIndex].StartDate = args.value; else alert("please select row to edit"); treeObj.refreshRow(treeObj.model.selectedRowIndex); //To show the Start time field once completed the editing. treeObj.showColumn("Start Time"); } }); } if (args.column.field == "endDatetime") { $(args.cellElement).find(".endDatepicker").ejTimePicker({ open: function (args) { var treeObj = $("#Treegrid").data("ejTreeGrid"); treeObj.hideColumn("End Time"); }, close: function (args) { var treeObj = $("#Treegrid").data("ejTreeGrid"); if (treeObj.model.selectedRowIndex) treeObj.model.flatRecords[treeObj.model.selectedRowIndex].EndDate = args.value; else alert("please select row to edit"); treeObj.refreshRow(treeObj.model.selectedRowIndex); treeObj.showColumn("End Time"); } }); } } </script> </head> <body> <script type="text/x-jsrender" id="startTemp"> <input type="text" class="startDatepicker" /> </script> <script type="text/x-jsrender" id="endTemp"> <input type="text" class="endDatepicker" /> </script> <ej:treegrid ID="Treegrid" runat="server" AllowColumnResize="true" //… DateFormat="hh:mm:ss tt" QueryCellInfo="querycellinfo">
<Columns> //… <ej:treegridcolumn HeaderText="StartDateTime" Field="startDatetime" IsTemplateColumn="true" TemplateID="startTemp"/> <ej:treegridcolumn HeaderText="EndDateTime" Field="endDatetime" IsTemplateColumn="true" TemplateID="endTemp"/> </Columns> </ej:treegrid> </body> |
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119684/ze/TimeOptions-62248595
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
Hi Michael,
Currently there is no support for ejTimePicker in TreeGrid edit options, so we have achieved your requirement to render the ejTimePicker in the date columns through the column Template. Since there is no built-in support for timepicker in TreeGrid ,while adding a new row using toolbar the timepicker cell will be rendered as string edit type and on continuing saving the new row timepicker cell will be rendered, we have achieved this by adding any row using context menu options. Please refer the below code snippet for details.
|
<head id="Head1" runat="server"> function querycellinfo(args) {
if (args.column.field == "startDatetime") { $(args.cellElement).find(".startDateTimepicker").ejTimePicker({ value: args.data.startDatetime, close: function (args) { alert("Start time changed to" + args.value) } }); } if (args.column.field == "endDatetime") { $(args.cellElement).find(".endDateTimepicker").ejTimePicker({ value: args.data.endDatetime, close: function (args) { alert("End time changed to" + args.value) } }); } } </script> </head> <body> <script type="text/x-jsrender" id="startTemp"> {{if !hasChildRecords}} <input type="text" class="startDateTimepicker" /> {{/if}} </script> <script type="text/x-jsrender" id="endTemp"> {{if !hasChildRecords}} <input type="text" class="endDateTimepicker" /> {{/if}} </script>
<form id="form1" runat="server" > <ej:treegrid ID="Treegrid" runat="server //… DateFormat="hh:mm:ss tt" QueryCellInfo="querycellinfo"> <Columns> //… <ej:treegridcolumn HeaderText="StartDateTime" Field="startDatetime" IsTemplateColumn="true" TemplateID="startTemp"/> <ej:treegridcolumn HeaderText="EndDateTime" Field="endDatetime" IsTemplateColumn="true" TemplateID="endTemp"/> </Columns> <ContextMenuSettings ShowContextMenu="true" ContextMenuItems="add,edit,delete" /> </ej:treegrid> </form> |
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119684/ze/TreegridTimeoptiones2145209965
We have also logged a feature report on implementing the ejTimePicker in the treegrid edit options. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
Please let us know if you require further assistance on this.
Regards,
Mahalakshmi K.
