Mike Sheppard asked 8 years ago
Without re-inventing the wheel, has anyone come-up with a straight-forward solution to adding buttons to the pager_right or toppager_right? I have to add 3 new buttons with extra text and there is not enough room on the left toolbar with the new larger icons.
Thanks for any assistance.
Mike
Abu Ghufran answered 8 years ago
Hello,
An option could be to move the pager and total records from top toolbar.
It will give full width space for icons.
Along with that you can remove the operations buttons from bottom toolbar.
$grid["loadComplete"] = "function(){pagers_fx();}";
$g->set_options($grid);
<script>
var pagers_fx = function(){
jQuery(".ui-jqgrid-toppager td[id$=pager_right]").remove();
jQuery(".ui-jqgrid-toppager td[id$=pager_center]").remove();
jQuery(".ui-jqgrid-pager td[id$=pager_left]").html('');
};
</script>
You can inspect elements using firebug and change as required.
Mike Sheppard answered 8 years ago
That works very well, Abu. I have been following your advice about using Firebug (and the Chrome Debugger) to look for alternatives. I came across something else that works – using a custom table for the _pager_right and then including the buttons in that. It works – but not as nice as your method of removing the top-items from the Top Pager – but leaving them in the bottom.
A combination approach looks like it will work the best.
This is the extra table code I added to get a _pager_right toolbar along with the paging-info (which I wanted to keep in the top for now).
Thanks again for prompt answers to questions and a great source of information in the Forum.
$("#list1_pager_right").html('<table cellspacing="0" cellpadding="0" border="0" style="float: right; table-layout: auto;" class="ui-pg-table navtable"><tbody><tr><td style="width: 4px;"><span class="ui-separator"></span></td><td><span class="ui-paging-info"></span></td></tr></tbody></table>');
Mike Sheppard answered 8 years ago
Is there a way to have independent control over the top-pager and bottom-pager with the navbuttons?
Something like:
jQuery('#list1').jqGrid('navButtonAdd', '#list1_bottompager'
Abu Ghufran answered 8 years ago
No, That's not supported.
You can add custom html elements in toolbar like in demo: (dropdown in toolbar)
http://www.phpgrid.org/demo/demos/appearance/grouping.php
Code: http://www.phpgrid.org/demo/demos/appearance/grouping.phps
jQuery('.navtable tr').append('…');
In same way, you can try adding in other cells.
Mike Sheppard answered 8 years ago
Ah – I remember reading that a few weeks ago (dropdown in toolbar). Thank you – that gives me some ideas.
Have a great day.
Mike
