Telerik MVC Grid Master Detail

Question

I have a master detail grid. I have a ViewModel that populates the Telerik parent grid by simply binding the model to the grid. This step was simple enough but I cannot get the subgrid to populate based on the data in the parent grid's row. How is this done using the mvc model? Can someone explain to me how to get the child/sub grid to pull its data based on the parent row's key value in the parent grid? I cant follow Telerik's example. Their solution is not easily understood. I am using server binding

Thanks

Adam Tuliper - MSFT Adam Tuliper - MSFT · Accepted Answer · 2011-05-10T20:38:48

In teleriks example from: http://demos.telerik.com/aspnet-mvc/grid/hierarchyserverside the master (parent) grid is Model This is then represented as e in detailsView.Template(e=>

Html.Telerik().Grid(Model)
        .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);
        })
        .DetailView(detailView => detailView.Template(e =>
        {
            %>
                <% Html.Telerik().Grid(e.Orders)
                       .Name("Orders_" + e.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}");
                        })

The "details" view knows to bind to a particular row because for each employee here, we get the orders into a detail view, so its really done in a "foreach" so there is no specific binding you need to worry about. This relationship is part of the model already passed into the view.

The rowaction is used to determine which section to show as expanded

.RowAction(row => 
                        {
                            if (row.Index == 0)
                            {
                                row.DetailRow.Expanded = true;
                            }
                            else
                            {
                                var requestKeys = Request.QueryString.Keys.Cast();
                                var expanded = requestKeys.Any(key => key.StartsWith("OrderDetails_" +
                                    row.DataItem.EmployeeID + "_" + row.DataItem.OrderID));
                                row.DetailRow.Expanded = expanded;
                            }
                        })

I would suggest you check our their docs - make sure you have the proper scripts mentioned, then try to get your example setup just like theirs. The ref for the grid is not too bad - you can find it at: http://www.telerik.com/help/aspnet-mvc/properties_t_telerik_web_mvc_ui_grid_1.html

make sure you try to get the full demo working, not just part - then you can replace the code piece by piece with yours.

Telerik MVC Grid Master Detail

1 Answers