Auto-fit width of jqgrid within tab bootstrap

2

I am using inside a Tab and the grid does not auto-adjust to the size of the Tab, it expands a lot. Is there a way to make the grid fit the maximum Boostrap Tab size?

var info = datos; $("#gvsDetalleRevisionErradicar").jqGrid("GridUnload");
            var grid = $("#gvsDetalleRevision").jqGrid({
                datastr: info,
                datatype: 'jsonstring',
                height: "300",
                //width: newWidth2,
                rowNum: 1000000,
                multiselect: true,
                ignoreCase: true,
                autowidth: true,
                shrinkToFit: false,
                //forceFit: true,
                colNames: ['Siembra', 'Lote', 'Linea', 'Palma', 'Fecha Cuarentena', 'Dias en cuarentena', 'Fecha revision', 'Dias desde revision', 'No veces erradicada', 'No veces revisada'],
                colModel: [
                    { label: 'Siembra', name: 'Siembra', resizable: false},
                    { label: 'Lote', name: 'Lote', resizable: false},
                    { label: 'Linea', name: 'Linea', resizable: false},
                    { label: 'Palma', name: 'Palma', resizable: false},
                    { label: 'FechaErradicacion', name: 'FechaErradicacion', resizable: false},
                    { label: 'DiasCuarentena', name: 'DiasCuarentena', resizable: false},
                    { label: 'FechaRevision', name: 'FechaRevision', resizable: false},
                    { label: 'DiasDesdeRevision', name: 'DiasDesdeRevision', resizable: false},
                    { label: 'NoVecesErradicada', name: 'NoVecesErradicada', resizable: false},
                    { label: 'NoVecesRevisada', name: 'NoVecesRevisada', resizable: false}
                ],
                caption: "Listado de palmas en cuarentena",
                onSelectRow: function (id) {
                    var p = this.p, item = p.data[p._index[id]];
                    if (typeof (item.cb) === "undefined") {
                        item.cb = true;
                    } else {
                        item.cb = !item.cb;
                    }
                },
                onSelectAll: function (id, status) {
                    for (i = 0; i < id.length; i++) {
                        var p = this.p, item = p.data[p._index[id[i]]];
                        item.cb = status;
                    }
                },
                loadComplete: function () {
                    var p = this.p, data = p.data, item, $this = $(this), index = p._index, rowid;
                    for (rowid in index) {
                        if (index.hasOwnProperty(rowid)) {
                            item = data[index[rowid]];
                            if (typeof (item.cb) === "boolean" && item.cb) {
                                $this.jqGrid('setSelection', rowid, false);
                            }
                        }
                    }
                },
            });
            jQuery("#gvsDetalleRevision").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
    
asked by araad1992 30.04.2016 в 18:57
source

1 answer

1

The problem is that jqGrid is not responsive

Guriddo jqGrid JavaScript 5.0 is released

but if there is an adaptation that would solve the problem

You will see how it defines

<link rel="stylesheet" type="text/css" media="screen" href="path_to_css_files/ui.jqgrid-bootstrap.css" />

and in the definition of the grid

$("#grid").jqGrid( {
   ...
   styleUI : "Bootstrap",
   ...
 });

with this you should be able to make responsive to jqgrid

You could also evaluate the style

jQuery UI Bootstrap

If you check in the extras you will see that it defines a responsive style for the jqgrid.

Or else evaluate alternatives such as those mentioned here

Way to make jqGrid responsive on web browsers

    
answered by 03.05.2016 в 16:19