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
For your convenience, I have created a sample demo that you may use as a starting point in your implementation:
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.