jqgrid custom inlinenav button

Question

i have a project in which i am generating a JQGrid with both a gridNav and then an inlineNav. the gridNav has custom buttons and the inlineNav of course has the inline functionality.

the question i have is this, is it possible to move the gridNav to after the inlineNav or add a custom button to the inlineNav directly? The custom buttons need to appear after the inlineNav buttons in the application.

any thoughts or tips would be appreciated. i am hoping to do this without having to completely write an inline edit handler for the gridNav.

note: i have already attempted to move the inlineNav and gridNav around which prevents rendering of the inlineNav.

Answer 1

All buttons added by navGrid, inlineNav or navButtonAdd have the same structure. Actually inlineNav uses navButtonAdd to append the buttons to the navigation bar (see here for example).

So you can just change position of the buttons in navigation bar using jQuery.insertAfter, jQuery.after, jQuery.insertBefore, jQuery.before etc. You need just know the ids of the buttons in the navigator bar. The ids of the buttons from navGrid will be build based on the prefix "add_", "edit_", "del_", "search_", "refresh_", "view_" and the id of the grid. The ids of inlineNav are setrted with the id the grid and have the suffix "_ilsave", "_ilcancel", "_iladd" and "_iledit". See the answer for code examples.

UPDATED: To find separator between navigator buttons you can for example search next button from Delete button which has <span class="ui-separator"> inside:

var $separator = $("#del_list").next("td:has(span.ui-separator)");

Alternatively you can search separator in left part of the pager. Let us use use the pager <div class="pager"></div> then the pager will have tree parts with ids pager_left, pager_center and pager_right. The navigator will be inserted in the left part of the pager. So you can use

var $separator = $("#pager_left").find("td:has(span.ui-separator)");

to get the separator. After that you can move or remove the separator in teh same way like any other button. If you need additional separator you can use navSeparatorAdd method.