javascript - Jqgrid Column width According to Its Content

Question

I have many column in my Jqgrid.All Columns showing Extra space on both sides.i want that column without Extra spacing. Column Width should have width according to its content. I have tried autowidth but its not working.

Actual Behavior is looks like:

-----------------------------------------------
|     Name     |     Mobile     |    Email    |
----------------------------------------------- 

And What I need is :

----------------------
|Name|Mobile No|Email|
----------------------

here is my code

 $("#list").jqGrid({
     datatype: "local",
     data: mydata,
     colNames: ["Name", "Mobile", "Email", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
     colModel: [
                { name: "id", width: 65, align: "center", sorttype: "int", hidden: true },
                { name: "invdate", width: 80, align: "center", sorttype: "date",
                    formatter: "date", formatoptions: { newformat: "d-M-Y" }, datefmt: "d-M-Y"
                },
                { name: "name", width: 70 },
                { name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right" },
                { name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right", hidden: true },
                { name: "total", width: 65, formatter: "number", sorttype: "number", align: "right" },
                { name: "closed", width: 75, align: "center", formatter: "checkbox",
                    edittype: "checkbox", editoptions: { value: "Yes:No", defaultValue: "Yes" }
                },
                { name: "ship_via", width: 100, align: "center", formatter: "select",
                    edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "Intime" }
                },
                { name: "note", width: 70, sortable: false }
            ],
     rowNum: 10,
     rowList: [5, 10, 20],
     pager: "#pager",

     rownumbers: true,
     sortname: "invdate",
     viewrecords: true,
     sortorder: "desc",
     caption: "Test for AltRows",
     height: "auto"
});

Kindly Solve my problem.

Answer 1

The question is old. jqGrid don't provide variable column width. It uses always fixed column width and the width of every column will be set during creating the grid even before filling the grid with data. Moreover jqGrid don't provide a method which allows you to change the width of the column after the grid is created.

Nevertheless the requirement stay. One need to create some grids with columns which width are dynamically set based on content of the texts in the column.

I suggested in the answer setColWidth method which can do change column width after the grid is created. Using the method one do can suggest some implementation of your requirements. I created the demo for you which demonstrates this. It uses the following code

$("#list").bind("jqGridAfterLoadComplete", function () {
    var $this = $(this), iCol, iRow, rows, row, cm, colWidth,
        $cells = $this.find(">tbody>tr>td"),
        $colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        n = $.isArray(colModel) ? colModel.length : 0,
        idColHeadPrexif = "jqgh_" + this.id + "_";

    $cells.wrapInner("<span class='mywrapping'></span>");
    $colHeaders.wrapInner("<span class='mywrapping'></span>");

    for (iCol = 0; iCol < n; iCol++) {
        cm = colModel[iCol];
        colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons
        for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
            row = rows[iRow];
            if ($(row).hasClass("jqgrow")) {
                colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
            }
        }
        $this.jqGrid("setColWidth", iCol, colWidth);
    }
});

First of all I wrap the content of all cells of the grid and the content of the column headers within the span: <span class='mywrapping'></span>. It allows me to calculate the width of the content of the cells. Then I goes through all rows and all rows and find the max width which I use in the call setColWidth method.

Be carefully that the above solution only the first attempt to implement "autowidth" of columns based of the content. It could not work in case of more sophisticated content of the grid.

By the way you the width of columns will be changed on sorting and on paging because the maximal width of columns will be changed in the case.

UPDATED: If one uses columnChooser or other methods one need to recalculate the column width on more events as jqGridAfterLoadComplete. To do this one need just add the corresponding event name (event names divided spaces) in the bind/on after "jqGridAfterLoadComplete". For example the answer demonstrates recalculation the column widths after columnChooser. One uses just $("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {...}); instead of $("#list").bind("jqGridAfterLoadComplete", function () {...});

UPDATED 2: The functionality in included out-of-the-box in free jqGrid, the fork of jqGrid, which I develop starting with the end of 2014. The feature was included already in the first version (v4.8) of free jqGrid. See the wiki. The current version of free jqGrid is 4.13.0. Thus one don't need to follow the tricks described above and just to upgrade jqGrid to the current version of free jqGrid. One can include cmTemplate: { autoResizable: true } to make all columns auto-resizable and to add autoresizeOnLoad: true option to reset the width of all columns at the end of every loading. Alternatively one can call autoResizeAllColumns() method whenever one want recalculate the width of all auto-resizable columns.