1

I have a kendo grid with two levels of groups. I have groupHeaderTemplates defined for these two groups. I have a groupFooterTemplate defined for my aggregate value which is timeWorked. The problem is the groupHeaderTemplate is now defined for both the groups. I need it defined for only the other group.

I tried the CSS way of hiding the extra records but the problem with this is there is no defining characteristics in the .k-group-footer rows to distinguish what group it belongs to and $("#grid .k-grid-content") doesn't show the hierarchy.

http://www.telerik.com/forums/how-to-do-custom-aggregate-functions Shows how to get the groupId in the footer. However, it will not work because the groupId uses a global variable which will be overwritten with whatever groupHeaderTemplate function is called first. Since the groupHeaderTemplates are done before any groupFooterTemplates, I still have no way of knowing what the groupId refers to.

This is what my group option looks like: [ {field: “projectDescription”, aggregates: [ {field: "timeWorked", aggregate: "sum"} ]}, {field: "entryDate"} ];

Samuel
  • 31
  • 5

2 Answers2

2

First answer was looping through the rows in the databound. This seems to work but Kendo has another event that you cannot subscribe to that happens when you expand/collapse groups for example. The CSS answer, found through Is there a "previous sibling" CSS selector? is this:

.k-group-footer {display: none !important;}
.k-group-footer + .k-group-footer {display: table-row !important;}

The importants are necessary or Kendo will override the display property with that internal refresh event. "table-row" isn't actually a CSS display property but is what Kendo uses. Block or inline will display horribly. The visibility property will give ugly white space (collapse or hidden). Collapse is supposed to be for tables but it doesn't seem to work in this instance.

Community
  • 1
  • 1
Samuel
  • 31
  • 5
0

for more than 2 subgroups to show only the footer of the lowest child group, add a css like this

.k-group-footer {
   display: none !important;
}
.k-master-row + .k-group-footer {
   display: table-row !important;
}