Summary in JavaScript Grid

12 Sep 202324 minutes to read

Summary rows visibility can be controlled by the showSummary property and it can be added to grid by using the summaryRows array property. The following code example describes the above behavior.

HTML

<div id="Grid"></div>
<script type="text/javascript">
  $("#Grid").ejGrid({
     // the datasource "window.gridData" is referred from jsondata.min.js
      dataSource: window.gridData,
      showSummary: true,
      summaryRows: [{
          title: "Sum",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Sum,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}"
          }]
      }],
      allowPaging: true,
      columns: [
          { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },
          {field: "EmployeeID",headerText: "Employee ID",editType: ej.Grid.EditingType.NumericEdit,textAlign: ej.TextAlign.Right,width: 80 },
          {field: "ShipCity",headerText: "Ship City",width: 90},
          {field: "ShipCountry",headerText: "Ship Country", width: 100},
          { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" }
      ]
  });
  
</script>

NOTE

The dataMember denotes the aggregation column whereas the displayColumn denotes the column in which aggregation value will be displayed.

Summary in JavaScript Grid

Supported aggregates

Following are the supported list of the aggregates

Sum
Average
Maximum
Minimum
False Count
True Count

Sum, average, maximum and minimum

Summaries with the Sum, Average, Maximum and Minimum aggregate can be defined by using the summaryType in summaryColumns collections. These aggregate are used in the Number column.

HTML

<div id="Grid"></div>
<script type="text/javascript">
  $("#Grid").ejGrid({
      /// the datasource "window.gridData" is referred from jsondata.min.js
      dataSource: window.gridData,
      showSummary: true,
      summaryRows: [{
          title: "Sum",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Sum,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}"
          }]
      }, {
          title: "Average",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Average,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}"
          }]
      }, {
          title: "Maximum",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Maximum,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}"
          }]
      }, {
          title: "Minimum",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Minimum,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}"
          }]
      }],
      allowPaging: true,
      columns:
          [
              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },
              { field: "EmployeeID", headerText: "Employee ID", editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 80 },
              { field: "ShipCity", headerText: "Ship City", width: 90 },
              { field: "ShipCountry", headerText: "Ship Country", width: 100 },
              { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" }
          ]
  });
</script>

Sum, average, maximum and minimum aggregate of summary in Javascript grid

True and False count

Summaries with the True and False count aggregate can be defined by using the summaryType and summaryColumns collections. The True and False count aggregates are used for boolean columns.

HTML

<div id="Grid"></div>
<script type="text/javascript">
  $("#Grid").ejGrid({
      /// the datasource "window.gridData" is referred from jsondata.min.js
      dataSource: window.gridData,
      showSummary: true,
      summaryRows: [{
          title: "False Count",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.FalseCount,
              displayColumn: "Verified",
              dataMember: "Verified"
          }]
      }, {
          title: "True Count",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.TrueCount,
              displayColumn: "Verified",
              dataMember: "Verified"
          }]
      }],
      allowPaging: true,
      columns:
          [
              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },
              { field: "EmployeeID", headerText: "Employee ID", editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 80 },
              { field: "ShipCity", headerText: "Ship City", width: 90 },
              { field: "ShipCountry", headerText: "Ship Country", width: 100 },
              { field: "Verified", headerText: "Verified", width: 80 }
          ]
  });
</script>

True and False count aggregate of summary in Javascript grid

We can customize the columns footer element by external action using the following methods,

Here we have Changed the grid footer content, color and font-family to “green” and “fantasy” respectively by using the getFooterContent and getFooterTable method and also we have displayed the summary value summary value in the alert message by using getSummaryValues method.

The following code example describes the above behavior.

HTML

<input id="change">
<div id="Grid"></div>

JAVASCRIPT

$("#change").ejButton({
    text: "Update Grid header",
    click: function(args){
         var obj = $("#Grid").ejGrid("instance");
         obj.getFooterContent().find("td.e-summaryrow").css("color","green");
         obj.getFooterTable().css("font-family","fantasy");
         var summaryCol = { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" };// Get the calculated summary values of JSON data passed to it
         var value = obj.getSummaryValues(summaryCol, window.gridData).toFixed(2);
         alert( "summary cell with value "  +value + " has been customized with css"); 
    },
});
$(function () {
    $("#Grid").ejGrid({
                /// the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                allowPaging: true,
                showSummary: true,
                pageSettings: { pageSize: 10 },
                summaryRows: [
                    { title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}" }] },
                             ],
                columns: [
                               { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },
                               { field: "EmployeeID", headerText: "Employee ID", editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 80 },
                               { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" }
                ]
            });
});

The following output is displayed as a result of the above code example.

Column footer customization of summary in Javascript grid

Custom summary

Custom summary can be used to create summary values based on your required custom logic and calculations. To enable custom summary, the summaryType should be custom and the customSummaryValue property need to define as function. In this property value function, you need to use the grid instance to access the model.dataSource and model.currentViewData. After the custom calculation, the returned value will be displayed in corresponding summary cell.

HTML

<div id="Grid"></div>
<script type="text/javascript">
  function currency(args,data) {
      //ej.sum is aggregate to add data of freight from datasource
      return ej.sum(data, "Freight");
  }
  $("#Grid").ejGrid({
      // the datasource "window.gridData" is referred from jsondata.min.js
      dataSource: window.gridData,
      showSummary: true,
      summaryRows: [{
          title: "Currency",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Custom,
              customSummaryValue: currency,
              displayColumn: "Freight",
              format: "{0:C2}"
          }]
      }],
      allowPaging: true,
      columns:
          [
              { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 70 },
              { field: "CustomerID", headerText: "Customer ID", textAlign: ej.TextAlign.Left, width: 70 },
              { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 70 },
              { field: "ShipCity", headerText: "Ship City", textAlign: ej.TextAlign.Left, width: 70 },
              { field: "Freight",  headerText: "Freight",textAlign: ej.TextAlign.Right, width: 70,format: "{0:C2}"}]
  });
</script>

Custom summary in Javascript grid

Summary values with prefix and suffix

Summaries with prefix and suffix can be added using the summaryColumns.prefix and summaryColumn.suffix summaryColumns.suffix.

HTML

<div id="Grid"></div>
<script type="text/javascript">
  $("#Grid").ejGrid({
     // the datasource "window.gridData" is referred from jsondata.min.js
      dataSource: window.gridData,
      showSummary: true,
      summaryRows: [{
          title: "Sum",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Sum,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}",
              prefix: "Summation = ", 
              suffix: " in US"
          }]
      }],
      allowPaging: true,
      columns: [
          { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },
          {field: "EmployeeID",headerText: "Employee ID",editType: ej.Grid.EditingType.NumericEdit,textAlign: ej.TextAlign.Right,width: 80 },
          {field: "ShipCity",headerText: "Ship City",width: 90},
          {field: "ShipCountry",headerText: "Ship Country", width: 100},
          { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" }
      ]
  });
  
</script>

Summary values with prefix and suffix in Javascript grid

Title for summary

Title name of any summary value can be change using the title property of summaryColumns. Title displaying column can be altered by using the titleColumn.

HTML

<div id="Grid"></div>
<script type="text/javascript">
  $("#Grid").ejGrid({
     // the datasource "window.gridData" is referred from jsondata.min.js
      dataSource: window.gridData,
      showSummary: true,
      summaryRows: [{
          title: "Summation",
          titleColumn: "EmployeeID",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Sum,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}"
          }]
      }],
      allowPaging: true,
      columns: [
          { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },
          {field: "EmployeeID",headerText: "Employee ID",editType: ej.Grid.EditingType.NumericEdit,textAlign: ej.TextAlign.Right,width: 80 },
          {field: "ShipCity",headerText: "Ship City",width: 90},
          {field: "ShipCountry",headerText: "Ship Country", width: 100},
          { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" }
      ]
  });
  
</script>

Title for summary in Javascript grid

Group summary

Group summary is used to summarize values of a particular column based on group and it shows at bottom of the each group. To enable the group summary for particular group, you need to define the showTotalSummary as false.

HTML

<div id="Grid"></div>
<script type="text/javascript">
  $("#Grid").ejGrid({
      // the datasource "window.gridData" is referred from jsondata.min.js
      dataSource: window.gridData,
      showSummary: true,
      summaryRows: [{
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Sum,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}",
              prefix: "Sum = "
          }],
          showTotalSummary: false
      }],
      allowPaging: true,
      allowSorting: true,
      allowGrouping: true,
      groupSettings: {
          groupedColumns: ["CustomerID"]
      },
      columns:
          [
              { field: "OrderID", headerText: "Order ID", width: 80, isPrimaryKey: true },
              { field: "CustomerID", headerText: "Customer ID", textAlign: ej.TextAlign.Right, width: 75 },
              { field: "ShipCity", headerText: 'Ship City', width: 150 },
              { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
              { field: "Freight", headerText: "Freight", width: 75, textAlign: ej.TextAlign.Right, format: "{0:C}" }
          ]
  });
</script>

Group summary in Javascript grid

WARNING

Minimum one column should be grouped to show summary details.

Group caption summary

To show summaries in each group’s caption row, the particular summary row should have the showTotalSummary as false and the showCaptionSummary as true.

HTML

<div id="Grid"></div>
<script type="text/javascript">
  $("#Grid").ejGrid({
      dataSource: data,
      showSummary: true,
      summaryRows: [{
          showCaptionSummary: true,
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Average,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}",
              prefix: "Average = "
          }],
          showTotalSummary: false
      }],
      allowPaging: true,
      allowGrouping: true,
      groupSettings: {
          groupedColumns: ["EmployeeID"]
      },
      columns:
          [
              { field: "OrderID", headerText: "Order ID", width: 80, isPrimaryKey: true },
              { field: "CustomerID", headerText: "Customer ID", textAlign: ej.TextAlign.Right, width: 75 },
              { field: "ShipCity", headerText: 'Ship City', width: 150 },
              { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
              { field: "Freight", headerText: "Freight", width: 75, textAlign: ej.TextAlign.Right, format: "{0:C}" }
          ]
  });
</script>

Group caption summary in Javascript grid

WARNING

Minimum one column should be grouped to show the summary details.

Summary template

Using the template property of summaryColumns you can render any type of JsRender templates or customizing the summary value.

The following code example describes the above behavior.

HTML

<div id="Grid"></div>
<script id="templateData" type="text/x-jsrender">
     Freight has Average of {{:summaryValue"}} in  dollars
</script>

JAVASCRIPT

$(function () {
	$("#Grid").ejGrid({
    	 dataSource: ej.DataManager(window.gridData).executeLocal(new ej.Query().take(5)),
         showSummary: true,
         summaryRows: [{ 
             title: "Average",
             summaryColumns: [{ 
                 summaryType: ej.Grid.SummaryType.Average, 
                 displayColumn: "Freight", 
                 dataMember: "Freight",  
                 template: "#templateData",
                 format: "{0:C2}"
             }]
          }],
         columns: [{ field: "OrderID" },{ field: "EmployeeID" },{ field: "Freight", format: "{0:C}" }]
	});
});

The following output is displayed as a result of the above code example.

Summary template in Javascript grid

Format

To format summary values, the format property needs to be assigned in the summaryColumns collection object. To know more about formatting options. Please refer to the globalize.js

HTML

<div id="Grid"></div>
<script type="text/javascript">
  $("#Grid").ejGrid({
      /// the datasource "window.gridData" is referred from jsondata.min.js
      dataSource: window.gridData,
      showSummary: true,
      summaryRows: [{
          title: "Sum",
          summaryColumns: [{
              summaryType: ej.Grid.SummaryType.Sum,
              displayColumn: "Freight",
              dataMember: "Freight",
              format: "{0:C2}"
          }]
      }],
      allowPaging: true,
      columns:
          [
              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },
              { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 80 },
              { field: "ShipCity", headerText: "Ship City", width: 90 },
              { field: "ShipCountry", headerText: "Ship Country", width: 100 },
              { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" }
          ]
  });
</script>

Format summary in Javascript grid

Summary in JavaScript Grid

Supported aggregates

Sum, average, maximum and minimum

True and False count

Column footer customization by external action

Custom summary

Summary values with prefix and suffix

Title for summary

Group summary

Group caption summary

Summary template

Format