Jqgrid Does Not Render Correctly in Chrome/Chrome Frame

jqGrid does not render correctly in Chrome/Chrome Frame

I updated today my Chrome to version 19, have reproduced the problem and made the corresponding quick&dirty fix:

I suggest to change the line of jqGrid code

isSafari = $.browser.webkit || $.browser.safari ? true : false;

to the following

isSafari = ($.browser.webkit || $.browser.safari) &&
    parseFloat($.browser.version)<536.5 ? true : false; // Chrome < version 19

The demo use the fix. The fixed version of jquery.jqGrid.src.js which I used in the demo you can get here.

I tested it in IE9 (v9.0.8112.16421), IE8 (8.0.6001.18702CO), Chrome 18.0.125.168, Chrome 19.0.1084.46, Safari 5.1.7 (7534.57.2), Firefox 12, Opera 11.62. In all the web browsers the demo has no horizontal scrollbars and it looks as following:

In the future it would be better to change the calculation of width of the grid more deep to have no direct dependency from any version number or web browser. I hope it will be possible if one would use more jQuery methods $.width and $.outerWidth in some places of jqGrid. In any way I hope that the above described fix would be already helpful for many jqGrid users.

UPDATED: I posted my suggestion to trirand as the bug report.

UPDATED 2: To be exactly there are three places in the code where are used the same $.browser.webkit || $.browser.safari construct as described above: inside setGridWidth, inside of getOffset, inside of calculation of the width of multiselect column, inside showHideCol and inside setGridWidth. The first three places uses isSafari variable. The last two places uses $.browser.webkit || $.browser.safari directly. One should replace in all the places the code

$.browser.webkit||$.browser.safari

to

($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5

So one should do this in three places:

1. at the definition of the isSafari (see me original post)
2. inside of showHideCol
3. inside of setGridWidth

You can download the fixed version of the jquery.jqGrid.src with all the fixes here. You can make the same changes in the code of jquery.jqGrid.src yourself if you have to use old version of jqGrid. To created minimized version for the production you can use any minimizer which you good know. I use for example Microsoft Ajax Minifier 4.0. Just install it and execute

AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js

As the result you will get jquery.jqGrid.min-fixed3.js which will be even smaller as original jquery.jqGrid.min.js. Even if you add the comment header to the file (see modified file) the file will be still smaller as original version of jquery.jqGrid.min.js.

After some iterations of my bug report and the improvements there are one more version of the fix where the method cellWidth was introduced:

cellWidth : function () {
    var $testDiv = $("<div class='ui-jqgrid' style='left:10000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),
        testCell = $testDiv.appendTo("body")
            .find("td")
            .width();
        $testDiv.remove();
        return testCell !== 5;
}

See here. If you prefer to follow the way you can do this also. In the case in all places where isSafari or $.browser.webkit || $.browser.safari (in showHideCol and setGridWidth) are used you can use $.jgrid.cellWidth() instead.

UPDATED 3: Today was published jqGrid 4.3.3 which contains the fix which I described above (the cellWidth method). So I recommend all to use the new version.

UPDATED 4: Google Chrome 20 uses WebKit 536.11. So everybody who can't use the last version of jqGrid with the fixed calculation of the width should use parseFloat($.browser.version)<536.11 (or some close) instead of parseFloat($.browser.version)<536.5 described at the beginning of the answer. Google Chrome 23 WebKit uses 537.11.

jqGrid 4.4.5 Grid column width rendering issue in Chrome

you can make the same condition here $.browser in jquery 1.9 using following code and use the same solution posted in the link

you can check the browser condition using below code.

jQuery.uaMatch = function( ua ) {
    ua = ua.toLowerCase();

    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie) ([\w.]+)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];

    return {
        browser: match[ 1 ] || "",
        version: match[ 2 ] || "0"
    };
};



matched = jQuery.uaMatch( navigator.userAgent );
     //browser = {};
     //var cursorType = evt.target.style.cursor;
       if(matched.browser.toLowerCase()=="mozilla")
        {
    }
else
{
}

other wise if you are referring jquery 1.9 and using 1.4 supported codes means u can refer jquery.migrate .js script file in your application.

http://blog.jquery.com/2013/02/16/jquery-migrate-1-1-1-released/

https://github.com/jquery/jquery-migrate/

Thanks,

Siva

jqGrid - columns padding issue in google chrome when use RTL

I can confirm, that jqGrid have some problems with column alignment in case of usage direction: "rtl". If you use height: "auto" option then I would recommend you to use additional CSS rule

.ui-jqgrid .ui-jqgrid-hbox-rtl { padding-left: 0 }

and include additionally include the line

this.grid.hDiv.scrollLeft = this.grid.bDiv.scrollLeft;

inside of loadComplete and resizeStop.

The problem is that padding-left: 0 can be used not in all situations. I described the approach how the problem could be solved in my posts to the issue.

I'm developing now new free version of jqGrid, which you can download from here. It contains fixes of to the problem which you described. I recommend you to try the version. It contains many bug fixes and the features like new iconSet: "fontAwesome" option which improves the look of jqGrid. See some demos at the end of the page. If you would describe me any bugs (in the issues part, or on the stackoveflow) or RTL specific problems (or suggestions to improve RTL look) I would try to improve RTL support in jqGrid.

JqGrid columns getting cut off in IE (scroll bar shows up) but fine (no scroll bar) in Firefox

I suppose that you have the same problem as I described in the bug report. In the case you should change the last line of the internal cellWidth function from

return testCell !== 5;

to

return Math.abs(testCell – 5) > 0.1;

You can do this in jquery.jqGrid.src.js or just try with the file. It fixed the problem with the wrong calculation of the grid width in my case.

---

Related Topics