Running total for row on client text input

[John St. Amant]

Looking for suggestions for a web page data entry grid to display refreshed total for entire row.  JavaScript, or AJAX...?

I'm using GridBoundColumns substitued with TextBoxes via ItemCreated.  And entire Grid is EditMode="InPlace"

Several rows in grid, and 12 columns across for each month.  When user keys in value for a monthly text box, would like to give them a 'running' total on the far right for that row (without postback).  That is, row by row total.

Requesting 'hints' for direction to pursue.  Pure JavaScript solution (text changed, then determine which row user is working on, add all text box months across and place total in a column on far right)?  Or maybe an AJAX solution...?  TIA.

[Vlad]

Hi John,

You can use something similar to this example:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndInput/DefaultCS.aspx?product=grid

Regards,
Vlad
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[John St. Amant]

Thanks for suggesting that demo, looks really handy. 

But I'm just wondering:  would a similar approach work for updating a 'column' in a row? 

I don't want to update the footer, but total all months for an entire row across.  Each time the user updates a 'cell'.  To provide user with a running annual total.

Would I do that in a JavaScript event...?  How do I identify the row user updated, to then total all 'cells' in row and finally, update a "Total" column on the far right hand side?

[Sebastian]

Hi John St. Amant,

The approach for 'update' functionality should be pretty much the same (intercepting the OnBlur and OnFocus client events of the numeric inputs to calculate the total value). The difference would be that you need to get reference to the 'total' input which would reside in a different place (probably in item template of a template column positioned as last in your grid).

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[newbie]

Hi,

I used the code in the demo referenced below.
The problem I have is I have multiple columns for which I need to display the footer.
I need to update the respective footer whenever any value in that column changes on client side.

If I have just one column then the code works fine.
In case of multile columns whenever I update any value in the cell the footer for the last column is updated irrespective of which column the cell belongs to.

i doubt it's because we set the sumInput to the sender in the Load function and it keeps the last value.

I am not a javascript person, any help will be appreciated.

[Sebastian]

Hello newbie,

The javascript logic for updating the footer values for multiple columns will not differ if you ensure that you access the cells of the column of interest using its unique name. Please verify that and let us know if further directions/assistance is needed.

Kind regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[newbie]

Can you provide me a sample code

[Sebastian]

Hi newbie,

Here is the example you requested (you will find it attached to this message). Note that I added duplicate Freight column as last in the grid and attached different Blur/Focus/Load client handlers for the second set of RadNumericTextBox instances in that column.

Best regards,

Stephen

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.