title: How to group columns in a pivot?
body: <p>I have written the following code to create a <code>pivot grid</code> to display sales information about cars. It should generate a grid structure that is similar to the grid on the image </p>
  
  <p><a href="https://i.stack.imgur.com/Xb4l2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xb4l2.png" alt="enter image description here"></a></p>
  
  <pre class="lang-js prettyprint-override"><code>var data = [{
          "id": 1,
          "make": "toyota",
          "model": "corolla",
          "fuelusagecity": "17",
          "fuelusagehwy": "12",
          "fuelmeasure":'Litre',
          "salesaboveavg": false,
          "totalnumberofsales": 120000.0000,
          "highsalestext": null,
          "salesdate": "2010-12-01"
      }, {
          "id": 2,
          "make": "toyota",
          "model": "corolla",
          "fuelusagecity": "10",
          "fuelusagehwy": "14",
          "salesaboveavg": false,
          "fuelmeasure":'Litre',
          "totalnumberofsales": 100000.0000,
          "highsalestext": "HIGH",
          "salesdate": "2010-12-15"
      }, {
          "id": 3,
          "make": "toyota",
          "model": "belta",
          "fuelusagecity": "15",
          "fuelusagehwy": "10",
          "salesaboveavg": true,
          "fuelmeasure":'Litre',
          "totalnumberofsales": 200000.0000,
          "highsalestext": null,
          "salesdate": "2011-01-10"
      }, {
          "id": 4,
          "make": "toyota",
          "model": "camry",
          "fuelusagecity": "13",
          "fuelusagehwy": "10",
          "fuelmeasure":'Litre',
          "salesaboveavg": false,
          "totalnumberofsales": 300000.0000,
          "highsalestext": "HIGH",
          "salesdate": "2011-04-23"
      }, {
          "id": 5,
          "make": "nissan",
          "model": "skyline",
          "fuelusagecity": "14",
          "fuelusagehwy": "9",
          "fuelmeasure":'Litre',
          "salesaboveavg": true,
          "totalnumberofsales": 500000.0000,
          "highsalestext": "HIGH",
          "salesdate": "2010-09-10"
      }, {
          "id": 6,
          "make": "nissan",
          "model": "zx300",
          "fuelusagecity": "10",
          "fuelusagehwy": "8",
          "fuelmeasure":'Litre',
          "salesaboveavg": false,
          "totalnumberofsales": 400000.0000,
          "highsalestext": null,
          "salesdate": "2012-01-06"
      }];
  
      /* convert the salesdate in  */
      var i, item, dateParts;
      for (i = 0; i &lt; data.length; i++) {
          item = data[i];
          if (typeof item.salesdate === "string") {
              dateParts = item.salesdate.split("-");
              item.salesYear = dateParts[0];
              item.salesMonth = dateParts[1];
              item.salesDay = dateParts[2];
              item.salesDateFormatted = dateParts[0];
          }
      }
  
      var myIntTemplate = {
          formatter: "currency",
          align: "right", sorttype: "number",
          searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] },
          formatoptions: { defaultValue: ""}};
  
      $("#list483").jqGrid("jqPivot",
              data,
              {
                  frozenStaticCols: true,
                  skipSortByX: true,
                  useColSpanStyle: true,
                  //defaultFormatting: false,
                  xDimension: [
                      { dataName: "make", width: 100, label: "Make" },
                      { dataName: "model", width: 100, label: "Model", align: "center", skipGrouping:true },
                      { dataName: "fuelmeasure", width: 103, label: "Units" },
                      ],
                  yDimension: [
                      { dataName: "salesdate", sortorder: "desc"}//,
                      //{ dataName: "salesYear", sorttype: "integer" },
                      //{ dataName: "salesMonth", sorttype: "integer" }
                  ],
                  aggregates: [{
                      member: "totalnumberofsales",
                      template: myIntTemplate,
                      formatter:function(cellvalue, options, rowObject){
                         if(cellvalue=== undefined){
                             return '';
                         }
                          else{
  
                             var x = options.rowData.pivotInfos[options.colModel.name].rows[0].highsalestext;
  
                             if(x==="HIGH")
                             {
                                 return x;
                             }
                             else
                             {
                                 return cellvalue;
                             }
  
  
                         }
                      },
                      cellattr: function (rowId, cellValue, rawObject, cm, rdata) {
                          if (rawObject != null) {
                              var items = rawObject.pivotInfos[cm.name];
                              if (items != null &amp;&amp; items.rows != null &amp;&amp; items.rows.length &gt; 0) {
                                  var isHigh = true, i;
                                  for (i = 0; i &lt; items.rows.length; i++) {
                                      if (items.rows[i].highsalestext !== "HIGH") {
                                          isHigh = false;
                                          break;
                                      }
                                  }
                                  if (isHigh) {
                                      return "class='high-marker'";
                                  }
                              }
                          }
                      },
                      aggregator: "max"
                  }/*,
                   {
                   member: "totalnumberofsales",
                   aggregator: "count",
                   //template: "integer",
                   label: "{0}"
                   }*/]
              },
              // grid options
              {
                  iconSet: "fontAwesome",
                  cmTemplate: { autoResizable: true, width: 75 },
                  shrinkToFit: false,
                  useUnformattedDataForCellAttr: false,
                  autoResizing: { compact: true },
                  groupingView: {
                      groupField: ["x0"],
                      groupColumnShow: [false],
                      groupText: ["&lt;span class='group-text'&gt;{0}&lt;/span&gt;"]
                  },
                  //width: 450,
                  pager: true,
                  rowNum: 20,
                  //caption: "&lt;b&gt;Car sales statistics&lt;/b&gt;",
                  rowList: [5, 10, 20, 100, "10000:All"]
              }
      );
  
      jQuery("#list483").jqGrid('setGroupHeaders', {
    useColSpanStyle: true, 
    groupHeaders:[
      {startColumnName: 'make', numberOfColumns: 3, titleText: '&lt;div style="display:inline-block"&gt;Min: &lt;input type="text" id="minDate"  /&gt; Max: &lt;input type="text" id="miaxDate"  /&gt;&lt;/div&gt;'}
      //{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
    ] 
  });
  </code></pre>
  
  <p>Complete code for this can be found in this <a href="https://jsfiddle.net/ocztddsd/3/" rel="nofollow noreferrer">Fiddle code</a>. But when i apply the code to group the column headers with the following code lines:</p>
  
  <pre class="lang-js prettyprint-override"><code>jQuery("#list483").jqGrid('setGroupHeaders', {
    useColSpanStyle: true, 
    groupHeaders:[
      {startColumnName: 'make', numberOfColumns: 3, titleText: '&lt;div style="display:inline-block"&gt;Min: &lt;input type="text" id="minDate"  /&gt; Max: &lt;input type="text" id="miaxDate"  /&gt;&lt;/div&gt;'}
      //{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
    ] 
  });
  </code></pre>
  
  <p>it does not group columns as expected. why is that and how do i fix this?</p>
  
  <p>wish you all a happy new year!</p>