2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
|
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: <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>
The following output is displayed for the above code example.
A sample to add custom column with check box is available in the following Sample link |
2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
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.
