Introduction
Knowledge Base
Components / Data Management / TreeList / Editing / Inline
New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Inline Editing

Updated on Oct 24, 2025

You can define commands and set the edit mode to configure the Telerik UI TreeList for ASP.NET Core for inline editing.

For runnable examples, refer to the demos on implementing the editing approaches in the TreeList.

To set the inline edit mode of the TreeList:

  1. Add a new class to the ~/Models folder. The following example uses the EmployeeDirectoryModel name.

    Razor
     public class EmployeeDirectoryModel
 {
     public int EmployeeId { get; set; }
     public string FirstName { get; set; }
     public string LastName { get; set; }
     public int? ReportsTo { get; set; }
 }

  2. Open TreeListController.cs and add a new action method which will return the Directories as JSON. The TreeList will make Ajax requests to this action.

    Razor
    public JsonResult All([DataSourceRequest] DataSourceRequest request)
{
    var result = GetDirectory().ToTreeDataSourceResult(request,
        e => e.EmployeeId,
        e => e.ReportsTo,
        e => e
    );

    return Json(result);
}

  3. Add a new action method to TreeListController.cs. It will be responsible for saving the new data items. Name the method Create.

    Razor
     public JsonResult Create([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee)
 {
     if (ModelState.IsValid)
     {
         employeeDirectory.Insert(employee, ModelState);
     }

     return Json(new[] { employee }.ToTreeDataSourceResult(request, ModelState));
 }

  4. Add a new action method to TreeListController.cs. It will be responsible for saving the updated data items. Name the method Update.

    Razor
     public JsonResult Update([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee)
 {
     if (ModelState.IsValid)
     {
         employeeDirectory.Update(employee, ModelState);
     }

     return Json(new[] { employee }.ToTreeDataSourceResult(request, ModelState));
 }

  5. Add a new action method to TreeListController.cs. It will be responsible for saving the deleted data items. Name the method Destroy.

    Razor
     public JsonResult Destroy([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee)
 {
     if (ModelState.IsValid)
     {
         employeeDirectory.Delete(employee, ModelState);
     }

     return Json(new[] { employee }.ToTreeDataSourceResult(request, ModelState));
 }

  6. In the view, configure the TreeList to use the action methods that were created in the previous steps. The Create, Update, and Destroy action methods have to return a collection with the modified or deleted records which will enable the DataSource to apply the changes accordingly. The Create method has to return a collection of the created records with the assigned ID field.

    Razor
        @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
        .Name("treelist")
        .Toolbar(toolbar => toolbar.Create())
        .Columns(columns =>
        {
            columns.Add().Field(e => e.FirstName).Title("First Name").Width(220);
            columns.Add().Field(e => e.LastName).Title("Last Name").Width(100);
            columns.Add().Field(e => e.Position);
            columns.Add().Field(e => e.HireDate).Format("{0:MMMM d, yyyy}");
            columns.Add().Field(e => e.Phone);
            columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
            columns.Add().Width(300).Command(c =>
            {
                c.CreateChild().Text("Add child");
                c.Edit();
                c.Destroy();
            })
            .HtmlAttributes(new
            {
                style = "text-align: center;"
            });
        })
        .Editable()
        .DataSource(dataSource => dataSource
            .Create(create => create.Action("Create", "TreeList"))
            .Read(read => read.Action("All", "TreeList"))
            .Update(update => update.Action("Update", "TreeList"))
            .Destroy(delete => delete.Action("Destroy", "TreeList"))
            .Model(m =>
            {
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo);
            })
        )
    )

See Also

In this article
See Also
Not finding the help you need?
Contact Support