New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Implement Grid Hierarchy with Dynamic Model Loading and DataTable

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.1.227

Description

How can I implement a hierarchical Grid that binds to a DataTable and loads dynamic data based on a selected Model through a DropDownList?

Solution

The solution relies on the following key steps:

  1. Define a hierarchical Grid and populate its columns using the available DataTable. Also, handle the DetailInit event of the Grid and initialize the detail Grid through a partial View:

    Razor
    @using Kendo.Mvc.UI
    @model string
    
    @{
        System.Data.DataTable Table = (System.Data.DataTable)ViewData["Table"];
    }
    
    @(Html.Kendo().Grid<dynamic>()
        .Name("Grid")
        .Columns(columns =>
        {
            foreach (System.Data.DataColumn column in Table.Columns)
            {
                columns.Bound(column.ColumnName).Width(120).ClientTemplate("<div style='height: 30px; overflow: hidden;'>#=" + column.ColumnName + "#</div>");
            }
        })
        .Events(events => events.DetailInit("onDetailInit"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                var id = Table.PrimaryKey[0].ColumnName;
                model.Id(id);
                foreach (System.Data.DataColumn column in Table.Columns)
                {
                    var field = model.Field(column.ColumnName, column.DataType);
                    if (column.ColumnName == id)
                    {
                        field.Editable(false);
                    }
    
                }
            })
            .Read(read => read.Action("Read", "Home").Data("getTableName"))
            .Update(update => update.Action("Update", "Home"))
        )
        ...// Additional options.
    )
    
    <script>
        function getTableName() {
             // Send the current table name through the Read request of the main Grid.
            return { tableName: "@Model" };
        }
    
        function onDetailInit(e) {
            // Initialize the detail Grid based on the currently selected DataTable.
            var container = e.detailCell;
    
            var parentFieldName = "@Table.PrimaryKey[0].ColumnName";
    
            var tableName = "@ViewData["childrenTableName"]";
    
            $.ajax({
                type: "GET",
                url: "@(Url.Action("DetailTemplate","Home"))",
                data: {
                    parentFieldName: parentFieldName,
                    parentFieldValue: e.data[parentFieldName],
                    tableName: tableName
                },
                success: function (data) {
                    container.html(data);
                }
            });
        }
    </script>
  2. Add a DropDownList inside a form and handle its Change event to submit the form when a specified option is selected:

    Razor
    @using (Html.BeginForm("Index", "Home", System.Web.Mvc.FormMethod.Post, null))
    {
        <h3>Select table to load:</h3>
    
        @(Html.Kendo().DropDownList()
            .Name("tableName")
            .DataTextField("Key")
            .DataValueField("Key")
            .Events(ev => ev.Change("onChange"))
            .BindTo((List<KeyValuePair<string, string>>)ViewData["ParentChildRelations"])
        )
    }
    
    <script>
        function onChange(e) {
            $("form").submit();
        }
    </script>

To review the complete example, refer to the project on how to implement a hierarchical Grid using a DataTable and dynamic Model loading.

More ASP.NET MVC Grid Resources

See Also