We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Otto,
Thanks for using Syncfusion products.
We can render custom column in Gantt control with checkbox by using “Load” client side event and JSRENDER column template. Please refer the below code snippets for more details.
Code snippets:
|
<body style="position: static; margin: 0px; padding: 2px"> <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._gridRows, rowIndex = $gridRows.index($tr), record = ganttObj._currentViewData && ganttObj._currentViewData[rowIndex]; record["State"] = checkStatus; });
</script> </body> |
We have also prepared a sample based on this for your reference. Please find the sample in the following location.
Sample: http://www.syncfusion.com/downloads/support/directtrac/118140/MVC09NewSampleCheckbox-9825191.zip
Please let us know if you require further assistance on this.
Regards,
John. R
Hi Otto,
Sorry about the inconvenience caused.
We have achieved your requirement by using “Load” client side event for enabling the check boxes while rendering the Gantt control based on the data source field in the controller.
Please refer the below code snippets for more details.
Code snippets:
|
<body style="position: static; margin: 0px; padding: 2px"> <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"); }). .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", }); var proxy = this, ganttItems = proxy.model.ganttRecords; for (var k = 0; k < ganttItems.length; k++) ganttItems[k]["State"] = ganttItems[k].item["State"]; } </script> </body> |
We have prepared a sample based on this. Please find the sample in the following location.
Sample: http://www.syncfusion.com/downloads/support/directtrac/118140/MVC09NewSampleCheckBoxUp692737922.zip
Please let us know if you require further assistance on this.
Regards,
John. R
