This is a migrated thread and some comments may be shown as answers.

Master and Detail with two different Grids

2 Answers 103 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mattia
Top achievements
Rank 1
Mattia asked on 17 Jun 2015, 02:29 PM

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);
}

 

2 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 19 Jun 2015, 07:28 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mattia
Top achievements
Rank 1
answered on 19 Jun 2015, 09:48 AM
thanks Nikolay, this gave me a different view of the problem and I've managed to solve in a much simpler way!
Tags
Grid
Asked by
Mattia
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Mattia
Top achievements
Rank 1
Share this question
or