Master and Detail with two different Grids

[Mattia]

Hello! I'm developing a web application using ASP .NET MVC 5 with KendoMVC and KendoUI.

I'm implementing two master and detail grids, but not with nested detail grid inside master grid like here: http://demos.telerik.com/aspnet-mvc/grid/hierarchy nor with detail template like here: http://demos.telerik.com/aspnet-mvc/grid/detailtemplate 

Actually I have two different grids, when you select a row in the master grid, the details of that row are visualized in the detail grid. 
The datasource is made by Ajax binding, I read data from an action in a controller and I pass to that action some extra data, some snippet code at the end of the post. 

Briefly speaking, when I select a row from master grid, the "gridOnchange" event is fired, inside that function I create a new kendo.data.dataSource like this:

var dataSource = new kendo.data.DataSource({
        schema: {
            data: "Data",
            total: "Total"
        },
        change: function() {
            detailGrid.refresh();
            if (detailGrid.pager != undefined)
                detailGrid.pager.refresh();
        },
        transport: {
            read: {
                url: baseUrl + "Service/DoSelectGrid",
                datatype: "json",
                type: 'POST',
                cache: false,
                data: {
                    detailParams: JSON.stringify(detailParams)
                }
            }
        }
    });

 thus this dataSource is bound to detail grid and than the data is fetched, like this:

detailGrid.dataSource = dataSource;
   detailGrid.options.dataSource = dataSource;

   if (detailGrid.pager != undefined)
       detailGrid.pager.dataSource = dataSource;

   detailGrid.dataSource.fetch(function() {
       if (detailGrid.pager != undefined) {
           detailGrid.dataSource.pageSize(oldDs.pageSize());
           detailGrid.dataSource.page(oldDs.page());
       }
   });

 all is working but I have some problems with pagination and grouping, for pagination I have resolved with extra code (like that in last code snippet), also catching the events e.RequestStart("gridOnRequestStart").RequestEnd("gridOnRequestEnd") helps to re create the dataSource and re fetching the data but is a bit tricky and the grouping in detail grid still does not work.

My questions are, is there any other way to achive this? Some best practices? Some easiest way? Any advice?
And finally...why in the detail grid the pagination and grouping fail, and it doesn't behave like a "normal" or "regular" grid?

 

Thanks a lot!

Razor View:

 

grid.Events(e => e.DataBound("gridInit").Change("gridOnChange"));


grid.DataSource(ds =>

{

    var ajaxDsBuilder = ds.Ajax();

    ajaxDsBuilder.Model(model => model.Id("Id")).Events(ev => ev.Error("gridOnError")).ServerOperation(true);       

    ajaxDsBuilder.Events(e => e.RequestStart("gridOnRequestStart").RequestEnd("gridOnRequestEnd"));

    ajaxDsBuilder.Read(read => read.Action("DoSelectGrid", "Service").Data("grid.getGridMainParams").Type(HttpVerbs.Post));

});

Controller:

[HttpPost]

public ActionResult DoSelectGrid([DataSourceRequest] DataSourceRequest request, string detailParams)

{

    //code

    return Json(LocalDataTable.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

 

[Nikolay Rusev]

Hello Mattia,

I've attached an example demonstrating how you can implement related grids. See the attached project for more details.

Regards,
Nikolay Rusev
Telerik

 

 

[Mattia]

thanks Nikolay, this gave me a different view of the problem and I've managed to solve in a much simpler way!