jQuery UI Widgets Forums Grid Grid aggregates accessing other column summary data

This topic contains 21 replies, has 3 voices, and was last updated by  assaf.frank123 10 years, 10 months ago.

Viewing 7 posts - 16 through 22 (of 22 total)
  • Author

  • assaf.frank123
    Participant

    This is not a good solution –
    My calculation is the average cost of an item = (totalCost / totalNumItems) which is not equal
    the some or average of each row..

    Any other solution I can access the summary row after the table is loaded and insert my values then
    (I would access the summaryData for both columns and set the required value)?

    Thanks


    Dimitar
    Participant

    Hi assaf.frank123,

    Here is the solution, based on our previous example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(200);
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command   
                        commit(true);
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    showstatusbar: true,
                    statusbarheight: 25,
                    altrows: true,
                    showaggregates: true,
                    ready: function () {
                        var sumQuantity = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'quantity', ['sum']);
                        var sumPrice = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'price', ['sum']);
                        sum = sumQuantity.sum / sumPrice.sum
                        var color = "green";
                        if (sum < 0) {
                            color = "red";
                        };
                        $("#totalAggregates").css("color", color);
                        $("#totalAggregates").text(sum);
                    },
                    columns: [
                        { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                        { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                        { text: 'Product', datafield: 'productname', width: 170, aggregates: [{ 'Total':
                            function (aggregatedValue, currentValue, column, record) {
                                return '<span id="totalAggregates"></span>';
                            }
                        }], aggregatesrenderer: function (aggregates, column, element) {
                            return aggregates.Total;
                        }
                        },
                        { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right', cellsformat: 'n2', aggregates: ["sum"] },
                        { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ["sum"] }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    assaf.frank123
    Participant

    Hi Dimitar,

    going back to my issue of needing to set a value in the “total” bottom line – without actually performing all the aggregates functions etc.
    (so the browser will not crash with many rows).

    Is there any way to access the aggregates total row’s HTML directly and setting my content there myself?
    If possible – I wish to implement an on Filter function that will access the newly calculated (after the filter) sum of column A and divide it by
    by the newly sum of column b – the result is to be set directly in column C.

    If I can just access the totals row and fetch A & B and set C this will work even with many rows (will be done only once).

    Any option for this?

    Thanks,


    Dimitar
    Participant

    Hi assaf.frank123,

    That is just what has been done in the last example we provided you. Please check it out and note the span with id totalAggregates, which you can access and update any time you need.

    Best Regards,
    Dimitar

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


    assaf.frank123
    Participant

    OK , this works but there are 2 issues-

    1. It works only if the column is a text input column. If I use columntype: ‘numberinput’ this will not work (expect a number to be
    returned in the aggregates and not a String (the span string) – any way around this? achieve what I want event with a number input column?
    2. Later in the code I perform a change of the table width –
    $(‘#jqxgrid’).jqxGrid({ height: tableHeight });

    This is in order to use the maximum height available according to screen resolution (autoheight has limitations regarding the column headers
    not being in place).

    This causes the renderer function to execute once more after the grid ready function that performs the initialization of the aggreagateTotal
    span – the value is erased by this. Any way to prevent this? or achieve the maximum height available without changing by API?

    Thanks


    Dimitar
    Participant

    Hi assaf.frank123,

    1) For a “numberinput” you can change this:

    aggregatesrenderer: function (aggregates, column, element) {
        return aggregates.Total;
    }

    with this:

    aggregatesrenderer: function (aggregates, column, element) {
        var sumQuantity = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'quantity', ['sum']);
        var sumPrice = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'price', ['sum']);
        sum = sumQuantity.sum / sumPrice.sum
    
        return sum;
    }

    and the span will not be needed any longer.

    2) You can set the height to “100%”, as in the mobile demo Default Functionality.

    Best Regards,
    Dimitar

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


    assaf.frank123
    Participant

    Thanks.
    That did the trick and works fine with many records in the grid.

Viewing 7 posts - 16 through 22 (of 22 total)

You must be logged in to reply to this topic.