jQuery UI Widgets › Forums › Grid › Calculated Row Based on Other Rows
Tagged: calculate, cellsrenderer, computed, grid, jqxgrid, row, setcellvalue
This topic contains 7 replies, has 2 voices, and was last updated by bcurr 10 years, 7 months ago.
-
Author
-
Hi
I’ve looked all over for examples but am struggling to see if it’s possible to set a row that is calculated based on 2 other rows.
If you look at the attached image, I’m trying to make it so that in each column Row3 is a calculation of Row0*Row2 and that if either Row0 or Row2 is edited, then Row3 is updated.So far, as an example, I’ve tried to set Row 3 for Column A as “parseFloat(rowdata.A.0) * parseFloat(rowdata.A.2)” in the same way you calculate a column, but this gives me the NaN return.
Any help or example greatly appreciated!
Hello bcurr,
You should apply the following cellsrenderer function to each column (change “A” to “B”, “C”, etc.):
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) { if (row == 3) { var row0 = $('#jqxgrid').jqxGrid('getcellvalue', 0, "A"); var row1 = $('#jqxgrid').jqxGrid('getcellvalue', 1, "A"); return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + (parseFloat(row0) * parseFloat(row1)) + '</span>'; } }
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar, thank you so much for this it worked fantasticly.
To make it easier, I used columnfield instead of “A”. “B” etc.
I’ve also updated the code below to reflect row0 and row2cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) { if (row == 3) { var row0 = $('#jqxgrid').jqxGrid('getcellvalue', 0, columnfield); var row2 = $('#jqxgrid').jqxGrid('getcellvalue', 2, columnfield); return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + (parseFloat(row0) * parseFloat(row2)) + '</span>'; } }
Again, many thanks for the help!
A follow on question if I may. Is there a reason why during the above code I cannot do a setcellvalue?
eg.cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) { if (row == 3) { var row0 = $('#jqxgrid').jqxGrid('getcellvalue', 0, columnfield); var row2 = $('#jqxgrid').jqxGrid('getcellvalue', 2, columnfield); var row_calc = parseFloat(row0*row2); return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + row_calc + '</span>'; $("#jqxgrid").jqxGrid("setcellvalue", 3, columnfield, row_calc); } }
When I try it and debug in Chrome I get “Uncaught RangeError: Maximum call stack size exceeded”
The reason I’m trying to do this is the total column is calculated on A+B+C+D etc
Hello bcurr,
cellsrenderer is used only for rendering/styling the current cell it is called for, not setting other cells’ values. Calling setcellvalue will most probably result in erroneous behaviour such as trying to call cellsrenderer again (resulting in an infinite loop).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/That makes sense that it would loop.
Is there a better place to do this calculated than cellrenderer then?Hi bcurr,
I assume you also need to set the value, not only show it in the cell (achieved by cellsrenderer).
There is another approach you can try – in the grid’s ready callback set all calculated cells based on the first two rows. Then bind to the cellendedit grid event. If the event is fired by a cell from the first two rows, update the calculated row’s cell from the same column.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/You assumed correctly.
I’ll give your suggestions a go. Many thanks! -
AuthorPosts
You must be logged in to reply to this topic.