jQuery Grid Plugin - jqGrid - Topic: Dynamically loading/initiating jqGrid http://www.trirand.com/blog/?page_id=393/help/dynamically-loadinginitiating-jqgrid Simple:Press Version 5.7.5.3 dimaash on Dynamically loading/initiating jqGrid http://www.trirand.com/blog/?page_id=393/help/dynamically-loadinginitiating-jqgrid#p20008 Help http://www.trirand.com/blog/?page_id=393/help/dynamically-loadinginitiating-jqgrid#p20008 Hi guys,

I have the following situation: I have a main grid which i populate from database and everything works just fine. On the same page

( document ) i have a toolbar of buttons whose clicks i have wired to creating a separate jqGrids. Basically each button represents a table in the database. When user clicks on a button, a currently displayed grid gets hidden using a wrapped div ( $(#"grid_wrapper1").hide() ) then i create a new grid for the table which user has clicked on. Everything works, the grid is displayed correctly. The only problem is the pager. The 1st time user clicks on a button the pager navigation ( buttons and display message saying which page it is ) are placed correctly. Then, if user click again on the same table button, the pager slides/shifts down a little. Then again and again until it is simply out of view. Basically it goes completely down to the pager toolbar and i can't see it.

What am i doing wrong here? Do i have to GridUnload or GridDestroy each grid before creating it? Or is there a way of somehow clearing the pager contents and reloading it? Please help. Here is the code that i have:

function getCustomers() {

$("#grid_wrapper2").hide();

$("#grid_wrapper1").show();

}

function getContracts() {

$("#grid_wrapper1").hide();

$("#contracts_grid").jqGrid({

  datatype: function (pdata) { getContractsAJAXCALL(pdata);},

  colNames: ['contract_num', 'StartDate', 'EndDate'],

colModel: [

{ name: 'BPCS', index: 'BPCS', width: 80, align: 'left', editable: false, search: true, searchoptions: { sopt: ['eq']} },

  { name: 'StartDate', index: 'StartDate', width: 60, align: 'left', editable: false},

  { name: 'EndDate', index: 'EndDate', width: 60, align: 'left', editable: false},

    ],

  rowNum: 5,

rowList: [10, 20, 30],

  mtype: "POST",

imgpath: 'css/redmond/images',

pager: jQuery('#contracts_grid_pager'),

sortname: 'BPCS',

viewrecords: true,

sortorder: "asc",

caption: "Contracts",

  cellEdit: false,

  width: 500,

  onSelectRow: function (id) {},

onPaging: function(pgButton){},

  gridComplete: function () {}

  }).navGrid('#contracts_grid_pager', { del: false, add: false, edit: true },

{}, //  default settings for edit

{}, //  default settings for add

{},  // delete

{closeOnEscape: true, multipleSearch: false, closeAfterSearch: true }, // search

{});

$("#grid_wrapper2").show();

});

}

$(document).ready(function () {

  /* Wiring button clicks to get tables from DB */

$("#btn1").click(function(){getCustomers();});

$("#btn2").click(function(){getContracts();});

jQuery("#main_grid").jqGrid({

datatype: function (pdata) {getData(pdata);},

colNames: ['CustomerID', 'CustomerName', 'TerritoryID'],

  colModel: [

{ name: 'CustomerID', index: 'CustomerID', width: 80, align: 'left', editable: true, search: true, searchoptions:{ sopt: ['eq']} },

                        { name: 'CustomerName', index: 'CustomerName', width: 80, align: 'left', editable: true, edittype: "text",editoptions: { size:20,maxLength:20} },

                        { name: 'TerritoryID', index: 'TerritoryID', width: 60, align: 'left', editable: true, edittype: "select", editoptions:{ value: "9:98; 8:97; 7:96"} },

                          ],

rowNum: 5,

rowList: [10, 20, 30],

imgpath: 'css/redmond/images',

pager: jQuery('#main_grid_pager'),

sortname: 'CustomerID',

viewrecords: true,

multiselect: true,

multiboxonly: true,

sortorder: "asc",

caption: "Customers",

cellEdit: false,

editurl: "WebService1.asmx/UpdateCustomer",

width: 500,

onSelectRow: function (id) {},

onPaging: function(pgButton){},

gridComplete: function () {}

}).navGrid('#main_grid_pager', { del: true, add: false, edit: true },

{closeOnEscape: true, drag: false}, //  default settings for edit

{}, //  default settings for add

{mtype: "POST",reloadAfterSubmit:true,url: "WebService1.asmx/DeleteSelectedCustomers",

serializeDelData: function(postdata){ /*code for serliazing json data */ }

},

{closeOnEscape: true, multipleSearch: false, closeAfterSearch: true, drag: false},

{} /* view parameters*/);

});

});

HTML of the document containg main_grid:

 <div id="grid_wrapper1" class="ui-corner-all floatLeft">
<table id="main_grid" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="main_grid_pager" class="scroll" style="text-align: center;"></div>
  </div>

 <div id="grid_wrapper2" class="ui-corner-all floatLeft">

<table id="contracts_grid" class="scroll" cellpadding="0" cellspacing="0"></table>

<div id="contracts_grid_pager" class="scroll" style="text-align: center;"></div>

 </div>

]]> Sun, 26 Sep 2010 17:46:24 +0300