title: How to merge rows with same value
body: <pre><code>function drawTable(url){
  
      $('#reportList').jqGrid({
          url: url,
          mtype: 'GET',
          datatype: 'json',
          shrinkToFit:false,
          width:null,
          colNames:['num', 'in_charge', 'section1','section2','product','product_description','status','rate','start_date','end_date','proceed_detail'],
          colModel:[
              {name:'num', index:'num', hidden:true},
              {name:'in_charge', index:'in_charge', hidden:true},
              {name:'section1', index:'section1',  width:70},
              {name:'section2', index:'section2', width:140},
              {name:'product', index:'product', width:80},
              {name:'product_description', index:'product_description', width:300},
              {name:'status', index:'status', width:45},
              {name:'rate', index:'rate', width:50},
              {name:'start_date', width:80, index:'start_date'},
              {name:'completion_date', width:80, index:'completion_date'},
              {name:'proceed_detail', index:'proceed_detail', width:400}
         ],
  
          pager: '#pager',
          multiselect: true,
          rownumbers: true,
          shrinkToFit:false,
          loadonce: true,
      });
  }
  </code></pre>
  
  <p>I retrieve data from server and display it in <code>jqGrid</code>.  </p>
  
  <p>First and Second components in <code>colModel</code> are hidden components. So, 'section1' is the first column components to be displayed in <code>jqGrid</code>.  </p>
  
  <p>Multiple rows may have same <code>section1</code> and <code>section2</code>. </p>
  
  <p>So, What I want to do is to merge rows that have same section1 and section2. Basic tag provides <code>rowspan</code> to merge rows. </p>
  
  <p>However, <code>jqGrid</code> never provides that function by default. I've searched stackoverflow for a long time to find the solution, but was unable to do so.</p>