I've got server grouping turned on with virtual scroll, yes I know it doesn't "great". I have modified the group remote call to return only the distinct groups and aggregates, updating the total of the rows in the "master total" (for scroll bar virtualization) with the # of distinct groups, paged.
I was wondering if its possible to expand these groups on my grid and initiate an AJAX call to grab the elements for this group, then build a table under the group header. Like this example http://dojo.telerik.com/uTEmU but on the grouping functionality only.
Reason for needing this is cause we have 260k+ rows with 20+ columns we need to paginate. The grouping function is essential in order to bring any sense into the data. Server grouping just doesn't give us the desired rows we want to see at one time.
Will adding a template on this hierarchy be possible? Example: http://demos.kendoui.com/web/grid/detailtemplate.html
Is it possible to provide a small example on how to do this?
Thanks,
Charlie
12 Answers, 1 is accepted
Hello Charlie,
I am afraid that grouping of the data is handled on data source level. From there the Kendo UI Grid will render the data grouped by the data source.
Given this it is not supported scenario to modify the HTML content of a group. In this case there will be significant difference between the rendered content and the data source, which will cause unexpected behavior.
What I can suggest you in this case is to use the DetailTemplate instead of Grouping in order to implement hierarchy. As demonstrated in the provided demo the detail template gives ability to define custom HTML content.
Regards,
Boyan Dimitrov
Telerik

Hello Charlie,
In order to provide a proper solution I would need to know some specifics regarding your scenario.
Could you please specify the following:
1. Whether the data source of the Grid is initially grouped and the Grid is not groupable. In other words there is grouping applied initially and users can not change it.
2. The groupable option for the Grid is enabled and users can change the grouping.
Regards,
Boyan Dimitrov
Telerik

Thanks for the reply Boyan, the Grid is not initially grouped and the user can change the grouping on the fly. In order to paginate, I have created
var
grid = $(
'#kendo-table'
).kendoGrid({
dataSource: {
type:
"json"
,
serverPaging:
true
,
serverSorting:
true
,
serverFiltering:
true
,
serverGrouping:
true
,
pageSize: 10000,
schema:schema,
transport: {
read: {
type:
"POST"
,
url: "http://domain.com/api/controller/id/table",
contentType:
"application/json"
,
beforeSend: _beforeSendXHRModifier,
data:{
targetTable:targetTable
}
},
parameterMap:
function
(data,type){
if
(type ===
"read"
){
console.log(data);
return
kendo.stringify(data);
}
}
},
},
height: height,
scrollable: {
virtual:
true
},
pageable:{
refresh:
true
,
previousNext:
false
,
numeric:
false
,
messages: {
display:
"Loaded {0}-{1} from virtualizing {2} data items"
}
},
groupable:
true
,
sortable:
true
,
selectable:
'multiple cell'
,
reorderable:
true
,
resizable:
true
,
columns: columns, // dynamically generated
filterable:
true
,
filterMenuInit: _onFilterMenuInit, // custom filter
}).data(
"kendoGrid"
);
grid.bind(
'dataBound'
,
function
(e){
console.log(
"dataBoundEvent without new grid instance"
);
var
gridDataSource = e.sender.dataSource;
if
(gridDataSource.group().length > 0) {
//the grid is grouped, do not want to see records all at once
$(
"#kendo-table"
).find(
".k-icon.k-i-collapse"
).trigger(
"click"
);
console.log(
'Lets start grouping, expanding will trigger ajax call on elements of this group'
);
}
});

Collapsing all groups has been an issue, i thought about only sending over the empty groups to the grid and use jQuery in the front end to capture a click of the <tr> row, get the index, shoot an ajax call to my server to grab the groups (possibly nested), and return the rows back to grid.dataSource.view() to manually add the groups in, is this a good idea?
This is a work around the the following issue:
If the grid groups are non-collapsed then the pagination is working fine. There are too many record groups that I have and it would be nice to see the group headers at the time of groups load because they have some aggregate numbers on them. As soon as they are clicked, then we populate the group elements asynchronously. ​
Hello Charlie,
In order to avoid any further confusions I would like to clarify that there is significant difference between grouping and using detail template.
Regarding the question from your last post - I am afraid that this is not good idea, because the items for a group could be added on demand (initially to load just group headers and load the items for the group when group is expanded). Such scenario is not supported - when groups are used the data should be available.
Also I noticed that you are using Virtualization (scrollable.virtual) and paging in the same time. Since both functionalities do same thing but in different way they can not be used at same time.
Given this my suggestion would be using detailTemplate instead of grouping. This way you can control the template, which renders the detail rows. Besides using detail template you can achieve hierarchy scenario.
Regards,Boyan Dimitrov
Telerik

Please note that even if server operations (paging, grouping and etc are handled on the server) are enabled, the aggregates should be calculated for all items. Please refer to the attached project.
Only the data for the current page is sent to the client, but the aggregates are calculated against the entire data in order to be accurate. For example it is showing that the total data is 77 items and the last group contains two items (even if only one of them is shown on the first page).
Regards,
Boyan Dimitrov
Telerik

Hello Charlie,
The aggregates should be added to columns.aggregates in order to be used in the header/footer template. This way the Kendo UI Grid should know what aggregate to calculate and display the value.
Regards,
Boyan Dimitrov
Telerik

{
field:
"field"
,
title: "title,
width: 160,
lockable:
true
,
locked:
false
,
aggregates: [
'count'
],
groupHeaderTemplate:
"Grouping by #=value# with #=count# records"
}
My previous photo I uploaded to this thread shows that these aggregates are only on the groupings of my results per page. Two photos show that the aggregates only are run on the grouping of data in the current page. In the case where one group spans 3 pages with page size of 25, each page of the group will only sum up to 25 rows for the count when I know I have at more than 50 results but less than 75.
I would like the aggregate to reflect the accurate count of the records, regardless of which page my grouping results are shown. Is that possible?
Hello Charlie,
schema.aggreates defines the field in the server response which contains the calculated aggregates.
aggregate option defines what aggregate function must be calculated. Those functions will be send to server when read request is issued in order to instruct the server handler what data is required.
Please refer to the attached file.
Regards,
Boyan Dimitrov
Telerik