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
answered on 19 Oct 2016, 02:33 PM
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.
In the handler function, initialize the dropdowns based on the class name assigned in step 1)
3) Utilise the changeevent 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:
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.