The desired functionality is not available out of the box, however, it is possible with the API revealed by the Kendo UI Grid and DropDownList.
Below are the steps to achieve the desired outcome:
1) Configure the columns groupHeaderTemplate option:
Create a Kendo UI template including one input with a class name, this will be the Kendo UI DropDownList.
Since you have access to all the aggregates data here, just add them to the template using the correct Kendo UI Templates
syntax and hide them. I believe it is best to give each element holding the aggregates a class name equal to the aggregate name(e.g class="sum"). It will come in handy later on when you wish to show it.
2) Add an event handler to the dataBound
In the handler function, initialize the dropdowns based on the class name assigned in step 1)
3) Utilise the change
event of the DropDownList to obtain its value. Then you can find the closest row and hide all the elements holding the aggregates value. Right after that, use the obtained DropDownList value to show only that one.
A runnable demo I created for you is available at:
Telerik by Progress
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2
. Try it out today
! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.