JavaScript Grid

Set the groupsrenderer property of the jqxGrid. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="jqxgrid"></div>

JavaScript

var data = generatedata(200);
  var source = {
      localdata: data,
      datafields: [{
          name: 'firstname',
          type: 'string'
      }, {
          name: 'lastname',
          type: 'string'
      }, {
          name: 'productname',
          type: 'string'
      }, {
          name: 'date',
          type: 'date'
      }, {
          name: 'quantity',
          type: 'number'
      }, {
          name: 'price',
          type: 'number'
      }],
      datatype: "array",
      updaterow: function (rowid, rowdata) {
          // synchronize with the server - send update command   
      }
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  var toThemeProperty = function (className) {
      return className;
  }
  var groupsrenderer = function (text, group, expanded, data) {
      if (data.groupcolumn.datafield == 'price' || data.groupcolumn.datafield == 'quantity') {
          var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
          var text = data.groupcolumn.text + ': ' + number;
          if (data.subItems.length > 0) {
              var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, data.subItems);
          } else {
              var rows = new Array();
              var getRows = function (group, rows) {
                  if (group.subGroups.length > 0) {
                      for (var i = 0; i < group.subGroups.length; i++) {
                          getRows(group.subGroups[i], rows);
                      }
                  } else {
                      for (var i = 0; i < group.subItems.length; i++) {
                          rows.push(group.subItems[i]);
                      }
                  }
              }
              getRows(data, rows);
              var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, rows);
          }
          return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position:...