jQWidgets Forums

Tagged: javascript grid, jquery grid, jqwidgets, jqxgrid

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

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

Author

Query regarding jqxgrid aggregations. Posts

May 20, 2013 at 10:27 am Query regarding jqxgrid aggregations. #21442

Participant

Hello,

I am using jqxgrid aggregation in a grid but if four rows are present and 3 rows are filled with data and one remaing without filling data then aggregation is not working properly .

Please guide me in this as soon as possible.

Thanks & Regards,

Apeksha

May 20, 2013 at 10:47 am Query regarding jqxgrid aggregations. #21446

Peter Stoev

Keymaster

Hi,

Please, find below a working sample of a Grid with Aggregates and an Empty Row. The sample is prepared and tested with jQWidgets 2.8.3.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to display aggregates in jqxGrid.</title>
    <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(4);
            data[0].firstname = null;
            data[0].lastname = null;
            data[0].productname = null;
            data[0].available = null;
            data[0].quantity = null;
            data[0].price = null;
            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'],
                      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>';
                          });
                          return renderstring;
                      }
                  },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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.