Syncfusion AI Assistant

How can I help you?

Editing in ASP.NET CORE Tree Grid Component

21 Dec 20228 minutes to read

The TreeGrid component has options to dynamically insert, delete and update records. Editing feature is enabled by using e-treegrid-editSettings tag helper and it requires a primary key column for CRUD operations.

To define the primary key, set isPrimaryKey of e-treegrid-column tag helper to true in particular column.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" childMapping="Children" height="270" treeColumnIndex="1">
    <e-treegrid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Cell"></e-treegrid-editSettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="60"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="120"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

You can disable editing for a particular column, by specifying allowEditing of e-treegrid-column tag helper 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.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" childMapping="Children" height="270" treeColumnIndex="1"  toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
    <e-treegrid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Row"></e-treegrid-editSettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="60"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="120"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
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 e-treegrid-editsettings tag helper. 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 treegrid.

<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" newRowPosition="Child"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="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" editType="datetimepickeredit" textAlign="Right" width="185" format="yMd"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" defaultValue='Normal' width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
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.

<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" showDeleteConfirmDialog="true" mode="Cell"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" editType="stringedit" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" editType="datepickeredit" textAlign="Right" format="yMd" type="date" width="130"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" editType="numericedit" textAlign="Right" width="120"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.dataSource = tree;
    return View();
}

NOTE

The showDeleteConfirmDialog supports 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 e-treegrid-column tag helper.

<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" 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" editType="datetimepickeredit" format="yMd" textAlign="Right" width="185"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" defaultValue="Normal" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
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 e-treegrid-column tag helper.

In the following demo, editing is disabled for the Start Date column.

<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" 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" allowEditing="false" editType="datetimepickeredit" format="yMd" textAlign="Right" width="185"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
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 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.