2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
Besides default columns generated by the Gantt control, a user can also add custom columns with the below edit types, using load client side event. The list of editors available in Gantt for custom columns are:
Please refer the below code snippets for more details. Code snippets: <body> @(Html.EJ().Gantt("Gantt"). //... ClientSideEvents(eve=> { eve.Load("Load"); }). .Datasource(ViewBag.dataSource) ) @(Html.EJ().ScriptManager()) <script type="text/javascript"> //Sample Data for dropdown box var dropDownData = [ { text: "Open", value: "Open" }, { text: "Progress", value: "Progress" }, { text: "Testing", value: "Testing" }, { text: "Completed", value: "Completed" }]; function Load(args) { var columns = this.getColumns(); //Checkbox column with boolean edit columns.push( { field: "State", headerText: "State", editType: "booleanedit", mappingName: "State", width: "180px", }); //Column with drop down list columns.push( { field: "TaskStatus", headerText: "Task Status", editType: "dropdownedit", mappingName: "TaskStatus", dropdownData: dropDownData, width: "180px", }); //Column with String text box columns.push( { field: "Description", headerText: "Description", editType: "stringedit", mappingName: "Description", width: "180px", }); //Column with Numeric textbox columns.push( { field: "Value", headerText: "Value", editType: "numericedit", mappingName: "Value", width: "180px", }); //Column with NumericEdit currency textbox columns.push( { field: "Amount", headerText: "Total", editType: "numericedit", mappingName: "Amount", width: "180px", format: "{0:C2}" }); //column with NumericEdit percentage textbox columns.push( { field: "Percentage", headerText: "Percentage", editType: "numericedit", mappingName: "Percentage", width: "180px", format: "{0:P0}", editParams: { decimalPlaces: 2, incrementStep: 0.01 } }); //column with mask edit textbox columns.push( { field: "MaskedColumn", headerText: "Masked Text", editType: "maskedit", mappingName: "MaskedColumn", width: "180px", editParams: { maskFormat: "9999" } }); } </script> </body> Sample link A sample for updating the dimensions of Gantt chart is available in the following link. Sample
|
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.