Autoajustar ancho de jqgrid dentro de tab bootstrap – jqgridbootstrap bootstrapjqgrid

Pregunta:


Estoy utilizando dentro de un Tab de y la grilla no se autoajusta al tamaño del Tab, se expande mucho. ¿Existe una forma de hacer que la cuadrícula se ajuste al tamaño máximo del Tab de boostrap?

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' });

Preguntado por: araad1992

El problema es que jqGrid no es responsive

Guriddo jqGrid JavaScript 5.0 is released

pero si hay una adaptacion que permitiria resolver el problema

veras como define

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

y en la definicion del grid

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

con esto deberias poder hacer responsivo a jqgrid

Tambien podrias evaluar el estilo

jQuery UI Bootstrap

si revisas en los extras veras que define un estilo responsive para el jqgrid.

O sino evaluar alternativas como las mencionadas aqui

Way to make jqGrid responsive on web browsers

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *