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