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