Validation in ASP.NET CORE Gantt Component

15 Dec 20236 minutes to read

Column validation

Column validation validates the editing and adding data and it display errors for invalid fields before saving data. This is effective in both inline and dialog editing.
Gantt uses Form Validator component for column validation. You can set validation rules by defining the validationRules in Columns. The value cannot be saved unless the validation rule get satisfied.

@{
    var dict = new Dictionary<string, object>();
    dict.Add("required", true);
    dict.Add("min", 0);
}

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowSelection="true">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
        </e-gantt-taskfields>
        <e-gantt-columns>
           <e-gantt-column field="TaskId" width="150"> </e-gantt-column>
           <e-gantt-column field="TaskName" headerText="Job Name" width="250" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="StartDate" validationRules="@(new {required = true, date = true})" format="yMd" editType="datetimepickeredit" textAlign="Right" width="185"></e-gantt-column>
           <e-gantt-column field="EndDate" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="Duration" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="Progress" validationRules="@(new { required=true})"></e-gantt-column>
        </e-gantt-columns>
        <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" 
        allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
</ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Custom validation

You can define your own custom validation rules for the specific columns by using callback function to it’s validation rule.

In the below demo, custom validation applied for TaskName column.

@{
    var dict = new Dictionary<string, object>();
    dict.Add("require", true);
}

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowSelection="true" load="load">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
        </e-gantt-taskfields>
        <e-gantt-columns>
           <e-gantt-column field="TaskId" width="150"> </e-gantt-column>
           <e-gantt-column field="TaskName" headerText="Job Name" width="250" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="StartDate" validationRules="@(new {required = true, date = true})" format="yMd" editType="datetimepickeredit" textAlign="Right" width="185"></e-gantt-column>
           <e-gantt-column field="EndDate" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="Duration" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="Progress" validationRules="@(new { required=true})"></e-gantt-column>
        </e-gantt-columns>
        <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" 
        allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
</ejs-gantt>
<script>
    function load() {
        this.columns[1].validationRules = { required: true, min: [customFn, 'Value should be greater than 5 letters'] }; 
    }

    function customFn(args) {
        return args['value'].length >= 5;
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Dependency and resource grid validation

Validation rules can also be implemented for the dependency and resource grid in the add or edit dialog by employing the event ActionBegin.
Within the actionBegin event, validationRules can be configured for columns in the grid of the dependency and resource tabs using the requestType beforeOpenEditDialog or beforeOpenAddDialog.

@{
    var dict = new Dictionary<string, object>();
    dict.Add("required", true);
    dict.Add("min", 0);
}

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowSelection="true">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
        </e-gantt-taskfields>
        <e-gantt-columns>
           <e-gantt-column field="TaskId" width="150"> </e-gantt-column>
           <e-gantt-column field="TaskName" headerText="Job Name" width="250" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="StartDate" validationRules="@(new {required = true, date = true})" format="yMd" editType="datetimepickeredit" textAlign="Right" width="185"></e-gantt-column>
           <e-gantt-column field="EndDate" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="Duration" validationRules="@(new { required=true})"></e-gantt-column>
           <e-gantt-column field="Progress" validationRules="@(new { required=true})"></e-gantt-column>
        </e-gantt-columns>
        <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" 
        allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
</ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}