Responsive JQGRID converts action icons to be a button, but not paging information

Question

I have this JQGRID:

$(document).ready(function () {    
    $.jgrid.defaults.width = 780;
    $.jgrid.defaults.responsive = true;
    $.jgrid.defaults.styleUI = 'Bootstrap';
    $.jgrid.styleUI.Bootstrap.base.rowTable = "table table-bordered table-striped";        
            $("#gridUsuario").jqGrid({
                url: '@Url.Action("GetUsers", "Account", new { area = "Security" })',
                mtype: "GET",
                datatype: "json",
                colModel: [
                    { label: 'ID', name: 'ID', key: true, width: 70 },
                    { label: 'Vigente', name: 'UsuarioVigente', hidden: true },
                    { label: 'Nombre Completo', name: 'FullName', width: 200, edittype: 'text', editable: true, editrules: { required: true }, editoptions: { size: 50, maxlength: 100 }, formoptions: { elmprefix: '(*)' } },
                    { label: 'Login', name: 'UserName', width: 120, edittype: 'text', editable: true, editrules: { required: true }, editoptions: { size: 30, maxlength: 50 }, formoptions: { elmprefix: '(*)' } },
                    { label: 'Password', name: 'Password', width: 100, edittype: 'password', editable: true, hidden: true, editrules: { required: true, edithidden: true }, editoptions: { size: 30, maxlength: 50 }, formoptions: { elmprefix: '(*)' } },
                    { label: 'E-mail', name: 'Email', width: 240, edittype: 'text', editable: true, editrules: { required: true, email: true }, editoptions: { size: 50, maxlength: 100 }, formoptions: { elmprefix: '(*)' } },
                    { label: 'Teléfono', name: 'PhoneNumber', width: 120, edittype: 'text', editable: true, editoptions: { size: 30, maxlength: 50 } },
                    { label: 'Ciudad', name: 'Hometown', width: 150, edittype: 'text', editable: true, editoptions: { size: 30, maxlength: 50 } },
                    { label: 'Fecha Registro', name: 'UsuarioCreadoEn', width: 120, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y H:i" } }
                ],
                viewrecords: true,
                shrinkToFit: false,
                autowidth: true,
                multiselect: true,
                rowNum: 20,
                rowList: [10, 20, 30],
                gridview: true,
                pager: "#gridPager",
                sortname: "FullName",
                sortorder: "asc",
                beforeRequest: function () {
                    var $PANEL = $('#pnlGrid'),
                        $FOOTER = $('footer');

                    // 125 = otros altos, como paddings y la fila de paginación
                    $("#gridUsuario").jqGrid('setGridHeight', $FOOTER.offset().top - $PANEL.offset().top - 125);
                },
                rowattr: function (rd) {
                    if (!rd.UsuarioVigente) {
                        return { "class": "no-vigente" };
                    }
                }
            });

All works perfect but responsive behaviour.

At bottom toolbar, I have several actions created with navButtonAdd method.

When I test responsiveness, the action icons at bottom toolbar are replaced by a button with "Actions..." label. When clicked, all action items pop up. That is perfect, however, the paging does not behave the same, causing paging icons to appear over the "Actions..." button.

Is this a bug in JQGRID? is there a way to solve this?

It seems that **commercial** [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) still has non-wrappable buttons in the navigator toolbar. Alternative fork [free jqGrid](https://github.com/free-jqgrid/jqGrid) has the feature (see [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Redesign-of-the-structure-of-Navigator-Bar-of-the-pagers)). I recommend you to try free jqGrid, which supports Bootstrap too (see [here](https://free-jqgrid.github.io/getting-started/index.html#bootstrap)). You will need to make minimal changes of options like usage of `guiStyle: "bootstrap"`. — Oleg, Jul 05 '17 at 21:00
Responsive functionality is very easy. Look at [the old demo](https://jsfiddle.net/OlegKi/andm1299/26/) which shows how to auto-hide some columns on small devices (see `classes: "hidden-xs", labelClasses: "hidden-xs"` option and try to resize the grid). [Another demo](https://jsfiddle.net/OlegKi/ejpn9/149/), created for [the issue](https://github.com/free-jqgrid/jqGrid/issues/303), demonstrates responsive functionality in combination with auto-risizing columns. — Oleg, Jul 05 '17 at 21:08
Other features implemented in free jqGrid could be interesting for you too. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/multiPageSelection.htm) for example, described in [the answer](https://stackoverflow.com/a/33021115/315935), demonstrates `multiPageSelection: true` option, which allows preselect rows or to hold rows selected over multiple pages. — Oleg, Jul 05 '17 at 21:12

score 0 · Answer 1 · answered Jul 06 '17 at 20:52

0

Before to comment if certain component does not support some feature it is good idea to check the example. From the example provided I can not see any problem. The author of the request should post full example, and the suggester should check it before to suggest his component.

Kind Regards

answered Jul 06 '17 at 20:52

Tony Tomov

3,122
1
11
18

Sure you did not see any problem? have you tested it in a mobile phone? – jstuardo Jul 07 '17 at 00:12
Where in your original post you tell us that the problem appear in mobile phones? Moreover the action menu appear when navigator is activated - I do not see the presence of navigator in your example – Tony Tomov Jul 07 '17 at 04:34

Responsive JQGRID converts action icons to be a button, but not paging information

1 Answers1