Grid - Add column containing sum

[Bob]

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.  

[Konstantin Dikov]

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:

• Create calculated value for Grid 

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Bob]

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? 

[Konstantin Dikov]

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:

• http://dojo.telerik.com/EbAGi/3

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Bob]

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)
            }
        }
    }
},

​