Validation in ASP.NET MVC 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.

@using Syncfusion.EJ2.Grids


@{
    var dict = new Dictionary<string, object>();
    dict.Add("number", true);
    dict.Add("min", 0);
}
        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
                "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
                ).AllowSelection(true).Columns(col =>
                {
                    col.Field("TaskId").Width(80).Add();
                    col.Field("TaskName").HeaderText("Job Name").Width(250).ValidationRules(new { required = true }).Add();
                    col.Field("StartDate").EditType("datetimepickeredit").ValidationRules(new { required = true, date = true })
                    .TextAlign(TextAlign.Right).Format("yMd").Add();
                    col.Field("EndDate").ValidationRules(new { required = true }).Add();
                    col.Field("Duration").ValidationRules(new { required = true }).Add();
                    col.Field("Progress").ValidationRules(new { required = true }).Add();
                }).EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true).ShowDeleteConfirmDialog(true)).Render()
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.

@using Syncfusion.EJ2.Grids

        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
                "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
                ).AllowSelection(true).Load("onLoad").Columns(col =>
                {
                    col.Field("TaskId").Width(80).Add();
                    col.Field("TaskName").HeaderText("Job Name").Width(250).ValidationRules(new { required = true }).Add();
                    col.Field("StartDate").EditType("datetimepickeredit").ValidationRules(new { required = true, date = true })
                    .TextAlign(TextAlign.Right).Format("yMd").Add();
                    col.Field("EndDate").ValidationRules(new { required = true }).Add();
                    col.Field("Duration").ValidationRules(new { required = true }).Add();
                    col.Field("Progress").ValidationRules(new { required = true }).Add();
                }).EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true).ShowDeleteConfirmDialog(true)).Render()
<script>
    function customFn(args) {
        return args['value'].length >= 4;
    }
    function onLoad() {
        this.columns[1].validationRules = { required: true, minLength: [customFn, 'Need atleast 5 letters'] };
    }
</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.

@using Syncfusion.EJ2.Grids


@{
    var dict = new Dictionary<string, object>();
    dict.Add("number", true);
    dict.Add("min", 0);
}
        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
                "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
                ).AllowSelection(true).Columns(col =>
                {
                    col.Field("TaskId").Width(80).Add();
                    col.Field("TaskName").HeaderText("Job Name").Width(250).ValidationRules(new { required = true }).Add();
                    col.Field("StartDate").EditType("datetimepickeredit").ValidationRules(new { required = true, date = true })
                    .TextAlign(TextAlign.Right).Format("yMd").Add();
                    col.Field("EndDate").ValidationRules(new { required = true }).Add();
                    col.Field("Duration").ValidationRules(new { required = true }).Add();
                    col.Field("Progress").ValidationRules(new { required = true }).Add();
                }).EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true).ShowDeleteConfirmDialog(true)).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}