How to add custom column with check box

<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>