jQuery Grid Plugin - jqGrid - Topic: Messed up Nav button on jgrid with ui-tabs

lupin on Messed up Nav button on jgrid with ui-tabs

Sat, 22 Jan 2011 04:27:55 +0200

Thank you Oleg, this solved the issue.

OlegK on Messed up Nav button on jgrid with ui-tabs

Sat, 22 Jan 2011 01:03:21 +0200

Hi,

look one more time in your HTML code

HTML not permit to use the same id more then once on one page. So your current HTML code ir wrong. If you copy a code you have to make some minimal modifications in the copy. At least you have to rename two from three ids used as the pager.

Regards
Oleg

lupin on Messed up Nav button on jgrid with ui-tabs

Fri, 21 Jan 2011 22:49:42 +0200

Hi Tony,

Yes, it does have some pager id since I just copied the grid definition as follow, pasted only the relevant portion:

rowNum:100,

rowList:[100,200],

rownumbers:true,

pager: '#pager2',

sortname: 'product_id',

viewrecords: true,

sortorder: "asc",

width: 950,

height: "100%",

// toolbar: [true,"top"],

userDataOnFooter: true,

footerrow: 'true',

gridview:true,

//userData: "userdata",

caption:"" });

jQuery("#dailygrid").jqGrid('navGrid','#pager2',

{add:false,addtext:'Add',del:false,deltext:'Delete',edit:false,edittext: 'Edit',search:false,refresh:false},

editOptions, // Edit Button handler

addOptions, // Add Button handler

delOptions, // Delete Button handler

{}).jqGrid('navButtonAdd',"#pager2",{caption:"Receipt",title:"Create Receipt",onClickButton:function () {

var postData = $("#dailygrid").jqGrid('getGridParam','postData');

var str='';

for(i in postData)

str+=i+"="+postData[i]+"&";

window.location.href=( "/order/list?export=receipt&"+ str + new Date().getTime());

}});

//Tabs

$("#menu").tabs({remote:true});

});

rowNum:100,

rowList:[100,200],

rownumbers:true,

pager: '#pager2',

sortname: 'product_id',

viewrecords: true,

sortorder: "asc",

width: 950,

height: "100%",

// toolbar: [true,"top"],

userDataOnFooter: true,

footerrow: 'true',

gridview:true,

//userData: "userdata",

caption:"" });

jQuery("#monthlygrid").jqGrid('navGrid','#pager2',

{add:false,addtext:'Add',del:false,deltext:'Delete',edit:false,edittext: 'Edit',search:false,refresh:false},

editOptions, // Edit Button handler

addOptions, // Add Button handler

delOptions, // Delete Button handler

{}).jqGrid('navButtonAdd',"#pager2",{caption:"Receipt",title:"Create Receipt",onClickButton:function () {

var postData = $("#monthlygrid").jqGrid('getGridParam','postData');

var str='';

for(i in postData)

str+=i+"="+postData[i]+"&";

window.location.href=( "/order/list?export=receipt&"+ str + new Date().getTime());

}});

//Tabs

$("#menu").tabs({remote:true});

});

here's, the generated html based on firebug, as you can see it created 2 pager2 div under the #dailygrid.

tony on Messed up Nav button on jgrid with ui-tabs

Fri, 21 Jan 2011 18:05:07 +0200

HEllo,

Please check if the both grids have the same pager id.

Regards

Tony

lupin on Messed up Nav button on jgrid with ui-tabs

Fri, 21 Jan 2011 15:25:35 +0200

Howdy,

Somebody have any idea why the nav button is messed up in this jgrid on ui-tabs, for some reason the supposedly Receipt button on nav grid should display on each grid on each tab but as you can see on the image the nav button(Receipt) is located on "Daily Sales" tab grid twice, and it's not showing on "Monthly Sales" grid/tab.

Here the html:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>

<head>

<title>[% template.title %]</title>

</script>

</script>

</script>

</script>

</head>

<body>

<ul>

<li><a href="#monthly">Monthly Sales</a></li>

<li><a href="#weekly">Weekly Sales</a></li>

<li><a href="#daily">Daily Sales</a></li>

</ul>

</table>

</div>

</table>

</div>

</table>

</div>

</body>

</html>

And the relevant portion of the grid:

jQuery("#monthlygrid").jqGrid({

url:'/report/list',

datatype: "json",

colNames:['Product Code','Description','Discount %',

'Qty','Customer','Purchase Date','Consign Date',

'Due Date','In Cash','Consignment',],

pager: '#pager2',

sortname: 'product_id',

viewrecords: true,

sortorder: "asc",

width: 950,

height: "100%",

userDataOnFooter: true,

footerrow: 'true',

gridview:true,

caption:"" });

jQuery("#monthlygrid").jqGrid('navGrid','#pager2',

{add:false,addtext:'Add',del:false,deltext:'Delete',edit:false,edittext: 'Edit',search:false,refresh:false},

editOptions, // Edit Button handler

addOptions, // Add Button handler

delOptions, // Delete Button handler

{}).jqGrid('navButtonAdd',"#pager2",{caption:"Receipt",title:"Create Receipt",onClickButton:function () {

var postData = $("#monthlygrid").jqGrid('getGridParam','postData');

var str='';

for(i in postData)

str+=i+"="+postData[i]+"&";

window.location.href=( "/order/list?export=receipt&"+ str + new Date().getTime());

}});

//Tabs

$("#menu").tabs({remote:true});

});

Thanks in advance,

lupin