jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

How to change the position of the controls in the NavBar for JQGrid?

Tags: Custom NavBar

12/11/2010
22:37

doriansao

Cochabamba, Bolivia

Member

Members

Forum Posts: 3

Member Since:
12/11/2010

Offline

[Image Can Not Be Found][Image Can Not Be Found][Image Can Not Be Found][Image Can Not Be Found]Hi everyone,

I read a lot of posts and the JQGrid documentation but I only found how tho hidde buttons or ad new ones on the NavBar. I know already how to change the icons also. My is problem is that I need to change the position of the Next/Prev icons and the DropDown Selector to achieve something like this (see the image):

Please anyone help me with this.

13/11/2010
01:52

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello

all possible changing of position of the pager elements are documented here. If you want you can move the elements of pager manually with respect of appendTo function.

To tell the truth I not really understand the requirement: "I want to have it on the left and not on the right side". In my personal opinion it is in the most cases unnatural problem and I am not sure that one should spent his time in doing this.

Best regards
Oleg

13/11/2010
19:23

doriansao

Cochabamba, Bolivia

Member

Members

Forum Posts: 3

Member Since:
12/11/2010

Offline

Thanks for the answer,

Sorry but I'm not sure if you could see the image that I put like example. I read that documentation like hundred times and I couldn't find how to move each button of the navigator. The properties only allow to align all navigator or record text to: right, center and left positions but with the same format. Please correct me if I'm wrong.

Thanks,

Dorian

13/11/2010
22:05

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello Dorian,

I do seen the picture which you posed. I wrote only where you can find all documented changes of position of the pager elements. All other movements you can do with respect of appendTo function. I suppose you not familiar with the function and its documentation was not good enough. So I created for you a small demo which produce the following pager

It show how with one line of code

$("#pager select.ui-pg-selbox").appendTo("#pager_left");

you can move the page selector to the left part of the pager. To be more independent from the pager id name the same line can be rewritten as

var pagerNode = $("#pager")[0];
$("select.ui-pg-selbox",pagerNode).appendTo("#"+pagerNode.id+"_left");

Best regards

Oleg

15/11/2010
05:18

doriansao

Cochabamba, Bolivia

Member

Members

Forum Posts: 3

Member Since:
12/11/2010

Offline

Oleg,

Thank you very much for your example, this is exactly what I need :). I'm familiar with the function but I wasn't familiar with the Jqgrid CSS's class names.

Best regards,

Dorian

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
41 Guest(s)

Currently Browsing this Page:
1 Guest(s)