jQuery Grid Plugin - jqGrid - Topic: fixing grid width calculation

OlegK on fixing grid width calculation

Tue, 05 Apr 2011 18:19:32 +0300

Hi Tony,

I found out that the last version of code at the end of showHideCol work not correct. To fix the problem one should simplify the code inside of if(fndh===true) to the following

if(fndh===true) {
   if($t.grid.width!==$t.p.tblwidth) {
   $($t).jqGrid("setGridWidth",$t.p.shrinkToFit===true?$t.grid.width:$t.p.tblwidth,true);
   }
}

Best regards
Oleg

OlegK on fixing grid width calculation

Thu, 31 Mar 2011 19:47:32 +0300

OK I see now. You merged the fix more quickly as I posted my comments here. 🙂

Do you read my comment in github to the changes? It seems to me that the change without the line

if(String(ts.p.height).toLowerCase() === "auto") { ts.p.height = "100%"; }

is not work (see demos).

If you'll find the time to look the suggestion how to fix id duplicates in the pager let me know.

Best regards
Oleg

tony on fixing grid width calculation

Thu, 31 Mar 2011 19:32:44 +0300

Thanks Oleg.

I have merged the fixes.

I prefer to discuss the changes first and then to make the changes.

The chang from the link you provide is already done.

Regards

Tony

OlegK on fixing grid width calculation

Thu, 31 Mar 2011 19:03:29 +0300

I posted my suggestions in GitHub here.

Best regards
Oleg

P.S. If the way is better for you I could make all bug fixes or feature requests with the code in GitHub in the same way. I can additionally post in the Bug forum only my comments to the suggested changes. Schould I post for example this bug report also in the same way?

OlegK on fixing grid width calculation

Thu, 31 Mar 2011 17:48:55 +0300

OK I will do this in GitHub.

If I past the text in the forum I always verify and modify in HTML mode, but I found one more strange behavior. Till you posted your reply, the strikethrough text was correctly displplayed. After you posted the answer, the strikethrough text become not more strikethrough but are displyed in another color.

Regards
Oleg

tony on fixing grid width calculation

Thu, 31 Mar 2011 17:13:42 +0300

Oleg,

Please do the changes in GitHub.

To delete a text open the post switch to HTML mode and enter the del tag

Thanks

Tony

OlegK on fixing grid width calculation

Thu, 31 Mar 2011 17:05:40 +0300

Hi Tony!

I want mention, that now some texts in the code which was displayed as strikethrough (deleted) are displayed now as black. All lines with tw variable in my code are strikethrough (deleted).

It is very strange what the text editor (or the forum) do.

Oleg

tony on fixing grid width calculation

Thu, 31 Mar 2011 16:45:48 +0300

Hello,

Thanks Oleg, I will look an test your changes right now and will write you for the ~~result~~

Best Regards

Tony

OlegK on fixing grid width calculation

Sun, 27 Mar 2011 12:53:40 +0300

Hello Tony,

last time you are probably too busy because I receive no feedback from you about my last posts. Nevertheless one more bug with the corresponding fix:

I analysed some problems with wrong width calculation and found out three main reasons for that:

The width calculation in setColWidth function has some small bugs. There are very close code in setGridWidth which works much better and some problems existing in setColWidth are fixed here.
On all non-webkit webbrowsers the column width set to the column (from width option of colModel) will be interpret as inner witdth (without border). So if the grid has default setting shrinkToFit:true then the width value of all non-fixed colModel will be imediataly decreased even if there are enough free space for the grid. So from one side the width value of colModel to set inner width of columns, but then change the value as if one set the outer width.
If the grid has shrinkToFit:true option, in the calculation of the shrinked column size will be used only non-hidden columns. The original column sie from the colModel definition will be ovewritten. If later one make some initially hidden column visible one recalculate the width of every column one more time. Now one use the current reduced size of initially visible columns and compared it with unchanged width of initially hidden column. In the way the proportions between columns will be distorted. I suggest at the begining to save the original value of width property of colMadel items in another property widthOrg and use always the property in the calculations of the shrinked width of columns. In the way the proportions between column widths will stay allways the same as one defined in colMadel independend on the order in which the columns will become visible.

I prepared the corresponding bug fix with changes in setColWidth , ShowHideCol and setGridWidth functions which I will post later today (about 20 lines of code should be changed).

Tony, in which form you desire that I post the changes: here or in github? If I post it in github it will be easy to make exactly this changes, but if I post my suggestions here you can easier to make some changes in the code.

-----------------------------

OK, Tony here are my suggestions:

Changes in the function setColWidth: Line 1868:

var initwidth = 0, brd=ts.p.cellLayout, vc=0, lvc, scw=ts.p.scrollOffset,cw,hs=false,aw,tw=0,gw=0,

after the line 1872-1877 shold be done following:

if(typeof this.hidden === 'undefined') {this.hidden=false;}
cw = intNum(this.width,0);
this.widthOrg = cw; // save the original column width
if(this.hidden===false){
   initwidth += cw+brd;
   if(this.fixed) {
   tw += cw;
   gw += cw+brd;
   } else {

The line 1884 should be deleted:

if (ts.p.shrinkToFit === false) {initwidth += brd*cl;}

The line 1899 should be changed:

cw = Math.round(aw*this.width/(ts.p.tblwidth-brd*vc-gw));

The line 1914 should be also changed:

ts.p.tblwidth = initwidth+cr+vc*brd+gw;

Changes in the function ShowHideCol: Line 2789-2791:

showHideCol : function(colname,show) {
return this.each(function() {
var $t = this, fndh=false, brd=$.browser.safari? 0: $t.p.cellLayout, cw;

Line 2805 soll be replaced to the follwoing lines

cw = (this.widthOrg? this.widthOrg: parseInt(this.width,10)) + brd;
if(show == "none") { $t.p.tblwidth -= cw;} else {$t.p.tblwidth += cw;}

and the lines 2811-2820 (the boby of the if(fndh===true)) to the following lines:

if($t.p.shrinkToFit===true && !isNaN($t.p.width) && $t.grid.width!==$t.p.tblwidth) {
   $($t).jqGrid("setGridWidth",$t.p.tblwidth,true);
} else {
   $("table:first",$t.grid.hDiv).width($t.p.tblwidth);
   $("table:first",$t.grid.bDiv).width($t.p.tblwidth);
   $t.grid.hDiv.scrollLeft = $t.grid.bDiv.scrollLeft;
   if($t.p.footerrow) {
   $("table:first",$t.grid.sDiv).width($t.p.tblwidth);
   $t.grid.sDiv.scrollLeft = $t.grid.bDiv.scrollLeft;
   }
}

In the body of hideCol and showCol functions the function name ShowHideCol should be replaced to the showHideCol:

hideCol : function (colname) {
return this.each(function(){$(this).jqGrid("showHideCol",colname,"none");});
},
showCol : function(colname) {
return this.each(function(){$(this).jqGrid("showHideCol",colname,"");});
},

Changes in the function setGridWidth: Line 2880 sholuld be changed to

initwidth = 0, brd=$t.p.cellLayout, lvc, vc=0, hs=false, scw=$t.p.scrollOffset, aw, gw=0, tw=0,

The lines 2903-2906 to

cw = this.widthOrg? this.widthOrg: parseInt(this.width,10);
initwidth += cw+brd;
if(this.fixed) {
tw += cw;
gw += cw+brd;
} else {

The lines 2926 should be replaced to the next two lines:

cw = this.widthOrg? this.widthOrg: parseInt(this.width,10);
cw = Math.round(aw*cw/($t.p.tblwidth-brd*vc-gw));

and the line 2946 to

$t.p.tblwidth = initwidth+cr+vc*brd+gw;

It's all. In many places the value vc*brd+gw will be used: the total width of border of all visible columns (vc*brd) plus the total width of fixed visible columns (gw). One can define one variable like fixedGridWidthPart for the value and use it instead of vc*brd+gw expression.

Moreover if one would make a little more changes in the code one could make it free from cellLayout parameter. The idea is to fill th elements with the width value from the colModel for all visable columns and place the corresponding DOM elements in grid.headers.el before calling of setColWidth. Then inside of setColWidth one could just use jQuery.outerWidth for calculating of the full grid width (totalWidth below) and fixedGridWidthPart:

var totalWidth=0, outerWidth, totalVariableWidth=0, fixedGridWidthPart=0, cm, th,
i=0, headers=mygrid[0].grid.headers, l=headers.length, colModel = ts.p.colModel;

for (;i<l; i++) {
   th = headers[i].el;
   if (th.style.display !== "none") {
   outerWidth = $(th).outerWidth();
   totalWidth += outerWidth;
   fixedGridWidthPart += cm.fixed? outerWidth: outerWidth - cm.width; //? $(th).width()
   }
}

I don't made the corresponding changes to make changes in small steps and test all carefully.

Additionally it would be nice to share the parts of code for width calculation and column shrinking between setGridWidth and setColWidth functions.

Best regards
Oleg