Horizontal Scrollbar issue for Dynamic jqGrid

Question

I am working on ASP.net MVC. I have many dynamic and static jq grids in my application and facing horizontal scroll bar issue.

I did following code for overflow property:

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-y: auto !important;
    overflow-x: auto !important;
}

.ui-jqgrid .ui-jqgrid-btable {
    overflow-y: auto !important;
    overflow-x: auto !important;
}

I have set autowidth=true;. I can not set shrinkToFit=false as I am having another code on grid resize which will also resize column width.

As I have set overflow property to auto, I need same behavior of scrollbar also.

on loading grid for first time, horizontal scroll bar doesn't appear which is correct, after window resize, grid also resizes with columns and horizontal scrollbar appears which is correct. but when I tried to maximize screen, horizontal scrollbar shouldn't appear which is not happening. It still shows scrollbar. Can anyone help me?

Sorry, but you just describe what you do without posing any code. It's difficult to understand you only based on the information. First of all you should write always which version of jqGrid you use and from which fork ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7). You write about resizing of grid, but you don't post the code of `$(window).bind("resize", ...)` which you use (like in [the answer](http://stackoverflow.com/a/34226305/315935) for example). More details are really required. — Oleg, Dec 17 '15 at 08:12
You write about "dynamic" grids, but it's not clear what you mean. There are many ways to build the grid dynamically. Do you use `jqPivot`, OData plugin, load colModel by separate `$.ajax` request or create jqGrid dynamically in some other way? Please post more details. — Oleg, Dec 17 '15 at 08:14
I am using free jqGrid. and I am not using $(window).bind("resize", ...).on gridComplete event, I am setting width of grid with the help of setGridWidth function. — Keren Caelen, Dec 17 '15 at 09:32
usage of any binding inside of `gridComplete` would be bad because the event handler will be called multiple times. I mean: you should append your question with more details and more detailed problem description. My first impression: you should follow [the answer](http://stackoverflow.com/a/34226305/315935) and include `$(window).bind("resize", ...)` where you call `setGridWidth` on resizing the window. I would recommend you to consider to use classes: "hidden-XXX", labelClasses: "hidden-XXX" if you use already bootstrap framework. It could improve the readability of the site on mobile device — Oleg, Dec 17 '15 at 09:58

score 1 · Accepted Answer · answered Dec 17 '15 at 07:58

As you are already using autowidth:true; in the grid options, you can make use of setGridWidth method in the resize event of the window.
You need to use this:

$(window).on("resize", function () {
    var $grid = $("#gridID"),
        newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
}).resize(); // <----triggers the resize on dom ready.

Horizontal Scrollbar issue for Dynamic jqGrid

1 Answers1