jqGrid - resize last column

Question

I am using jqGRid 4.4.1.

Here is the sample code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SubGrid Real Data</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" />
<style>
    .groupColumn {
            background-color: #E3E3D7 !important;
            border: 1px solid #F4F4e5;
            font-weight: bold; !important;
    }
    .lockedColumn {
            background-color: #E3E3D7 !important;
            border: 1px solid #F4F4e5;
    }

    .ui-jqgrid .ui-jqgrid-bdiv {
        position: relative; 
        margin: 0em; 
        padding:0; 
        /*overflow: auto;*/ 
        overflow-x:hidden; 
        overflow-y:auto; 
        text-align:left;
    }

    .ui-jqgrid .ui-subgrid td.subgrid-data {
        border-top: 0 none !important;
        border-right: 0 none !important;
        border-bottom: 0 none !important;
    }
    .ui-jqgrid .ui-subgrid span.ui-icon ui-icon-carat-1-sw {
                background-color: #FFFFFF !important; 
                background-image: none !important;
                border: 0px 0px 1px 1px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>

<script type="text/javascript">
//<![CDATA[
    /*global $ */
    /*jslint browser: true, eqeq: true, plusplus: true */
    $(function () {

        "use strict";
        var colModelData =[{"classes":"groupColumn","name":"itemName","editable":false},
                {"width":"100","name":"24394","editable":false},
                {"width":"100","name":"24390","editable":false},
                {"width":"100","name":"24387","editable":false},
                {"width":"100","name":"24386","editable":false},
                {"width":"100","name":"24385","editable":false},
                {"width":"100","name":"24383","editable":false},
                {"width":"100","name":"24369","editable":false},
                {"width":"100","name":"24306","editable":false}],
            subColModelData =[
            {"classes":"groupColumn","name":"itemName","editable":false},
                {"width":"99","name":"24394","editable":false},
                {"width":"100","name":"24390","editable":false},
                {"width":"100","name":"24387","editable":false},
                {"width":"100","name":"24386","editable":false},
                {"width":"100","name":"24385","editable":false},
                {"width":"100","name":"24383","editable":false},
                {"width":"100","name":"24369","editable":false},
                {"width":"98","name":"24306","editable":false}],
            colNamesArray = ["Name","12/21/2012","12/10/2012","12/03/2012","11/27/2012","11/15/2012","11/12/2012","11/09/2012","10/15/2012"],
        myData = [{"id":"group1","itemName":"Miscellaneous",
            "subGridData":[
            {"id":0,"itemName":"NNNNNN","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
            {"id":1,"itemName":"EEEEEEE","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
            {"id":2,"itemName":"7777777","24369":"","24387":"","24394":"","24306":"6.3","24390":"","24385":"","24386":"","24383":""},
            {"id":3,"itemName":"KKKKKK","24369":"","24387":"","24394":"","24306":"68","24390":"","24385":"","24386":"","24383":""},
            {"id":4,"itemName":"JJJJJ","24369":"","24387":"","24394":"","24306":"160","24390":"","24385":"","24386":"","24383":""},
            {"id":5,"itemName":"TTTTT","24369":"","24387":"","24394":"","24306":"77","24390":"","24385":"","24386":"","24383":""},{"id":6,"itemName":"LLLLLL","24369":"","24387":"","24394":"","24306":"88","24390":"","24385":"","24386":"","24383":""},{"id":7,"itemName":"RRRRR","24369":"","24387":"","24394":"","24306":"2:!","24390":"","24385":"","24386":"","24383":""},{"id":8,"itemName":"AAAAAA","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":9,"itemName":"CCCCC","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":10,"itemName":"HHHHH","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":11,"itemName":"OOOO","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":12,"itemName":"PPPP","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":13,"itemName":"DDDDD","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":14,"itemName":"GGGG","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":15,"itemName":"UBBBBB","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":16,"itemName":"UUUUU","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":17,"itemName":"NNNN","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":18,"itemName":"CCCC","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":19,"itemName":"SSSSS","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":20,"itemName":"FFFF","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":21,"itemName":" ","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":22,"itemName":"zzzzzz","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
            {"id":23,"itemName":"NLNLNLNL","24369":"XXXX","24387":"","24394":"","24306":"I want to see this data","24390":"","24385":"","24386":"","24383":""}]}];
        $("#list").jqGrid({
            datatype: "local",
            data: myData,
            colNames: colNamesArray,
            colModel: colModelData,
            gridview: true,
            autoWidth:true,
            //height: "100%",
            height:"350px",
            width: "100%",
            caption: "Create subgrid from local data",
            subGrid: true,
            subGridOptions: {
                    reloadOnExpand: false
            },
            subGridRowExpanded: function (subgridDivId, parentRowId) {
                    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>");
                    $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
                    var data = $(this).jqGrid("getLocalRow", parentRowId);
                    $subgrid.jqGrid({
                            datatype: "local",
                            data: $(this).jqGrid("getLocalRow", parentRowId).subGridData,
                            colModel:subColModelData,
                            autoWidth:true,
                            width: "100%",
                            height: "100%",
                            autoencode: true,
                            gridview: true,
                            rowNum: 200

                    });
            $subgrid.closest("div.ui-jqgrid-view")
                    .children("div.ui-jqgrid-hdiv").hide();
            },
            resizeStop: function (newWidth, index) {
                // grid.dragEnd()
                var widthChange = this.newWidth - this.width,
                    $theGrid = $(this.bDiv).find(">div>.ui-jqgrid-btable"),
                    $subgrids = $theGrid.find(">tbody>.ui-subgrid>.subgrid-data>.tablediv>.ui-jqgrid>.ui-jqgrid-view>.ui-jqgrid-bdiv>div>.ui-jqgrid-btable");
                $subgrids.each(function () {
                    var grid = this.grid;
                    // we have subgrids which have no internal subgrids
                    // it reduce the number of columns to 1
                    // we have rownumbers: true in the main grid, but not in subgrids
                    // it reduce the number of columns to additional 1
                    // so we should use (index - 2) as the column index in the subgrids
                    grid.resizing = { idx: (index - 1) };
                    grid.headers[index - 1].newWidth = (index - 1 === 0) || (index === grid.headers.length) ? newWidth - 2 : newWidth;
                    grid.newWidth = grid.width + widthChange;
                    grid.dragEnd.call(grid);
                    $(this).jqGrid("setGridWidth", grid.newWidth, false);
                });
                $theGrid.jqGrid("setGridWidth", this.newWidth, false);
            }   

        });

        //$("#list").jqGrid("toggleSubGridRow", 'm1');
        //$("#list").jqGrid("toggleSubGridRow", 'm3');
    });

//]]>
</script>

I have few buttons like Next, Previous, Print, Export etc. below the grid.I have given a fix height to jqGrid. So, I can get vertical scroll bar.

I am using solution mentioned here. : jqGrid horizontal scrollbar

enter image description here

But, I am not able to re size last column.

score 3 · Accepted Answer · edited May 23 '17 at 12:03

I personally find your question very interesting and I voted it up after I seen it before. The problem is that the solution of the problem isn't simple. One will have to modify the source code. I have no time currently for such implementation. Probably Tony will implement this. You can post the corresponding feature request to trirand.

The only thing which I can recommend you is the trick described in the answer. It's not the same what you need, but it can improve users experience in some scenarios. I personally use it in the most productive grids which I made for my customers.

Nevertheless I can suggest you one workaround. Depend on other settings which you use the problem which you describe can be not so hard like it looks like. If you would use gridResize the user will be able to resize the grid. After increasing the size of the grid the user will be able to increase the width of the last column. If you use shrinkToFit: false or use

$("#gridId").jqGrid("gridResize", { shrinkToFit: false });

then the user will be able to resize the last column of the grid in two steps: 1) resize the grid 2) resize the last column of the grid.

UPDATE: The problem with resizing of the last column don't exist at all in free jqGrid starting with the version 4.9 (see the readme). Thus upgrading to the current version of free jqGrid (4.10.0 or higher) could resolve the problem with resizing of the last column of the grid.

jqGrid - resize last column

1 Answers1

Linked