2

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' });
2
  • Por favor agrega tu codigo para que sea mas claro lo que preguntas. el 1 may. 2016 a las 6:34
  • Adicione el código de mi jqgrid
    – araad1992
    el 2 may. 2016 a las 22:34

1 respuesta 1

1

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

5
  • Hola, he adicionada el css con bootstrap y aun no logro hacerla responsive
    – araad1992
    el 3 may. 2016 a las 16:29
  • revisaste la demo que se propone en el link guriddo.net/demo/bootstrap y en tu caso aplica de esa misma forma? puede que el css no hay cargado, realiza un Ctrl+F5 y analiza con el developer tools del browser en la solapa network si es que carga este estilo. Recuerda que debes ubicarlo al final despues de la carga de los css de bootstrap el 3 may. 2016 a las 16:32
  • Si carga el css pero aun sigue sin funcionar, y tambien he refrescado con el Ctrl + F5 y nada :(
    – araad1992
    el 3 may. 2016 a las 16:51
  • puedes validar que este css lo defines despues de los css que bootstrap ? el 3 may. 2016 a las 17:19
  • Uso master page y ahi tengo el bootstrap y luego en la página como tal tengo este último css
    – araad1992
    el 3 may. 2016 a las 19:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.