Skip to content

Redesign of the structure of Navigator Bar of the pagers

Oleg Kiriljuk edited this page Feb 28, 2015 · 4 revisions

Introduction

jqGrid allows to create the pager on the bottom or/and at the top of the grid. The structure of the pager - the <table> with on row and tree cells: left, middle and right. There are exist navGrid method which insert by add additional sub-table navtable in the left part of the pager. Additionally navGrid can insert up to 6 standard icons in the navigator bar. One can use inlineNav and navButtonAdd to add additional buttons to the navigator bar.

The buttons of navigator bar can optionally contains text on the right size of the icon.

The state of the problem in jqGrid 4.7 and earlier version

The main problem of the structure of the navigator bar: it consist from one <table> with one row and all the icons/buttons and the optional texts will be placed in the row. No wrapping is possible. Even if one don't use texts on the side of icon one can easy have the situation when the navigator buttons will be overlapped with the buttons of the pager. The demo demonstrate the problem live. The navigartor bar looks like on the picture below

navBar buttons overlapping

If one would start inline editing using the navigator icon (the second edit button) then the navigator bar will look like

navBar editing buttons overlapping

and the user will be not able to click "Save" or "Cancel" buttons (the last two buttons) of the navigator bar to finish the editing. If one would start editing on the second page one will more clear see that the "Save" or "Cancel" buttons are under the buttons of the pagers. One need just place the mouse cursor over "Save" or "Cancel" button one one will see the corresponding pager button instead:

overlapped navigator buttons

The solution of the problem implemented in free jqGrid 4.8

Navigator bar is redesigned in free jqGrid 4.8. Instead of table.navtable there are exist div.navtable. It allows to wrap the buttons on navigator bar automatically. To overlapping of the buttons of navigator bar with the buttons of the pager will be take place any more.