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

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

3 Answers 172 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chap
Top achievements
Rank 1
Chap asked on 18 Oct 2016, 03:28 AM

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)? 

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 19 Oct 2016, 03:03 PM
Hello ,

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.
 
0
Chap
Top achievements
Rank 1
answered on 19 Oct 2016, 10:12 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 20 Oct 2016, 11:52 AM
Hello ,

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.
Tags
Grid
Asked by
Chap
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Chap
Top achievements
Rank 1
Share this question
or