2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
In Gantt, user can display checkbox column by using load client side event and column template support. The below code snippet explains initializing a custom column with checkbox and saving the editing changes to the data source. Code snippets: <form id="form1" runat="server" onsubmit="return false" style="overflow: hidden; padding:0; margin: 0;height:100%;width:100%;"> <ej:Gantt ID="Gantt" runat="server" AllowSelection="true" //... Load="Load" BeginEdit="BeginEdit"> </ej:Gantt>
<script type="text/x-jsrender" id="customColumnTemplate"> <div style="margin-left:20px;"> {{if State}} <input class="customCheckbox" type="checkbox" checked="checked" value="" /> {{else}} <input class="customCheckbox" type="checkbox" value="" /> {{/if}} </div> </script>
<script> function Load() { var columns = this.getColumns(); columns.splice(4, 0, { field: "State", headerText: "State", isTemplateColumn: true, templateID: "customColumnTemplate", width: "80px", }); } // To prevent the string edit while editing check box function BeginEdit(args) { var columnIndex = args.columnIndex; if (columnIndex == 4) { args.cancel = true; } } //Get checked row and select or unselect corresponding records $("#Gantt").on("change", ".customCheckbox", function (e) { var $tr = $(e.target).closest('tr'), ganttObj = $("#Gantt").data("ejGantt"), checkStatus = $(e.target).is(':checked'), $gridRows = ganttObj.getRows(), rowIndex = $gridRows.index($tr), record = ganttObj.model.currentViewData && ganttObj.model.currentViewData[rowIndex]; record["state"] = checkStatus; }); </script> The following output is displayed for the above code example.
A sample to add custom column with check box is available in the following Sample link |
2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.