When too many icons are added to navigator pager (top or bottom) a picture and text overflow is show.
But, behavior I want is: "buttons will be wrapped on the next row of pager (top or bottom) automatically if too many icons are added and the grid have not so large width".
Top pager example here:
$("#grid").jqGrid(
{
url : 'value_url',
datatype : 'json',
mtype : 'GET',
colNames : [
'Estudiante Id',
'Cedula',
'Nombres y Apellidos',
'Sexo',
'Número Expediente'
],
prmNames : {
id : 'estudianteId'
},
colModel : [...],
postData : {},
rowNum : 15,
rowList : [ 10, 15, 20, 30 ],
height : '100%',
autowidth : true,
shrinkToFit : true,
rownumbers : true,
pager : '#pager',
toppager : true,
sortname : 'cedula',
viewrecords : true,
sortorder : "asc",
caption : "Listado Estudiantes",
emptyrecords : "No se encontraron estudiantes",
loadonce : false,
loadComplete: function () {
$("#pager_right").attr('width', 150);
},
jsonReader : {
root : "rows",
page : "page",
total : "total",
records : "records",
repeatitems : false,
cell : "cell",
id : "estudianteId"
},
});
$("#grid").jqGrid(
'navGrid',
'#pager',
{
edit : false,
add : false,
del : false,
search : false
},
{},
{},
{},
{ // search
sopt : [ 'cn', 'eq', 'ne', 'lt', 'gt',
'bw', 'ew' ],
closeOnEscape : true,
multipleSearch : true,
closeAfterSearch : true
});
$("#grid").jqGrid(
'navGrid',
'#grid_toppager',
{
edit : false,
add : false,
del : false,
search : false
},
{},
{},
{},
{ // search
sopt : [ 'cn', 'eq', 'ne', 'lt', 'gt',
'bw', 'ew' ],
closeOnEscape : true,
multipleSearch : true,
closeAfterSearch : true
});
function activar_top_pager()
{
$("#grid_toppager_left").html('<table cellspacing="0" cellpadding="0" border="0" style="float: right; table-layout: auto;" class="ui-pg-table navtable"><tbody><tr></tr></tbody></table>');
$("#grid_toppager_center").html('<table cellspacing="0" cellpadding="0" border="0" style="float: right; table-layout: auto;" class="ui-pg-table navtable"><tbody><tr></tr></tbody></table>');
$("#grid_toppager_right").html('<table cellspacing="0" cellpadding="0" border="0" style="float: right; table-layout: auto;" class="ui-pg-table navtable"><tbody><tr></tr></tbody></table>');
$("#grid_toppager_center").width('1px');
$("#grid_toppager_right").width('1px');
}
activar_top_pager();
$("#grid").jqGrid('bindKeys');
$("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Op. ", buttonicon: "ui-icon-locked", title: "Operaciones ",
id: 'btnope',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton1", buttonicon: "ui-icon-locked", title: "Boton1",
id: 'b1',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton2", buttonicon: "ui-icon-locked", title: "Boton2",
id: 'b2',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton3", buttonicon: "ui-icon-locked", title: "Boton3",
id: 'b3',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton4", buttonicon: "ui-icon-locked", title: "Boton4",
id: 'b4',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton5", buttonicon: "ui-icon-locked", title: "Boton5",
id: 'b5',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton6", buttonicon: "ui-icon-locked", title: "Boton6",
id: 'b6',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton7", buttonicon: "ui-icon-locked", title: "Boton7",
id: 'b7',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton8", buttonicon: "ui-icon-locked", title: "Boton8",
id: 'b8',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton9", buttonicon: "ui-icon-locked", title: "Boton9",
id: 'b9',
onClickButton: function() {
}
}); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
caption: "Boton10", buttonicon: "ui-icon-locked", title: "Boton10",
id: 'b10',
onClickButton: function() {
}
});
You demo uses old version 4.6 of jqGrid. The problem is known in the version. You can actual 4.15.5 version of free jqGrid fork of jqGrid, which is compatible to jqGrid 4.6, but contains a lot of new features (see here, READMEs and the wiki). It supports wrapping of navigator buttons (see the wiki article).
Additionally you should don't use activar_top_pager function of your demo. Instead of hiding central pager you should comment rowNum : 15, rowList : [ 10, 15, 20, 30 ] options and to add pgbuttons: false and pginput: false options. To hide right pager you need comment viewrecords : true option:
//rowNum : 15,
//rowList : [ 10, 15, 20, 30 ],
//viewrecords : true,
pgbuttons: false,
pginput: false
You will see the results on the modified demo: http://jsfiddle.net/OlegKi/41qv5xsu/12/.
By the way, if you do want to display some part of pager you can specify the width of the part of the page using pagerLeftWidth, pagerCenterWidth or pagerRightWidth parameters.