How to customize the dialog fields of Gantt in ASP.NET Web Forms?
In Gantt control, user can enable or disable required fields in both edit dialog box and add dialog box for all the predefined columns and custom columns with the help of “EditDialogFields” and “AddDialogFields” property. The provided fields in the “EditDialogFields” and “AddDialogFields” property alone will be displayed in the dialog box of the Gantt chart.
Please refer the following code snippets for more details.
Code snippets:
<body style="position: static; margin: 0px; padding: 2px">
@(Html.EJ().Gantt("Gantt").
//...
.AddDialogFields(eve =>
{
eve.Field("Id").Add();
eve.Field("Name").Add();
eve.Field("StartDate").Add();
eve.Field("Duration").Add();
})
.EditDialogFields(eve =>
{
eve.Field("Name").Add();
eve.Field("StartDate").Add();
eve.Field("ExpectedDate").Add();//To display custom column
})
.ClientSideEvents(eve => {
eve.Load("Load");
})
.Datasource(ViewBag.dataSource)
)
@(Html.EJ().ScriptManager())
<script>
function Load(args) {
var columns = this.getColumns();
columns.splice(2, 0,
{
field: " ExpectedDate",
headerText: " Expected Date",
editType: "stringedit",
mappingName: "ExpectedDate", //Provide this mapping name
width: "180px"
});
}
</script>
</body>
The following screen shots shows the output of the above code snippets.
Add Dialog Window: (General Tab)
Edit Dialog Window: (General Tab)
Edit Dialog Window: (Tab for custom column)
DisplayInGeneralTab:
The “DisplayInGeneralTab” property in Edit Dialog fields and Add dialog fields is required to provide the support for displaying the fields of custom columns in the General tab of dialog box. By default the value of this property will be false.
In the above Edit dialog box, to display the field of “ExpectedDate” custom column in General Tab, the following code snippets can be used in “EditDialogFields” property.
Code snippets:
MVC
//...
.EditDialogFields(eve =>
{
eve.Field("Name").Add();
eve.Field("StartDate").Add();
eve.Field("ExpectedDate").DisplayInGeneralTab(true).Add();//To display this custom column field in General Tab
})
//...
The following screen shots shows the output of the above code snippets.
Conclusion
I hope you enjoyed learning about how to customize the dialog fields of Gantt in ASP.NET Web Forms.
You can refer to our ASP.NET MVC Gantt feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Gantt example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
