Adding jqGrid Custom Navigation to Top Toolbar

Question

Is it possible to add navigation items to the "top pager" in a jqGrid? And if so, what's the syntax for doing so?

I have an HTML snippet on my page that looks like this

<table id="mygrid">
</table>
<div id="mygrid_pager"></div>

And then an jqGrid initialization that looks something like this

$('#mygrid').jqGrid({
    ..., //full config string removed for brevity,
    pager:jQuery('#mygrid'),
    toppager:true
}); 
$('#mygrid').jqGrid('navGrid', '#mygrid_pager'),{
    'add':false,
    'del':false,
    'edit':false,
    'search':false,
    'refresh':false,
    'cloneToTop':true,  
}).navButtonAdd('',{...}); //config navbutton string for button removed for brevity

A "top pager" with the id of #mygrid_toppager is automatically inserted into the page, but its custom buttons (which appear on the bottom pager) don't come along for the ride.

I see that there's a "cloneToTop" option included for the navGrid, but its description seems confusing, and I can only assume I'm using it wrong.

Clones all the actions from the bottom pager to the top pager if defined. Note that the navGrid can be applied to the top pager only. The id of the top pager is a combination of grid id and "_toppager"

My understanding of the option is it will take buttons added to the bottom pager, and clone them to the top. However, the description then goes on to say "the navGrid can be applied to the top pager only, which doesn't make any sense since you're cloning it. The pont being, I clearly have a deep misunderstanding of how the API is supposed to be used.

If anyone can point me in the right direction (even just to a working example somewhere) I'd appreciate it. I'd prefer to do this through official APIs, as opposed to clever DOM manipulation, as seen elsewhere on StackOverflow.

score 17 · Accepted Answer · edited May 23 '17 at 11:53

17

OK, it seems that I found a way which looks like better. The idea is to use navButtonAdd with the "#list_toppager_left" instead of "#pager".

I modified the old answer so, that one custom button are added on the top of the navigation toolbar together with one standard button. Other elements from the top navigation toolbar will be removed. The results will looks like alt text

You can see the corresponding demo live here.

edited May 23 '17 at 11:53

Community

1
1

answered Oct 14 '10 at 10:47

Oleg

220,925
34
403
798

Ah, I think I follow now. In the interested of helping the next programmer who comes along, I didn't realize the "cloneToTop" option only copies the default grid buttons and **not** any custom buttons added in. I had tried using navButtonAdd on mygrid_toppager, I didn't realize you needed to let the api know which side of the grid you wanted it on (left/right) when dealing with the toppager. – Alana Storm Oct 14 '10 at 18:52
2

In your demo (and what I am currently experiencing) the 'cursor: pointer' style is not being applied when hovering over the top custom nav icons. Do you have any solutions to this? Thank you so much! – icats Nov 14 '11 at 17:29
@icats: It's very good question! The problems is in CSS for `.ui-jqgrid .ui-jqgrid-pager .ui-pg-button`, but the toppager has class `ui-jqgrid-toppager` and no `ui-jqgrid-pager` like the bottom pager. So to fix the problem one should add CSS `.ui-jqgrid .ui-jqgrid-pager .ui-pg-button { cursor: pointer }`. It's a bug in `ui.jqgrid.css` – Oleg Nov 14 '11 at 18:10
Ah, simple! You meant `.ui-jqgrid-toppager` instead of `.ui-jqgrid-pager`, right? - So: `.ui-jqgrid .ui-jqgrid-toppager .ui-pg-button { cursor: pointer }`. Thanks!! – icats Nov 14 '11 at 18:50
Hi @Oleg I have an issue in my grid, when click I on edit button on jqgrid the edit popup is opens, but when I click on submit button it shows 'No url is set', how can I set a url for navigate to another page. I want to navigate from 'CustomTopToolbar.htm' page to 'addCustomTopToolbar.htm' page. Can you tell me. – UdayKiran Pulipati Dec 24 '13 at 07:01
@udaykiranpulipati: If the user clicks on "Submit" button of Edit form the form data will be sent per Ajax request to URL specified by `editurl` option of jqGrid. If you need to have *different* URLs for Add and Edit form of the same grid you can specify the URL which overwrite the option `editurl`. It's `url` option which can be included as the property `url` of 3-th or 4-th parameter of [navGrid](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#definition). – Oleg Dec 24 '13 at 08:23
@Oleg Thank you, the problem is solved. I want to put edit button in first column field for editing rows, in jqgrid it shown on left corner side. – UdayKiran Pulipati Dec 24 '13 at 08:33
@udaykiranpulipati: you can add a column having [formatter: "actions"](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter#predefined_format_types). I personally don't like this because one get *the same* editing buttons in every row of grid. It reduce useful place on the page. I use myself context menu which are built based on the buttons in navigator bar. See [the answer](http://stackoverflow.com/a/8491939/315935) and some other my old answers which describe the solution. – Oleg Dec 24 '13 at 09:04
@Oleg Adding just clonetoTop: false on pager will not remove the navigation symbols from toppager? – Rustin Cohle Apr 07 '16 at 09:54
@RustinCohle: Sorry, but you should post more exactly what you do, how you call `navGrid`, what you expect (need) to have. – Oleg Apr 07 '16 at 10:13
@Oleg My task is : I want to add a button on top right corner of jqgrid. So I tried setting toppager: true, clonetoTop in navbuttonadd to false. It comes with pager buttons. Removing by code is the only way? or is there any other way to do it? – Rustin Cohle Apr 07 '16 at 10:22
@RustinCohle: Sorry, but you should post the exact code. `clonetoTop` is the option of `navGrid`. It will be not used/ignored by `navButtonAdd`. If the grid have **two pagers** and you want to add it only in one pager then you should specify the name of the pager as the parameter of `navButtonAdd`. For example `var toppager = $("#grid").jqGrid("getGridParam", "toppager"); $("#grid").jqGrid("navButtonAdd", toppager, {...});`. – Oleg Apr 07 '16 at 10:52

Adding jqGrid Custom Navigation to Top Toolbar

1 Answers1

Linked