Grid with table hierarchy on for server grouping functionality

[Charlie]

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

[Boyan Dimitrov]

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

 

 

[Charlie]

Thanks for the reply Boyan, I will try to use the detail template to implement my custom behavior. Is there a way to preserve the default behavior and layout of the grid and only invoke this template when grouping has been turned on?

[Boyan Dimitrov]

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

 

 

[Charlie]

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

[Charlie]

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. ​

[Boyan Dimitrov]

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

 

 

[Charlie]

I noticed grouping server paginated data resulted in chunking groups of data based on page size. That means the last group, or in cases where we are on a page higher than 1, that the groups will be cut off and aggregates will not become accurate. Is there a way to ensure groups to resemble accurate aggregation through merging two paginated blocks of data? Groups should all be under one field and value, I'm seeing two groups of the same value after reaching the bottom of the pagination block. Then the next block, the rest of the previous group is displayed

[Boyan Dimitrov]

Hello,

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

 

 

[Charlie]

Hi Boyan, I am using the HTML5 version of kendo, is there a setting to toggle this feature in kendo initiation? I'm dynamically generating my columns, is there a way to set this aggregate feature without hardcoding the field that I want to count, and only appear in the groupHeaderTemplate.

[Boyan Dimitrov]

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

 

 

[Charlie]

Yes, my columns look like this 

{
   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?

[Boyan Dimitrov]

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