|
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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
