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

Grid - Add column containing sum

4 Answers 461 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 30 Jul 2015, 11:29 PM

Simplified example -

Have a grid with a column for a name and 12 more columns for each months of the year containing a number.
I'd like to add a 14th column which is the sum/aggregate of the months (not the name ​tho, so I'm specifying just the ones I want in the aggregate).

The examples I've seen suggest adding a footer row, I want my total to be inline and to update as values in the grid are updated.

 Any suggestions or terms I should be googling for?

var columnList = [
...........

]

columnList.push(

{field: ...,  title: "Year Total", width:70}

);

Is roughly how I've been adding columns to the grid.  

4 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 03 Aug 2015, 12:52 PM
Hi Bob,

If I understand correctly your requirement, you need to display a total of all months values in a separate column for each row. If that is the case, please note that you will need to create template column and calculate the total manually. You can refer to the following forum thread for examples:
Hope this helps.


Regards,
Konstantin Dikov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 06 Aug 2015, 10:15 PM
Thanks for the link - that helped me to create the total on load, but how do I keep the total current as user's edit the grid? 
0
Konstantin Dikov
Telerik team
answered on 07 Aug 2015, 02:55 PM
Hi Bob,

Updating the total on the fly will be a difficult task, especially when you have so many columns. Nevertheless, you could wrap the total value in some element that you could easily get reference to in the context of the TR element of the row. Then, you will have to handle the save event of the grid, determine the value of which column was changed and calculate once again the total. Once you have the new total you can update the content of the element holding the total value.

You can refer to the following dojo example for a simple scenario:
Hope this helps.


Regards,
Konstantin Dikov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 10 Aug 2015, 11:40 PM

Thanks I was able to get the code to work.   To your point about there being a lot of data to manage, and looking at how the e.model vs e.value contains new and old values it'd be a real pain to try and decipher all that since my grid can have multiple years worth of monthly columns.

save: function (e) {
    for(i in e.values) { 
        if(e.values.hasOwnProperty(i)) {
            // If an est cell has been modified, apply delta to the Est Total.
            var re = new RegExp("^(m[0-9]{1,2}estHours)$");
            if (re.test(i)) {
                newValue = parseFloat(e.values[i]);
                oldValue = parseFloat(e.model[i]);
                // I'd like this to update the UI if user wiped cell.  it kinda does - i see a 0 for a second but then it reverts to blank
                if (isNaN(newValue)){newValue = 0; e.values[i] = 0; e.container.html("0");}
                if (isNaN(oldValue)){oldValue = 0; e.model[i] = 0; e.container.html("0");}
                                         
                var totalSpan = e.container.closest("TR").find(".totalEst");
                newTotal = (parseFloat(totalSpan.text()) + newValue - oldValue);
                totalSpan.html(newTotal)
            }
        }
    }
}, 

Tags
Grid
Asked by
Bob
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Bob
Top achievements
Rank 1
Share this question
or