New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Edit Hierarchical Grids in InCell Mode

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I edit hierarchical Grids in InCell edit mode?

Solution

You can achieve this requirement using the following implementation:

Create a hierarchical Grid and configure it for InCell editing:

Razor

@(Html.Kendo().Grid<EmployeeViewModel>()
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
        columns.Command(command =>
            {
                command.Destroy();
            });
    })
    .ToolBar(tools => {
        tools.Create();
        tools.Save();
    })
    .Scrollable()
    .Editable(e => e.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Filterable()
    .Navigatable()
    .DataSource(source => source
        .Ajax()
        .Model(model =>
        {
            model.Id(e => e.EmployeeID);
            model.Field(e => e.EmployeeID).Editable(false);
        })
        .Read(read => read.Action("Read_Employees", "Employees"))
        .Update(update => update.Action("Update_Employee", "Employees"))
        .Create(create => create.Action("Create_Employee", "Employees"))
        .Destroy(destroy => destroy.Action("Destroy_Employee", "Employees")))
    .ClientDetailTemplateId("OrdersTemplate")
)

Define the detail Grid within the Kendo UI template:

Razor

<script type="text/kendo-tmpl" id="OrdersTemplate">
@(Html.Kendo().Grid<OrderViewModel>()
    .Name("Orders_#=EmployeeID#")
    .Columns(columns =>
    {
        columns.Bound(o => o.OrderID).Width(101);
        columns.Bound(o => o.ShipCountry).Width(140);
        columns.Bound(o => o.ShipAddress).Width(200);
        columns.Bound(o => o.ShipName).Width(200);
        columns.Bound(o => o.ShippedDate).Format("{0:d}");
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
    })
    .ToolBar(tools => tools.Create())
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(source => source
        .Ajax()
        .Model(model =>
        {
            model.Id(o => o.OrderID);
            model.Field(o => o.OrderID).Editable(false);
        })
        .Read(read => read.Action("Read_Orders", "Orders", new { id = "#=EmployeeID#" }))
        .Update(update => update.Action("Update_Order", "Orders"))
        .Create(create => create.Action("Create_Order", "Orders", new { id = "#=EmployeeID#" }))
        .Destroy(destroy => destroy.Action("Destroy_Order", "Orders")))
    .ToClientTemplate()
)
</script>

Handle the keydown event on the main Grid's table and set the currently focused cell in edit mode when Enter is pressed:

    $(function () {
        $("#Employees table").on("keydown", function (e) {
            // If current key is "Enter".
            if (e.keyCode == 13) {
                // Prevent the "keydown" event action.
                e.stopImmediatePropagation();
                var grid = $("#Employees").data("kendoGrid");
                var currentCell = grid.current();

                if (currentCell.is(".k-edit-cell")) {
                    setTimeout(function () {
                        grid.closeCell();
                        grid.table.focus();
                    });
                } else {
                    if (!currentCell.hasClass("k-hierarchy-cell")) {
                        grid.editCell(currentCell);
                    }
                }
            }
        });
    });

For review the complete example, refer to the project on how to edit a hierarchical Grid that is set up for InCell editing in ASP.NET MVC applications.

Edit Hierarchical Grids in InCell Mode

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also