How to show row numbers greater than 9999 in free jqgrid

Code from answer Set rownumbers to false dynamically in jqgrid

is used to create button which toggles row numbers.

    $grid.jqGrid("navButtonAdd", "#grid_toppager", {
        buttonicon: "fa-list-ol",
        iconsOverText: true,
        caption: '',
        id: "RowNumbers",
        onClickButton: function (options, e) {
            var $me = $(e.currentTarget);
            if ($grid.jqGrid('getGridParam', 'rownumbers') && $grid[0].p.colModel[0].hidden ) {
                $grid.jqGrid('showCol', 'rn');
                $me.addClass("ui-state-active");
            } else {
                $grid.jqGrid('hideCol', 'rn');
                $me.removeClass("ui-state-active");
            }
            resizeGrid();
            saveWindowState();
        }
    });

    if (isColState && myColumnsState.rownumbers) {
        $("#RowNumbers").click();
    }

If row number is greater than 9999 , last digit is not visible.

row numbers 10000 .. 10009 appear as 1000, 10010 appears as 1001 etc. How to show full row numbers ? I tried different zoom levels in browser to full row numbers will not appear. Thied to resize but it looks like row number column is not resizable.

Solution

jqGrid have rownumWidth option which allows to increase the width of rn column during creating of the grid. If you need to set the width of the column dynamically you can use setColWidth described here and here. The demo shows that you can set the width of rn column dynamically. The method setColWidth is a part of free jqGrid 4.8, so you can use it directly.