jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Related Topics sp_TopicIcon

Messed up Nav button on jgrid with ui-tabs

Tags: ui tabs grid on tab nav

21/01/2011
15:25

lupin

Member

Members

Forum Posts: 28

Member Since:
12/02/2010

Offline

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

21/01/2011
18:05

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

HEllo,

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

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

21/01/2011
22:49

lupin

Member

Members

Forum Posts: 28

Member Since:
12/02/2010

Offline

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.

22/01/2011
01:03

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

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

22/01/2011
04:27

lupin

Member

Members

Forum Posts: 28

Member Since:
12/02/2010

Offline

Thank you Oleg, this solved the issue.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
34 Guest(s)

Currently Browsing this Page:
1 Guest(s)