This is a migrated thread and some comments may be shown as answers.

Possible Customizing the Dragged Header?

1 Answer 16 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shinn
Top achievements
Rank 1
Shinn asked on 18 Oct 2016, 02:20 AM
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

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 19 Oct 2016, 02:33 PM
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
 
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.
Tags
Grid
Asked by
Shinn
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or