Search code examples
javascriptjqueryjqgridfree-jqgrid

Do I need to define a fixed width for each column or it can be automatically calculated?

I am wondering if there is any configuration and I am missing it where the columns fits the grid width automatically in jQgrid or if I need to define a fixed width (which is no so cool) for each of them. I have tried the following without success:

$(function () {
    "use strict";
    var $grid = $("#list");

    $grid.jqGrid({
        url: '/ajax/plans_to_forms/get_all',
        datatype: "json",
        colNames: ["Actions", "Form #", "Form", "Plan", "Class", "Drug"],
        colModel: [
            {name: "act", template: "actions"},
            {name: "FormId", align: 'center', fixed: true, frozen: true, resizable: false, width: 50},
            {name: "FormName"},
            {name: "PlanName"},
            {name: "DrugGroupName"},
            {name: "DrugName"}
        ],
        cmTemplate: {autoResizable: true, editable: true},
        iconSet: "fontAwesome",
        rowNum: 25,
        guiStyle: "bootstrap",
        autoResizing: {compact: true},
        rowList: [25, 50, 100, "10000:All"],
        viewrecords: true,
        autoencode: true,
        sortable: true,
        pager: true,
        toppager: true,
        hoverrows: true,
        multiselect: true,
        multiPageSelection: true,
        rownumbers: true,
        sortname: "Id",
        sortorder: "desc",
        loadonce: true,
        autowidth: true,
        shrinkToFit: false
    }).jqGrid("navGrid", {
        edit: false,
        add: false,
        del: true,
        search: false,
        refresh: true
    }).jqGrid("filterToolbar").jqGrid("gridResize");
});

The result looks like:

enter image description here

Solution

  • Free jqGrid has the feature starting with the first released version (4.8). I described the feature in the wiki article. You need mostly to add autoresizeOnLoad: true option to the grid to solve your problem.

    The problem is that there are exist many small interpretation of "auto-resizing" behavior. You can call autoResizeAllColumns method inside of jqGridAfterLoadComplete event to implement some variation of the standard behavior. For example the answer and the demo https://jsfiddle.net/OlegKi/dk2qwbcs/6/) shows how to use "auto-resizing" to reduce the grid size to the minimal width without shrink and to add horizontal scrollbar in the grid in case of small outer window.

    Another property: resetWidthOrg: true of autoResizing option can be helpful in case of usage shinking. See the demo https://jsfiddle.net/OlegKi/ejpn9/149/ where the properties

    autoresizeOnLoad: true,
autowidth: true,
autoResizing: {
    compact: true,
    resetWidthOrg: true
},

    are used.