How to add custom column with check box in .NET MVC 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>

@(Html.EJ().Gantt("Gantt").
//...
ClientSideEvents(eve=>
{
eve.Load("Load");
eve.BeginEdit("BeginEdit");
}).
.Datasource(ViewBag.dataSource)
)
@(Html.EJ().ScriptManager())

<script>
function Load(args) {
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>