jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

fixing width calculation of the grid in Google Chrome 19

16/05/2012
18:52

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hallo Tony,

I have updated today my Chrome to version 19 and could reproduce the problem described here. I wrote my suggestions in my answer on the question. I post it here too.

As quick fix of the problem one can change the line

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

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

It's quick and dirty solution of cause, but how the demo demonstrate the fix works in all browsers in which I tested it.

Best regards
Oleg

17/05/2012
02:39

JMac

Member

Members

Forum Posts: 6

Member Since:
02/05/2012

Offline

Thanks Oleg - fixed most of my problem! I still get it on some of my grids though - seems to be those with grouping.

17/05/2012
09:56

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Oleg,

As usual – Thanks.

IMHO the better if we replace

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

with

var testcell = $("<div class='ui-jqgrid'><table class='ui-jqgrid-btable' style='width:"+ts.p.cellLayout+"px;'><tr class='jqgrow'><td style='width:"+ts.p.cellLayout+"px;'></td></tr></table></div>").find("td").width(),

isSafari = ( ts.p.cellLayout != testcell );

This is better since it is unknown that with the next release it will be back.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

17/05/2012
12:48

gabbosam

Member

Members

Forum Posts: 6

Member Since:
31/01/2011

Offline

tony said:

Hello Oleg,

As usual – Thanks.

IMHO the better if we replace

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

with

var testcell = $("<div class='ui-jqgrid'><table class='ui-jqgrid-btable' style='width:"+ts.p.cellLayout+"px;'><tr class='jqgrow'><td style='width:"+ts.p.cellLayout+"px;'></td></tr></table></div>").find("td").width(),

isSafari = ( ts.p.cellLayout != testcell );

This is better since it is unknown that with the next release it will be back.

Best Regards

Tony

Hi tony,

the fix above must be have done into setGridWidth and ShowHideCol functions.

those functions use $.browser.webkit || $.browser.safari condition....

My fix is:

Store into a parameter isSafari flag. ts.p.isSafari = isSafari;
use that param in setGridWidth and ShowHideCol functions

Hope this helps

Bye

Gabriele

17/05/2012
13:00

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thanks. Fixed in GitHub using another approach, but the result is the same.

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

17/05/2012
13:02

gabbosam

Member

Members

Forum Posts: 6

Member Since:
31/01/2011

Offline

tony said:

Hello,

Thanks. Fixed in GitHub using another approach, but the result is the same.

Regards

Of course! Great!

Bye

Gabriele

17/05/2012
16:17

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hallo Tony,

I named my suggestion at the beginning as quick and dirty solution, so I full agree that it would be fine to find in the future more better way. Nevetheless I don't think that the code which you wrote above will work correctly.

The first problem with above code is that ts.p.cellLayout can be set to 0. So the width of the table will be also 0. You fixed already the problem in the code of cellWidth function which can be find in the code of jqGrid on the github. The function contain the following code now:

cellWidth : function () {
var testcell = $("<div class='ui-jqgrid'><table class='ui-jqgrid-btable' style='width:5px;'>" +
"<tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>").find("td").width(),
ret = ( testcell != 5);
testcell = null;
return ret;
}

I think that the $.jgrid.cellWidth() function returns always false. To be sure I tested it in Chrome 18 and verify that it is really so. The problem is that one uses disconnected DOM fragment. So the jQuery.width() will just get the value from the CSS style. If you would replace at the end of expression for testcell from .find("td").width() to .width() you will get 0 as the result (div has width 0). If you would remove style='width:5px;' from table element of the expression and use .find("table").width() you will get 0 too.

I think that testing (feature detection) is in general the better way. It will be possible to implement, but I think it will be need more large changes in jqGrid. I suppose that one could use jQuery.width for example for all calls from the first row, sum all the widthes and set the table width based on the value. The way has advantage that it will be used the real table (grid), so even if the user added some additional CSS classes which increase for example padding in the cells or even if the CSS used grid id only, the approach will work. The main disadvantage of the approach is the creating of the grid inside of hidden div. For example if one have jQuery UI tabs and want to create grid on the tab which currently hidden, than I suppose that all widthes will return 0.

In my original I suggested to use parseFloat($.browser.version). The main idea was to provide a solution which work correctly in Chrome and which work exactly as before on all other browsers. We can't test the new version in all other old browsers. So I wanted to have minimal changes for all other browsers. It was just pragmatical way.

Probably one can improve the way by using something like

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

One can change the value of old isSafari variable so that no changes for Safari will be done:

isSafari = ($.browser.webkit || $.browser.safari) &&
(window.navigator.userAgent.toLowerCase().indexOf('chrome') < 0 ||
parseFloat($.browser.version)<536.5) ? true : false;
// if Webkit and not Chrome or Chrome, but version < 19

Currently Safari 5.1.7 use more old version of Webkit. The variable window.navigator.userAgent is on my computer

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5

for Chrome 19 and

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

for Safari 5.1.7. If one will see that the same problem as Chrome 19 will be have the nex version of Safari one could ajust the calculation of isSafari variable to for example the original value which I suggested.

Later if one will find better and safe way one can make more changes, but I think that your current suggestion Tony works not correct.

Best regards
Oleg

17/05/2012
20:23

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Oleg,

Thanks. The function is fixed. Tested with 18 and 19 Chrom versions - return diffrent results

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

17/05/2012
23:54

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Like corrently mention Justin (see here) the code still work incorrectly if the page has some existing <td> element on the page. I posted my suggestion in the comment. In any way we are very close to fixing of the problem.

Best regards
Oleg

18/05/2012
09:45

gabbosam

Member

Members

Forum Posts: 6

Member Since:
31/01/2011

Offline

OlegK said:

Like corrently mention Justin (see here) the code still work incorrectly if the page has some existing <td> element on the page. I posted my suggestion in the comment. In any way we are very close to fixing of the problem.

Best regards
Oleg

Hi to all,

i'm using jqGrid 3.8.2, but i've done a backporting of some functions of 4 version (setGridWidth, ShowHideCold, setColWidth), and i tested the original fix of tony (without lastest change) in Chrome 10, 18 e 19 without problem.

Bye

Gabriele

18/05/2012
15:49

alexandrem

New Member

Members

Forum Posts: 1

Member Since:
18/05/2012

Offline

I downloaded the commit on github but fixes only body, the header is unaligned

18/05/2012
16:46

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hi alexandrem,

You could see on the demo like this one that the fix do work. If you can provide the demo which use new code and work incorrectly then one can improve the fix. If I read just "it works not at me" I fill that I speak with a child. Sorry, but it's so. You are not the only person who posted me such kind of issues. I beleve you that there are more problems as fixed now, but without having test case which reproduce the problem we can't fix it.

So in the future I will just ignore any such posts or e-mails where no code are posted and no test case is provided. Sorry, bur I see no other way.

Best regards
Oleg

25/05/2012
06:51

JMac

Member

Members

Forum Posts: 6

Member Since:
02/05/2012

Offline

The bug has reappeared in Chrome 20 Beta beta 20.0.1132.11. Iit reports the following:

User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11

I'm guessing 536.11 is evaluating as < 536.5 due to numeric vs text comparison causing the patch not to be operative?

25/05/2012
09:03

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Thank you for information about Chrome 20 beta. I used information from wikipedia where (at least till now) one find that Chrome 20 has 536.6 instead of 536.11. So in my implementation of the fix one should use probably something like <536 instead of <536.5. It's interesting whether the same problem will exist in the next version of Safari and so it's really the change in Webkit.

If one uses the approch suggested by Tony (and implemented already in the current code of jqGrid on github) the problem with Chrome 20 beta is not exist.

Best regards
Oleg

P.S. @Tony: It would be fine to publish new version of jqGrid which would include all the last fixes.

25/05/2012
14:00

JMac

Member

Members

Forum Posts: 6

Member Since:
02/05/2012

Offline

Thx Oleg - I was using the version you posted on stackoverflow, didn't grasp that the github version used a different approach. Will go get that one.

31/08/2012
04:28

dreamcatcher

New Member

Members

Forum Posts: 1

Member Since:
31/08/2012

Offline

Problem still continue for subgrid and treegrid.

02/11/2012
17:44

Albertz

New Member

Members

Forum Posts: 1

Member Since:
02/11/2012

Offline

Hello,

I am using jqGrid 4.4.1 and have this problem, not only on any specific browser, all four of them (although in different ways.)

Is this really related to the rendering engine?

As I see it, the code contains the line:

if(rowInd===0) {
result += "width: "+grid.headers[pos].width+"px;";

I am guessing, but does this code take the width from the definition? This code writes the width to the header cell and later on the total of the columns' width is written to the various layers.

Then in the ui.jqgrid.css there are definitions for ".ui-jqgrid .ui-jqgrid-htable TH" and ".ui-jqgrid TR.jqgrow TD" which add 2px to the left and the right of the cells and then there is 1px for the collapsed border of the table. I found this because I have one table with 13 columns and one table with three columns, the rendered difference (of the cells) is 50 pixels i.e. 5 pixels per column.

The written total width for the various layers however doesn't seem to take into account the padding in the css. This discussion about getting values from the css may help: Stackoverflow.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
28 Guest(s)

Currently Browsing this Page:
1 Guest(s)