Vertical scrollbar taking last column width

Question

I am using free jqgrid 4.14. I am having a problem with the vertical scrollbar in the tree grid. I have defined a height for the tree grid. Now when the grids loads and I try to expand it this happens.

But as soon as I am resizing the window the scrollbar width is not taken from last column width instead it has it own. See

So, I thought of making load vertical scrollbar at start

.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll }

but then also it is taking width from the column.

I am loading grid with these settings -

    datatype: "jsonstring",
    datastr: grid_data,
    colNames: scopes.grid_header_column_value[grid_id],
    colModel: scopes.gridcolumns[grid_id],
    height: height,
    viewrecords: is_pager_enable,
    multiSort: true,
    ignoreCase: true,
    grouping: is_group_enable,
    headertitles:true,
    sortorder: sort_order,
    sortable: false,
    pager: "#" + pager_id,
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "jsonstring",
    ExpandColumn: 'name'

Also, I am applying these properties -

$("#" + grid_id).closest('.ui-jqgrid-bdiv').width($("#" + grid_id).closest('.ui-jqgrid-bdiv').width() + 1);
$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');
$(".ui-jqgrid tr.jqgrow td").css('white-space', 'normal');
$(".ui-jqgrid tr.jqgrow td").css('height', 'auto');
$("div.ui-jqgrid-sdiv").after($("div.ui-jqgrid-bdiv"));

I am also using jqGridAfterLoadComplete event so that on loading also it performs the same operation which it should perform in resizing from here

So, how can force the vertical scrollbar to take width from outside of grid.

Update: Added image after the solution

Here is the image which specifies exactly what I want.

Here the scrollbar is not needed but still, it is initialized as empty without taking column width

Problem while resizing: I am using jquery event when the window is resized so to resize the jqgrid according to the screen but here the problem is if I resize the window to smaller screen and expand the tree grid, scrollbar comes. The code is for resizing is like this -

 $(window).bind('resize', function () {
         resizeGrid.call($('#' + grid_id));
        });

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

Like this -

here the scrollbar have extra space and it is coming outside the given space. Also, now if I resize window to full size and collapse all the rows the empty is there for the scrollbar.

It looks like this -

Oleg Oleg · Accepted Answer · 2017-05-24T13:23:52

Try to add the callback treeGridAfterExpandRow with the following code:

treeGridAfterExpandRow: function () {
    this.fixScrollOffsetAndhBoxPadding();
}

I'm not sure that I exactly understand, which behavior you need to have. Probably the usage of two callbacks treeGridAfterExpandRow and treeGridAfterCollapseRow

treeGridAfterExpandRow: normalizeWidth,
treeGridAfterCollapseRow: normalizeWidth

with normalizeWidth defined as

var normalizeWidth = function () {
        var $self = $(this), p = $self.jqGrid("getGridParam");
        this.fixScrollOffsetAndhBoxPadding();
        if (!p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%")) {
            $self.jqGrid("setGridWidth", p.tblwidth + p.scrollOffset, false);
        }
    };

will more close to your requirements. The above code extend the width of the TreeGrid to the width of the scroll bar if the vertical scroll bar will be visible.

Vertical scrollbar taking last column width

1 Answers