I'm trying to show order particulars of a order in view model. Cliking on the order and view pager button passing the orderID. Using that orderID, I'm searching within another local json array. 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.
(From the above image, I color bordered row is newly created row. Other rows are by default created by jqGrid.)
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,
(different row's table column value append in a single row repeatedly)
In this I navigate records 8 times through next (#nData) and previous (#pData) buttons. While doing this, leftside <td> of my custome row's text "Order Particulars" and the next auto generated row's (Total) right side <td>'s text repated 8 times. My each click on next or previous, it appends new row after my custom row.
Here is my code,
var myData2 = <?php echo json_encode($oParticularResult) ?>;
//Here I'm adding custom row
var showIdRow = function ($form) {
var $this = $(this),
rowid = $this.jqGrid("getGridParam", "selrow");
var addHTML = '<tr class="FormData" id="trv_particulars"><td class="CaptionTD form-view-label ui-widget-content"
width="30%"><b>Order Particulars</b></td>';
addHTML += '<td class="DataTD form-view-data ui-helper-reset ui-widget-content" id="v_tot"><span>';
addHTML += "<table border='2px'><thead><tr><td>Sl.No.</td><td>Particulars
Name</td><td>Quantity</td><td>Amount</td></tr></thead><tbody>";
var count = 1;
for (i in myData2)
{
if(myData2[i].orderID == rowid)
{
addHTML += "<tr><td>"+count+"</td><td>"+myData2[i].proName+"</td><td>"+myData2[i].proQuantity+"</td><td>"+myData2
[i].proPrice+"</td></tr>";
count++;
}
}
$(addHTML).insertAfter('#trv_order_dt');
};
$(function () {
var myData = <?php echo json_encode($orderResult) ?>;
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:'<?php echo $this->action('editStatus'); ?>',
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
);
});
Any one could point out where I missed ?
And I want to configure subgrid, using my local data myData2 like the above condition. If orderID of myData(local json array for master grid) and myData2 (local json array for subgrid) are same, show those myData2 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.
SOLUTION :
I fixed my issue. This view model refresh each time when we clicking on next or previous button in this model. Because, I used recreateform:true and I'm calling the showIdRow on afterclickPgButtons and beforeShowForm.
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 myData (data source of this grid). So, when I navigate through the next or previous button, recreateform is working for other rows and afterclickPgButtons' and 'beforeShowForm are calling showIdRow and appending new row below to already created row.
So, I decided to remove previously created a new row, while appending a new row. I already assigned my custom row id as trv_particulars. So, I used my code like this,
.
.
$('#tvr_Particulars').remove(); // remove previously created custome row using row ID
$('#trv_order_dt').after(addHTML);
.
.
Now its working fine in my scenario. But alternative and optimal solution is provided by @Oleg in the below answer. Thanks to @Oleg for taking your time to create another possible solution for my issue.
#trv_particularsinstead of hiding to have no id duplicates. I mean that you could use$('#tvr_Particulars').remove();instead of$('#tvr_Particulars').hide();– Hagioscope