jqgrid loading on Button Click - jqgrid

Question

Jqgrid load with data on pageload. When I try to load the grid on a button click grid load with the data but in the next moment the full grid get disappear if I use the grid on a content page with master page and the rows get disappear if I use a page without master page. Is there any solution for this? Thanks
Added a demo
Note: grid is disappearing on every postback
When I removed the update panel from master page , grid is not disappearing but the data on the grid is disappering
jQuery("#jqgItemDetails").jqGrid({
url: '',
datatype: "local",
colNames: ['UPC Code', 'OLD UPC', 'Item Description', 'Old Item Desc', 'Size UOM', 'Old Size UOM', 'Department', 'Category',
'Tax Description', 'WIC/CVV', 'Label', 'Last Movement', 'Last Purchase', 'Item Added', 'Comment', 'Store Number'],
colModel: [
{ name: 'UPC_Code', index: 'UPC_Code', width: 90, stype: 'text' },
{ name: 'UPC_Code_Old', index: 'UPC_Code_Old', width: 90, stype: 'text', hidden: true },
{ name: 'Item_Desc', index: 'Item_Desc', width: 150 },
{ name: 'Item_Desc_Old', index: 'Item_Desc_Old', width: 150, hidden: true },
{ name: 'Size_UOM', index: 'Size_UOM', width: 60 },
{ name: 'Size_UOM_Old', index: 'Size_UOM_Old', width: 60, hidden: true },
{ name: 'Department', index: 'Department', width: 100 },
{ name: 'Category', index: 'Category', width: 80 },
{ name: 'Tax_Desc', index: 'Tax_Desc', width: 150 },
{ name: 'WIC_CVV', index: 'WIC_CVV', width: 80 },
{ name: 'Label', index: 'Label', width: 150 },
{ name: 'Last_Movement', index: 'Last_Movement', width: 100 },
{ name: 'Last_Purchase', index: 'Last_Purchase', width: 100 },
{ name: 'Item_Added', index: 'Item_Added', width: 100 },
{ name: 'Comment', index: 'Comment', width: 100, editable: true },
{ name: 'Store_Number', index: 'Store_Number', width: 100, hidden: true }
],
multiselect: true,
rowNum: 10,
sortname: 'UPC_Code',
viewrecords: true,
sortorder: "desc",
pager: '#pager2',
width: 1100,
cellEdit: true,
cellsubmit: 'clientArray',
editurl: '',
height: 60,
onSelectRow: editRow,
shrinkToFit: false,
afterSaveCell: function (rowid, name, val, iRow, iCol) {
var grid = $("#jqgItemDetails");
if (name == 'Comment') {
grid.jqGrid('setCell', rowid, 'Comment', val);
}
},
caption: '<span style="height:20px;color:#cc961a">UPC Item Details</span>'
});
var lastSelection;
function editRow(id) {
if (id && id !== lastSelection) {
var grid = $("#jqgItemDetails");
grid.jqGrid('restoreRow', lastSelection);
grid.jqGrid('editRow', id, { keys: true });
lastSelection = id;
}
}
function btnUPCShow_OnClientClick() {
fillUPCDetailsGrid();
}
function fillUPCDetailsGrid() {
var UPCCol = new Array();
var UPCData = "", UPCLike = "", RangeFrom = "", RangeTo = "", FilterVal;
FilterVal = document.getElementById('ddlFilter').value;
if (FilterVal == 1) {
UPCData = document.getElementById('txtUPC').value; // '77098103440,77098103450,77098103470,77098104423'; // document.getElementById('txtUPC').value;
UPCCol = UPCData.split(',');
}
else if (FilterVal == 2) {
UPCLike = document.getElementById('txtUPC').value;
}
else if (FilterVal == 3) {
RangeFrom = document.getElementById('txtUPC').value;
RangeTo = document.getElementById('txtRangeTo').value;
}
$.ajax({
type: "POST",
url: 'ItemInquiries.aspx/GetUPCDetails',
data: JSON.stringify({ UPCCollection: UPCCol, UPCLike: UPCLike, UPCRangeFrom: RangeFrom, UPCRangeTo: RangeTo, Filter: FilterVal }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (Result) {
var myjsongrid = $.parseJSON(Result.d);
for (var i = 0; i < myjsongrid.Table.length; i++) {
jQuery('#jqgItemDetails').jqGrid('addRowData', i + 1, myjsongrid.Table[i]);
}
}
});
}