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

Dynamically Update Footer Template

4 Answers 473 Views
Grid
This is a migrated thread and some comments may be shown as answers.
dnickels
Top achievements
Rank 1
dnickels asked on 27 Mar 2014, 06:45 PM
I have a need to dynamically update the footer template for a grid column.  There is a custom calculation that needs to be performed on data for a column and the result of the calculation should be displayed in the column footer.  The data for the grid is local.  The custom calc should be triggered and the footer should be updated immediately after the user modifies the data for a cell in the column.

I created a Kendo UI Dogo sample to illustrate what I'm trying to do.  The sample can be found at http://trykendoui.telerik.com/oVEV.  In the sample, a function named "calc" is being called by the footer template.  I'm having two problems trying to accomplish my goal right now.

1. The call to the "calc" function is wired to the save event of the grid.  However, the data source doesn't contain the latest values at the point in time that the save event callback is called.  It's as if the save event is actually a "beforeSave" event.  How do I get the updated values from the grid's data source?  Is there another event that I should be using for making the call to the "calc" function?

2. Once problem #1 is solved and the "calc" function is able to calculate the correct values, how do I display the new value in the column footer?

4 Answers, 1 is accepted

Sort by
0
dnickels
Top achievements
Rank 1
answered on 28 Mar 2014, 02:08 PM
I was able to get the calculated value to display in the footer by making a call to the grid's refresh method in the save event handler.  the updated sample is at http://trykendoui.telerik.com/oVEV/3.  The drawback is that this call messes with the default navigation.  Typically, when when clicking on a new cell, the newly clicked cell is automatically put into edit mode.  However, the call to refresh() prevents this.  The user is forced to click the cell again in order to put it into edit mode.  Yuck.  Anyone know of a more elegant solution to the problem of trying to dynamically update a column footer?
0
Alexander Popov
Telerik team
answered on 31 Mar 2014, 02:48 PM
Hello dnickels, 

This could be achieved by replacing the text of a span drawn in the footer right after the save event handler finished. Here is an updated example that illustrates this approach.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Khalid
Top achievements
Rank 1
answered on 22 Feb 2017, 07:24 AM

The above solution is working fine with the grid footer. but when I try to export the same to Excel, the value appears as below(with the HTML tags),

Total: <span id='footerPlaceholder'>5</span>

Also is it possible to do the total calculation during some other button click, rather than on grid edit.

Thanks in advance

0
Alexander Popov
Telerik team
answered on 23 Feb 2017, 12:56 PM
Hi Khalid,

Please refer to the Grid's Excel export limitations, where possible workarounds for similar scenarios are suggested.

Regards,
Alexander Popov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
dnickels
Top achievements
Rank 1
Answers by
dnickels
Top achievements
Rank 1
Alexander Popov
Telerik team
Khalid
Top achievements
Rank 1
Share this question
or