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: <body> <div id="gantt"></div> <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> var projectData = [{ taskID: 1, taskName: "Planning", startDate: "02/03/2014", endDate: "02/07/2014", progress: 100, duration: 5, state: true, subtasks: [{ taskID: 2, taskName: "Plan timeline", startDate: "02/03/2014", endDate: "02/07/2014", duration: 5, state: true, progress 100 }, //... ] }]; $(function() { $("#gantt").ejGantt({ dataSource: projectData, //... beginEdit: beginEdit, load: function() { 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> </body>
The below screen shot depicts the above code example Sample link A sample to add custom column with checkbox is available in the following link, Sample |
This page will automatically be redirected to the sign-in page in 10 seconds.