Editing in ASP.NET MVC Tree Grid Component
21 Dec 20229 minutes to read
The TreeGrid component has options to dynamically insert, delete and update records.
Editing feature is enabled by using EditSettings property and it requires a primary key column for CRUD operations.
To define the primary key, set IsPrimaryKey to true using Column API of that particular column.
@using Syncfusion.EJ2.Grids
@(Html.EJS().TreeGrid("TreeGrid")
.Height(270)
.EditSettings(edit => edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true))
.DataSource((IEnumerable<object>)ViewBag.datasource)
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(110).TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
col.Field("Priority").HeaderText("Priority").Width(90).Add();
col.Field("Duration").HeaderText("Duration").TextAlign(TextAlign.Right).Width(110).Add();
})
.ChildMapping("Children").TreeColumnIndex(1).Render())public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}NOTE
You can disable editing for a particular column, by specifying
AllowEditingofColumnAPI to false.
Toolbar with edit option
The treegrid toolbar has the built-in items to execute Editing actions.
You can define this by using the Toolbar property.
@using Syncfusion.EJ2.Grids
@(Html.EJS().TreeGrid("TreeGrid")
.Height(270)
.EditSettings(edit => edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true).Mode(Syncfusion.EJ2.TreeGrid.EditMode.Row))
.DataSource((IEnumerable<object>)ViewBag.datasource)
.Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(110).TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
col.Field("Priority").HeaderText("Priority").Width(90).Add();
col.Field("Duration").HeaderText("Duration").TextAlign(TextAlign.Right).Width(110).Add();
})
.ChildMapping("Children").TreeColumnIndex(1).Render())public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}Adding row position
The TreeGrid control provides the support to add the new row in the top, bottom, above selected row, below selected row and child position of tree grid content using NewRowPosition property of EditSettings API. By default, a new row will be added at the top of the treegrid.
The following examples shows how to set new row position as Child in tree grid.
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.dataSource = tree;
return View();
}Confirmation messages
Delete confirmation
The delete confirm dialog can be shown when deleting a record by defining the ShowDeleteConfirmDialog as true
@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.ShowDeleteConfirmDialog(true);
edit.Mode(Syncfusion.EJ2.TreeGrid.EditMode.Cell);
})
.Toolbar(new List<string>() { "Add", "Update", "Delete", "Cancel" })
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(120)
.TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Add();
col.Field("StartDate").HeaderText("Start Date").Width(150).Format("yMd")
.EditType("datepickeredit").TextAlign(TextAlign.Right).Add();
col.Field("Duration").HeaderText("Duration").Width("110").EditType("numericedit")
.Edit(new { @params = new { format = "n" } }).TextAlign(TextAlign.Right).Add();
}).Height(400).ChildMapping("Children").TreeColumnIndex(1).Render()
)public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.dataSource = tree;
return View();
}NOTE
The
ShowDeleteConfirmDialogsupports all type of edit modes.
Default column values on add new
The treegrid provides an option to set the default value for the columns when adding a new record in it.
To set a default value for the particular column by defining the DefaultValue in Column API.
@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);
})
.Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" })
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(120)
.TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Add();
col.Field("StartDate").HeaderText("Start Date").Width(150).Format("yMd")
.EditType("datepickeredit").TextAlign(TextAlign.Right).Add();
col.Field("Priority").HeaderText("Priority").Width("110").DefaultValue("Normal").Add();
}).Height(400).ChildMapping("Children").TreeColumnIndex(1).Render()
)public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}Disable editing for particular column
You can disable editing for particular columns by using the AllowEditing property of Column API.
In the following demo, editing is disabled for the Start Date 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);
})
.Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" })
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(120)
.TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Add();
col.Field("StartDate").HeaderText("Start Date").Width(150).Format("yMd")
.EditType("datepickeredit").TextAlign(TextAlign.Right).AllowEditing(false).Add();
col.Field("Priority").HeaderText("Priority").Width("110").Add();
}).Height(400).ChildMapping("Children").TreeColumnIndex(1).Render()
)public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.dataSource = tree;
return View();
}Troubleshoot: Editing works only for first row
The Editing functionalities can be performed based upon the primary key value of the selected row.
If IsPrimaryKey is not defined in the treegrid, then edit or delete action take places the first row.
NOTE
You can refer to our
ASP.NET MVC Tree Gridfeature tour page for its groundbreaking feature representations. You can also explore ourASP.NET MVC Tree Grid exampleto knows how to present and manipulate data.