How to show a summary row in JQGrid?

 To show a summary row in JQGrid, you can use the footerrow and userDataOnFooter options. Here are the steps:

1. Set the footerrow option to true in your JQGrid configuration. This will create an empty row at the bottom of the grid that will be used for the summary.

2. Set the userDataOnFooter option to true. This will cause the summary data to be displayed in the summary row.

3. Calculate the summary data and set it in the userData property of the grid. The userData property should be an object with properties that correspond to the names of the columns in the grid. The values of these properties should be the summary data for each column.

4. To display the summary data in the summary row, you can use a custom formatter for the footerData option. This formatter should return an object with properties that correspond to the names of the columns in the grid. The values of these properties should be the HTML content that you want to display in the summary row for each column.

Here is an example configuration for a JQGrid that shows a summary row with the total value of all rows in the "value" column:

javascript
$('#myGrid').jqGrid({
  url: 'mydata.json',
  datatype: 'json',
  colModel: [
    { name: 'id', index: 'id', width: 50 },
    { name: 'name', index: 'name', width: 200 },
    { name: 'value', index: 'value', width: 100 },
  ],
  footerrow: true,
  userDataOnFooter: true,
  loadComplete: function(data) {
    var sum = 0;
    for (var i = 0; i < data.rows.length; i++) {
      sum += parseFloat(data.rows[i].value);
    }
    $('#myGrid').jqGrid('footerData', 'set', {value: sum.toFixed(2)});
  },
  footerData: {
    name: 'Total',
    value: function (columnIndex, columnName, columnData) {
      if (columnName === 'value') {
        return '<b>' + columnData + '</b>';
      }
      return '';
    }
  }
});

In this example, the loadComplete function calculates the total value of all rows in the "value" column and sets it in the userData property of the grid using the footerData method. The footerData option specifies a custom formatter function that formats the value of the "value" column in bold text. When the grid is loaded, the summary row will display the text "Total" in the "name" column and the total value of the "value" column in bold text.