Hi, can I ask is it possible to modify or change the dragged header like the image attached? Wish to allow user to select their own aggregates and group them by their own. An example provided would be great if it is possible to do so.
1 Answer, 1 is accepted
0
Hello Shinn,
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:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.groupHeaderTemplate
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 event:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-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:
http://dojo.telerik.com/UbunU
Regards,
Alex Hajigeorgieva
Telerik by Progress
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:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.groupHeaderTemplate
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 event:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-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:
http://dojo.telerik.com/UbunU
Regards,
Alex Hajigeorgieva
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.