Validation in ASP.NET MVC Tree Grid Component
21 Dec 20225 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 Column
API.
@using Syncfusion.EJ2.Grids
@{
var dict = new Dictionary<string, object>();
dict.Add("number", true);
dict.Add("min", 0);
}
@(Html.EJS().TreeGrid("CellEditType").DataSource((IEnumerable<object>)ViewBag.datasource)
.EditSettings(edit =>
{
edit.AllowAdding(true);
edit.AllowDeleting(true);
edit.AllowEditing(true);
edit.Mode(Syncfusion.EJ2.TreeGrid.EditMode.Cell);
})
.Load("onLoad").Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" })
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(70)
.ValidationRules(new { required = true, number = true })
.TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").EditType("stringedit").Width(180)
.ValidationRules(new { required = true }).Add();
col.Field("StartDate").HeaderText("Start Date").Width(180)
.EditType("datetimepickeredit").ValidationRules(new { date = true })
.TextAlign(TextAlign.Right).Add();
col.Field("Approved").HeaderText("Approved").DisplayAsCheckBox(true).TextAlign(TextAlign.Center).Type("boolean").EditType("booleanedit").Width(90).Add();
col.Field("Progress").HeaderText("Progress").Width(100).EditType("numericedit")
.ValidationRules(dict).Edit(new { @params = new { format = "n" } })
.TextAlign(TextAlign.Right).Add();
col.Field("Priority").HeaderText("Priority").EditType("dropdownedit").Width(100)
.ValidationRules(new { required = true }).Add();
}).Height(400).ChildMapping("Children").TreeColumnIndex(1).Render()
)
<script>
function onLoad() {
var treegridObj = document.getElementById("CellEditType").ej2_instances[0];
for (i = 0; i < treegridObj.columns.length; i++) {
if (treegridObj.columns[i].field == "StartDate") {
treegridObj.columns[i].format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
}
}
}
</script>
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.
@using Syncfusion.EJ2.Grids
@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
.EditSettings(edit =>
{
edit.AllowAdding(true);
edit.AllowDeleting(true);
edit.AllowEditing(true);
edit.Mode(Syncfusion.EJ2.TreeGrid.EditMode.Cell);
})
.Load("onLoad").Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" })
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(70)
.ValidationRules(new { required = true, number = true })
.TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").EditType("stringedit").Width(180)
.ValidationRules(new { required = true }).Add();
col.Field("StartDate").HeaderText("Start Date").Width(180)
.EditType("datetimepickeredit").ValidationRules(new { date = true })
.TextAlign(TextAlign.Right).Format("yMd").Add();
col.Field("Priority").HeaderText("Priority").Width(100)
.Add();
}).Height(400).ChildMapping("Children").TreeColumnIndex(1).Render()
)
<script>
function customFn(args) {
return args['value'].length >= 4;
}
function onLoad() {
this.columns[3].validationRules = { required: true, minLength: [customFn, 'Need atleast 5 letters'] };
}
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.dataSource = tree;
return View();
}
NOTE
You can refer to our
ASP.NET MVC Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore ourASP.NET MVC Tree Grid example
to knows how to present and manipulate data.