jQuery UI Widgets Forums Grid Grid Aggregates

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Grid Aggregates #61466

    vgrover
    Participant

    Hi,

    I am dynamically creating columns and no. of columns are not known in advance, so far simple aggregations working fine, but I don’t want the label Sum written in front of each Total. I tried using custom aggregates but seems not working in a string. Here is the example.
    Let me know how can i achieve this.

    This works fine but shows Sum: $9999
    cols1 = ‘{ “text”: “‘ + curMonthText + ‘”, “datafield”: “‘ + curMonth + ‘”, “width”: “72”, “cellsalign”: “right”, “align”: “right”, “cellsformat”: “n”, “aggregates”: [“sum”] }’;

    I want only $99999
    cols1 = ‘{ “text”: “‘ + curMonthText + ‘”, “datafield”: “‘ + curMonth + ‘”, “width”: “72”, “cellsalign”: “right”, “align”: “right”, “cellsformat”: “n”, “aggregates”: [{ ‘ +
    ‘ function (aggregatedValue, currentValue, column, record) { ‘ +
    ‘ var total = currentValue; ‘ +
    ‘ return aggregatedValue + total; ‘ +
    ‘ } ‘ +
    ‘}]’ + ‘}’;

    Thanks, Vikas

    Grid Aggregates #61481

    Nadezhda
    Participant

    Hello Vikas,

    Here is an example which shows how to use ‘aggregatesrenderer’ to set value without label.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(3);
    
                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: 850,
                    source: dataAdapter,
                    showstatusbar: true,
                    statusbarheight: 50,
                    editable: true,
                    showaggregates: true,
                    selectionmode: 'singlecell',
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
                      {
                          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'],
                          aggregatesrenderer: function (aggregates, column, element, summaryData) {
                              var renderstring = "<div>";
                              $.each(aggregates, function (key, value) {
                                  var name = key == 'price';
                                  renderstring += '<div>' + value + '</div>';
                              });
                              renderstring += "</div>";
                              return renderstring;
                          }
                      }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Grid Aggregates #61505

    vgrover
    Participant

    Hi Nadezhda,

    Thanks for the prompt reply, but my issue is different. In my case, the no. of columns are month&year about 48months and the column names and values are dynamically created right from the database. Therefore I can not have static function calls since column names and number arent pre-determined.

    I am trying this:
    cols1 = ‘{ “text”: “‘ + curMonthText + ‘”, “datafield”: “‘ + curMonth + ‘”, “width”: “72″, “cellsalign”: “right”, “align”: “right”, “cellsformat”: “n”, “aggregates”: [{ ‘ +
    ‘ function (aggregatedValue, currentValue, column, record) { ‘ +
    ‘ var total = currentValue; ‘ +
    ‘ return aggregatedValue + total; ‘ +
    ‘ } ‘ +
    ‘}]‘ + ‘}’;

    I am trying to include aggregate function for each column within its text property. Somehow this isnt working. Any clue how to do this.

    Thanks, Vikas

    Grid Aggregates #61521

    Nadezhda
    Participant

    Hi Vikas,

    You can achieve this only with ‘aggregatesrenderer’ as it is shown in above example.

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.