New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Implement Grid Hierarchy with Dynamic Model Loading and DataTable
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Product version | 2025.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:
-
Define a hierarchical Grid and populate its columns using the available
DataTable
. Also, handle theDetailInit
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>
-
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
- ASP.NET MVC Grid Documentation
- ASP.NET MVC Grid Demos
- ASP.NET MVC Grid Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums