[Solved] Getting Total in Footer with Filtering

[Josh Pollard]

I looked at your example that shows how to put a total in a grid footer, located here http://demos.telerik.com/aspnet-mvc/grid/headerfootertemplates

The problem is that your example doesn't support filtering. I want to be able to use the built-in filtering, but to also be able to display a total column at the bottom of the grid for whatever data is actually being displayed. Do you have any ideas on how I could do this?

Thanks!

[Rosen]

Hello Josh,

In order to achieve the requested functionality you should manually filter the data used to calculate the total value. I have attached a small sample which demonstrates possible  implementation.

Regards,
Rosen
the Telerik team

[Josh Pollard]

Thank you! That did indeed solve it for me. 

[Greg]

This question is a little old, but there is a jQuery solution to this for anyone interested ...

Add a label to a column footer that will contain the filtered value ... we'll call it "subTotal"

.FooterTemplate("<label id='subTotal'></label>")

Add a clientEvent OnDataBound to the grid

.ClientEvents(events => events.OnDataBound("onDataBound"))

You'll need to set a variable 'hr' with a default value.  This worked for me ... the $(document).ready() makes sure its set to the default value on page load

var hr = 0.00;
  $(document).ready(function () {
    hr = 0.00;
 });

In the OnDataBound  function, you grab the cells value using the jQuery.each(). The hr = 0.00; will reset for each bind.  We then set the text value of the label to the variable hr.

Now when you filter the grid, the function will iterate through the available cell values, add them up and show the filtered results

function onDataBound(e) {

    hr = 0.00;

    $("#AddClassStudentHours tbody > tr").each(function () {

         var tr = this;

         var dcells = tr.cells;

         hr = parseFloat(hr) + parseFloat(dcells[3].innerHTML);

});

 

$("#subTotal").text(parseFloat(hr).toFixed(1));