jQuery Grid Plugin - jqGridForum

Topic RSS

Dynamically loading/initiating jqGrid

26/09/2010
17:46

dimaash

Montreal

New Member

Members

Forum Posts: 1

Member Since:
25/09/2010

Offline

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>