jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 1 month ago.

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

Author

Sums of sums Posts

May 18, 2013 at 5:50 pm Sums of sums #21386

Participant

I create with the grid 4 tables on one page and use in each table the SUM option..
Now I wish to show under the last table the sum of these 4 sums..
how can I grab these 4 sums and echo the total?

May 20, 2013 at 5:24 am Sums of sums #21427

Dimitar

Participant

Hello gtielemans,

Here is an example, that shows how to get the sum of column values and use it outside the grid. You may do this for all your grids and then sum the sums.

<!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.8.3.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.edit.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/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // my comment
            // 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: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 680,
                source: dataAdapter,
                theme: theme,
                showstatusbar: true,
                statusbarheight: 50,
                editable: true,
                showaggregates: true,
                selectionmode: 'singlecell',
                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: ['count',
                          { 'Cappuccino Items':
                            function (aggregatedValue, currentValue) {
                                if (currentValue == "Cappuccino") {
                                    return aggregatedValue + 1;
                                }
                                return aggregatedValue;
                            }
                          }
                      ]
                  },
                  { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
                      aggregates: [{ 'In Stock':
                          function (aggregatedValue, currentValue) {
                              if (currentValue) {
                                  return aggregatedValue + 1;
                              }
                              return aggregatedValue;
                          }
                      },
                      { 'Not In Stock':
                          function (aggregatedValue, currentValue) {
                              if (!currentValue) {
                                  return aggregatedValue + 1;
                              }
                              return aggregatedValue;
                          }
                      }
                     ]
                  },
                  { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'] },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', aggregates: ['sum', 'avg'],
                      aggregatesrenderer: function (aggregates) {
                          var renderstring = "";
                          $.each(aggregates, function (key, value) {
                              var name = key == 'min' ? 'Min' : 'Max';
                              renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value + '</div>';
                          });
                          $("#sumLog").text(aggregates.sum);
                          return renderstring;
                      }
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
    <span id="sumLog"></span>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.