Possible Customizing the Dragged Header?

2 posts, 0 answers
  1. Shinn
    Shinn avatar
    1 posts
    Member since:
    Apr 2015

    Posted 17 Oct 2016 Link to this post

    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.
  2. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    633 posts

    Posted 19 Oct 2016 Link to this post

    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:


    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:


    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:


    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.
Back to Top