jQuery UI Widgets Forums Grid Calculated Row Based on Other Rows

This topic contains 7 replies, has 2 voices, and was last updated by  bcurr 10 years, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Calculated Row Based on Other Rows #56869

    bcurr
    Participant

    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.

    Example

    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!

    Calculated Row Based on Other Rows #57002

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Calculated Row Based on Other Rows #57122

    bcurr
    Participant

    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 row2

    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);
            return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + (parseFloat(row0) * parseFloat(row2)) + '</span>';
        }
    }

    Again, many thanks for the help!

    Calculated Row Based on Other Rows #57133

    bcurr
    Participant

    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

    Calculated Row Based on Other Rows #57139

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Calculated Row Based on Other Rows #57146

    bcurr
    Participant

    That makes sense that it would loop.
    Is there a better place to do this calculated than cellrenderer then?

    Calculated Row Based on Other Rows #57150

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Calculated Row Based on Other Rows #57151

    bcurr
    Participant

    You assumed correctly.
    I’ll give your suggestions a go. Many thanks!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.