3 Answers, 1 is accepted
0
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
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
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
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
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.