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 -

score 1 · Accepted Answer · answered May 24 '17 at 13:23

1

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.

answered May 24 '17 at 13:23

Oleg

220,925
34
403
798

I tried your solution but I am not getting what is the problem. For tree grid it is increasing the width such that the grid itself is cutting out. I am posting a image of same in question – shv22 May 24 '17 at 14:08
@shv22: I still not full understand what is the current problem. If you use the second way (with the usage of `normalizeWidth`), then the scrollbar should look like on your second picture (https://i.stack.imgur.com/bVhBH.png). You use local datatype. Then it would be better that you create the demo (in JSFiddle), which demonstrates your current problem. I could modify the code of the demo to make it working. – Oleg May 24 '17 at 14:14
I have updated exactly what I want in question also I have created a demo at https://jsfiddle.net/adishri22/jq01Lp13/10/ – shv22 May 24 '17 at 14:42
@shv22: Your last demo don't use the code, which I posted in my answer! See the code of `normilizeWidth` and the demo from my previous comment. The modification of your demo will be https://jsfiddle.net/OlegKi/jq01Lp13/11/ – Oleg May 24 '17 at 14:48
thanks you so much! that worked for me and sorry for using the code but I want to create as fast as I can so that is why I used the your code. – shv22 May 24 '17 at 14:55
I have found a problem in the demo you gave. If I am resizing the window and the scrollbar comes and like before and it won't go. Also, if resize to full size again and collapse all the tree rows then there is empty space created where the scrollbar is coming. I am updating the question with problem I faced. – shv22 Jun 06 '17 at 12:40
@shv22: I'm not sure that I exactly understand the scenario, which you mean. In any way you can just call `normalizeWidth` directly after the call of `resizeGrid` or you can modify the code of `resizeGrid` and append the call `normalizeWidth.call(this);` as the last statement of the function `resizeGrid`. It should fix the problem. Moreover I recommend you to use free jqGrid 4.14.1 instead of 4.14.0 used in your demo currently. – Oleg Jun 06 '17 at 15:19
My point is the scrollbar comes when we resize the screen to smaller size but it does not come in full size. Also, if I resize the screen again to full size when the scrollbar is there in small size, now, in this case, there will be scrollbar for full screen also. And if I collapse all the rows of tree grid there will empty space for the scrollbar in the screen. Anyway, I applied both of your points (upgrading the version, having normalize.call(this) inside resize function) in the jsfiddle but still, the issue is not resolved. – shv22 Jun 07 '17 at 05:26

Vertical scrollbar taking last column width

1 Answers1