Search code examples
jqueryjsonjqgrid

jqgrid grouping not working as it should

I have this jqgrid definition:

var columnas = [
                    { label: 'Localidad', name: 'InventarioLocalidad', width: 120 },
                    { label: 'Empresa', name: 'InventarioEmpresa', width: 120 },
                    { label: 'Tipo', name: 'InventarioTipo', width: 120 },
                    { label: 'Número Serie', name: 'InventarioNumSerie', width: 120 },
                    { label: 'Marca', name: 'InventarioMarca', width: 120 },
                    { label: 'Modelo', name: 'InventarioModelo', width: 120 },
                    { label: 'En Uso', name: 'InventarioEnUso', width: 80, formatter: booleanFmatter },
                    { label: 'RUT', name: 'InventarioRutUsuario', width: 100 },
                    { label: 'Usuario', name: 'InventarioNombreUsuario', width: 120 },
                    { label: 'Status', name: 'InventarioStatus', width: 80 },
                    { label: 'Fecha', name: 'InventarioFecha', width: 100, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y" } },
                    { label: 'Hora', name: 'InventarioHora', width: 80, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y" } },
                    { label: 'Fecha Carga', name: 'InventarioFechaCarga', width: 130, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y" } }
            ];

var grid = $('#gridReporteConAnalisis');
            grid.jqGrid({
                url: urlGrid,
                mtype: "GET",
                datatype: "json",
                colModel: columnas,
                viewrecords: true,
                shrinkToFit: false,
                autowidth: false,
                multiselect: false,
                rowNum: 20,
                rowList: [10, 20, 30],
                gridview: true,
                pager: pagerName,
                sortname: "InventarioTipo",
                sortorder: "asc",
                grouping: true,
                groupingView: {
                    groupField: ['InventarioTipo'],
                    groupDataSorted: true,
                    groupColumnShow: [false],
                    groupOrder: ['asc']
                },
                loadError: function (xhr, status, error) {
                    checkUserSession(xhr);
                },
                beforeRequest: function () {
                    var $PANEL = $('#pnlGridConAnalisis')
                    $FOOTER = $('footer');

                    grid.jqGrid('setGridWidth', $PANEL.width());

                    // 125 = otros altos, como paddings y la fila de paginación
                    grid.jqGrid('setGridHeight', $FOOTER.offset().top - $PANEL.offset().top - 125);
                }
            });

The problem is grid appears this way:

Grouping result

As you can see, groups appear several times with different child nodes. that is good, but, why grouping does not group all the elements below the same group?

JSON that feeds the grid is well formed so it is not relevant to show here, besides it is very big.

Solution

  • You need to fix the server-side code that creates the JSON so it keeps all the related rows together. jqGrid doesn't reorder the data, it just starts a new group whenever this column changes.

    Using ORDER BY inventariotipo in the SQL query should solve the problem.