FreeJqGrid : How to resize the whole grid after a .show() event

Question

I use FreeJqGrid and i can't resolve my problem. I have two divs, one use to collect information and the other to show in a freejqGrid the result of this collect.

The first div is visible and the second is hidden and when i switch those div, my grid isn't full width. See this Link. So how can i resize it ? I try many answser in SOF like grid.trigger('resize') but nothing work. Here's how i build my grid :

grid.jqGrid({
    data: myData,
    colNames: ["Matricule","ID CICP","Nom Prénom", "N° de Sécurité Sociale", "Date entée", "Date sortie",  "Adhérent"],
    colModel: [
        {
            name: "matricule", template: 'string', align:'center'
        },
        {
            name: "idEmpl", template: 'string', align:'center'
        },
        {
            name: "name", template: 'string', align:'center',
            jsonmap: function (item) {
                return item.name.first + " " + item.name.last;
            },
            sorttype: function (cell) {
                return cell.last + " " + cell.first;
            }
        },
        {
            name: "numSecu", template: 'string', align:'center'
        },
        {
            name: "dateEntree", formater: 'date', sorttype: "date", formatoptions:{newformat: 'dd-mm-yy'}, align:'center'
        },
        {
            name: "dateSortie", formater: 'date', sorttype: "date", formatoptions:{newformat: 'dd-mm-yy'}, align:'center'
        },
        {
            name: "adherent", template: 'string', align:'center'
        }
    ],
    onSelectRow: function(rowid){
        //blabla
    },
    autowidth: true,
    sortname: "name",
    shrinkToFit: false
});

This problem happen only when i use the .show() and .hide() event of jQuery.

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

You can use onShowHideCol callback or "jqGridShowHideCol" event to make some action after showCol or hideCol. For example you can use

var resizeGrid = function () {
        grid.jqGrid("setGridWidth", grid.closest(".ui-jqgrid").parent().width());
    };

// resize the grid on showing/hiding columns
grid.bind("jqGridShowHideCol", function () {
    resizeGrid();
});

// resize the grid on resizing the window
$(window).bind("resize", function () {
    resizeGrid();
});

See the answer and this one for code examples about resizing the grid on resizing the window. See the demo and this one.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 03 '16 at 19:59

Oleg

220,925
34
403
798

Hi @Oleg, this solution doesn't work for me. The resizing must be done when my whole grid is shown and automaticly. It's not about the column it's about the layout of my page :/ – Rhend Jun 06 '16 at 07:50
I resolve my problem. I just change when my jqGrid is created. Thanks Oleg to be so fast to answer everytime we have a problem with the plugin :) – Rhend Jun 06 '16 at 08:26

FreeJqGrid : How to resize the whole grid after a .show() event

1 Answers1