How can I have column aggregates on the top of the grid vs the footer?

4 posts, 0 answers
  1. Shermy
    Shermy avatar
    3 posts
    Member since:
    Jun 2014

    Posted 17 Oct Link to this post

    Without grouping - right now, I have the aggregates configured in the footer (photo attached).

    Is there a way to add the same aggregates row right below the headers (top of the grid above the data)? 

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    114 posts

    Posted 19 Oct Link to this post

    Hello Shermy,

    If you already have the aggregates you wish to display, then that would be an easy task to complete. I believe that the Kendo UI Grid toolbar template is what you need:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-toolbar.template

    Our official demo for customising the toolbar of the grid is available at:

    http://demos.telerik.com/kendo-ui/grid/toolbar-template

    Kind 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.
     
  3. Kendo UI is VS 2017 Ready
  4. Shermy
    Shermy avatar
    3 posts
    Member since:
    Jun 2014

    Posted 19 Oct Link to this post

    Alex,

    Thanks for the reply.

    The toolbar template might be what I need, however i'm not sure how to accomplish what I'm trying to do. I need the aggregates aligned with the column it is aggregating - like how it appears in the "footerTemplate". I also need it to be dynamic - when a column is hidden or shown, the "toolbarHeader" would also need to be hidden/shown respectively.

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    114 posts

    Posted 20 Oct Link to this post

    Hello Shermy,

    To accomplish a dynamic Kendo UI Grid ToolBar with aggregates per column, some custom coding will be required.

    One possible approach is to add an event handler function to the dataBound event of the grid and obtain the content of each column footerTemplate. Then append it to the toolbar, after applying the correct CSS rules to it and most importantly the relevant column widths. If you have different column widths, you may need another approach in the quest of acquiring them and applying them to the right HTML element.

     Subsequently, attach an event handler to the columnHide and columnShow events:

    - dataBound : http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound
    - columnHide: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-columnHide
    - columnShow: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-columnShow

    For your convenience, I have created a sample demo that you may use as a starting point in your implementation:

    http://dojo.telerik.com/uCohI

    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.
Back to Top
Kendo UI is VS 2017 Ready