Validation in ASP.NET CORE Tree Grid Component

21 Dec 20224 minutes to read

Column validation

Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data. TreeGrid uses Form Validator component for column validation. You can set validation rules by defining the validationRules in e-treegrid-column tag helper.

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

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" height="400" childMapping="Children" treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })">
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" textAlign="Right" width="70"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" validationRules="@(new { required=true})" editType="stringedit" width="180"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" validationRules="@(new { date=true})" editType="datetimepickeredit" textAlign="Right" width="185" format="yMd"></e-treegrid-column>
        <e-treegrid-column field="Approved" headerText="Approved" editType="booleanedit" textAlign="Center" width="80" displayAsCheckbox="true" type="boolean"></e-treegrid-column>
        <e-treegrid-column field="Progress" headerText="Progress" validationRules="@(dict)" editType="numericedit" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" editType="dropdownedit" validationRules="@(new { required=true})" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.dataSource = tree;
    return View();
}

Custom validation

You can define your own custom validation rules for the specific columns by using Form Validator custom rules.

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

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

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" height="400" childMapping="Children" treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" load="load">
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" validationRules="@(new { required = true, number = true})" textAlign="Right" width="70"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" editType="stringedit" width="180"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" validationRules="@(new { date = true})" format="yMd" editType="datetimepickeredit" textAlign="Right" width="185"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" validationRules="@(dict)" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<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()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.dataSource = tree;
    return View();
}

NOTE

You can refer to our ASP.NET Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.