title: Adding Custom rows in View model in jqGrid
body: <p>I'm trying to show order particulars of a order in view model. Cliking on the order and <code>view</code> pager button passing the <code>orderID</code>. Using that <code>orderID</code>, I'm searching within another <code>local json array</code>. And I'm making a table contains search result array values and I'm adding it as new row in between rows that are already using in view model like the below image.</p>
  
  <p><img src="https://i.stack.imgur.com/Wtjqa.jpg" alt="View Model page with custom row"></p>
  
  <p><em>(From the above image, I color bordered row is newly created row. Other rows are by default created by jqGrid.)</em></p>
  
  <p>I created successfully as other rows. But It giving some trouble while clicking on the view next or previous record button in view model. See this below image,</p>
  
  <p><img src="https://i.stack.imgur.com/Ny92p.jpg" alt="View Model with custome Row and repeated data"></p>
  
  <p><em>(different row's table column value append in a single row repeatedly)</em> </p>
  
  <p>In this I navigate records <code>8</code> times through next (<code>#nData</code>) and previous (<code>#pData</code>) buttons. While doing this, leftside <code>&lt;td&gt;</code> of my custome row's text "Order Particulars" and the next auto generated <code>row's</code> (Total) right side <code>&lt;td&gt;</code>'s text repated <code>8</code> times. My each click on next or previous, it appends new row after my custom row.</p>
  
  <p>Here is my code,</p>
  
  <pre><code>  var myData2 = &lt;?php echo json_encode($oParticularResult) ?&gt;;
    //Here I'm adding custom row
    var showIdRow = function ($form) {
    var $this = $(this),
    rowid = $this.jqGrid("getGridParam", "selrow");
    var addHTML = '&lt;tr class="FormData" id="trv_particulars"&gt;&lt;td class="CaptionTD form-view-label ui-widget-content" 
  
  width="30%"&gt;&lt;b&gt;Order Particulars&lt;/b&gt;&lt;/td&gt;';
    addHTML += '&lt;td class="DataTD form-view-data ui-helper-reset ui-widget-content" id="v_tot"&gt;&lt;span&gt;';
      addHTML += "&lt;table border='2px'&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;Sl.No.&lt;/td&gt;&lt;td&gt;Particulars 
  
  Name&lt;/td&gt;&lt;td&gt;Quantity&lt;/td&gt;&lt;td&gt;Amount&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;";
      var count = 1;
    for (i in myData2)
    {
    if(myData2[i].orderID == rowid)
    {
       addHTML += "&lt;tr&gt;&lt;td&gt;"+count+"&lt;/td&gt;&lt;td&gt;"+myData2[i].proName+"&lt;/td&gt;&lt;td&gt;"+myData2[i].proQuantity+"&lt;/td&gt;&lt;td&gt;"+myData2
  
  [i].proPrice+"&lt;/td&gt;&lt;/tr&gt;";
       count++;
    }
      }
      $(addHTML).insertAfter('#trv_order_dt');
      };
      $(function () {
      var myData = &lt;?php echo json_encode($orderResult) ?&gt;;
    var getCellVal;
    var sel_id;
    $("#orderGrid").jqGrid({
    caption:'Order List',
    datatype:'local',
    data:myData,
    mtype:'POST',
    width:777,
    rowNum:10,
    height:100,
    sortorder:'asc',
    rowList:[10,20,30],
    rownumbers:true,
    viewrecords:true,
    gridview:false,
    autoencode:true,
    loadonce:true,
    pager:'#orderPager',
    sortname:'orderID',
  
    editurl:'&lt;?php echo $this-&gt;action('editStatus'); ?&gt;',
    colNames:['Order Number','Customer Name','Date', 'Total', 'Paid','Balance'],
    //cmTemplate:{editable:true, editrules: {required:true}},
    colModel:[
    { name:'orderID', key:true, width:30 },
    { name: 'custName', index: 'custName', width:60 },
    { name: 'order_dt', index: 'order_dt', width:60 },
    { name: 'tot', index: 'tot', width:60 },
    { name: 'amount', index: 'amount', width:60 },
    { name: 'bal', index: 'bal', width:60 }],
    }).navGrid("#orderPager",
    {add:false, edit:false, view:true, del:false, search:true, refresh:true },
    {},//edit
    {jqModal: true, viewPagerButtons: true, checkOnUpdate:true, savekey: [true,13], navkeys: [false,38,40], checkOnSubmit : 
  
  true, reloadAfterSubmit:false, closeOnEscape:true, closeAfterEdit: true,width:600, height:300}, //add
    {jqModal: true, reloadAfterSubmit:true, closeOnEscape: true,width:600, height:300}, //del
    {jqModal: true, closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, multipleGroup:false, showQuery: true, 
  
  overlay: true, recreateFilter: true,width:600, height:300 }, //search
    {jqModal: true, closeOnEscape: true, width:500,
    recreateForm: true,
    afterclickPgButtons: showIdRow,
    beforeShowForm: showIdRow
    } //view
    );
    });
  </code></pre>
  
  <p>Any one could point out where I missed ?</p>
  
  <p>And I want to configure <code>subgrid</code>, using my <code>local data</code> <code>myData2</code> like the above condition. If orderID of <code>myData</code>(local json array for master grid) and <code>myData2</code> (local json array for subgrid) are same, show those <code>myData2</code> records below to parent grid row. I think all grids are it is subgrid concept already configured like the same. But I could not find any correct document or example for this. Please provide any links to configure subgrid as per the above.</p>
  
  <p><strong>SOLUTION :</strong></p>
  
  <p>I fixed my issue. This view model refresh each time when we clicking on next or previous button in this model. Because, I used <code>recreateform:true</code> and I'm calling the <code>showIdRow</code> on <code>afterclickPgButtons</code> and <code>beforeShowForm</code>.</p>
  
  <p>I think it will not consider the my manually added row as one of the form value. Because when the form creation, the contents are loading from <code>myData</code> (data source of this grid). So, when I navigate through the next or previous button, <code>recreateform</code> is working for other rows and <code>afterclickPgButtons' and 'beforeShowForm</code> are calling <code>showIdRow</code> and appending new row below to already created row.</p>
  
  <p>So, I decided to remove previously created a new row, while appending a new row. I already assigned my custom row id as <code>trv_particulars</code>. So, I used my code like this,</p>
  
  <pre><code>.
  .
  $('#tvr_Particulars').remove();  // remove previously created custome row using row ID
  $('#trv_order_dt').after(addHTML);
  .
  .
  </code></pre>
  
  <p>Now its working fine in my scenario. But alternative and optimal solution is provided by @Oleg in the below <a href="https://stackoverflow.com/a/23042641/2567813">answer</a>. Thanks to @Oleg for taking your time to create another possible solution for my issue.</p>