Forum
21:37
Moderators
30/10/2007
Hello,
Code please!
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.
22:54
01/09/2009
Yeah, you are right... it's kind of hard to extract a minimal test case 🙂
Anyway, here is at least the code I am using for the resizing. I'll try to also make a standalone testcase, but it may take a bit
this is the jquery code I use to track the chane of width of the container
jQuery.event.special.widthchange = {
setup: function() {
var self, oldw, neww;
self = this;
oldw = $(self).width();
$(self).data('widthchange_timer',
setInterval(function () {
neww = $(self).width();
if (neww !== oldw) {
oldw = neww;
jQuery.event.handle.call(self, {type:'widthchange'});
}
}, 200)
);
},
teardown: function() {
clearInterval( $(this).data('widthchange_timer'));
}
};
this is how I attach it to my jqgrid:
self.table.fluidGrid({example: this.widthDiv});
});
fluidgrid is this small but very useful plugin:
21:50
01/09/2009
ok, I now created a small testcase
by the time the timeout is removed the last column is wider then the first two
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Testcase
</title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all">
<link rel="stylesheet" href="ui.jqgrid.css" type="text/css" media="all">
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="grid.locale-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jqGrid.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
var grid = $('#theGrid');
grid.jqGrid({
datatype:'clientSide',
altRows:true,
colNames:['Name', 'Side', 'Power'],
colModel:[
{ name:'name', index: 'name' },
{ name:'side', index: 'side' },
{ name:'power', index: 'power' } ],
viewrecords: true,
});
grid.addRowData("1", {name:"Luke", side:"Good", power:"6"});
grid.addRowData("2", {name:"Vader", side:"Dark", power:"9"});
grid.addRowData("3", {name:"Han", side:"meh?", power:"0"});
var width = 800;
var id;
id = setInterval(function () {
width -= 5;
if (width < 100)
clearInterval(id);
grid.setGridWidth(width);
}, 300);
});
</script>
</head>
<body>
<table id="theGrid" class="scroll"></table>
</body>
</html>
11:14
Moderators
30/10/2007
Hello,
Thanks for the example and the test case provided.
Yes, I see the problem (bug) and confirm it.
Will try to correct it.
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.
18:37
01/09/2009
I have been looking again at this problem and the issue is due to the following code in setGridWidth:
...
if(this.hidden === false && !this.fixed){
cw = Math.floor((aw)/($t.p.tblwidth-tw)*this.width);
this.width =cw;
...
Since you are using "floor" all sizes are rounded down the nearest int and the remainder gets added to the last column: when repeating this process many times this effect grows every time causing the issue we are seeing.
What do you think of the following idea: when first calculating the size of each col, store the colWidth/totalWidth ratio of each column in a float. When resizing the grid, the colwidth is calculated by doing floor(newTotalWidth * colRatio). This way the proportion between the width of each column would remain stable over time even when calling setGridWidth many times.
12:10
Moderators
30/10/2007
Hello,
Thanks. Will give a try.
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.
21:30
Moderators
30/10/2007
Hello,
Until now - no (sorry). There is is no appropriate fix for this bug.
Thanks
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.
19:51
Moderators
30/10/2007
Hello,
I wil playthis Sunday with this.
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.
14:53
Moderators
30/10/2007
Hello,
I have fixed the issue (I hope). When I try to paly with your recommendation it seems that this not work properly.
The reason is that when we have only initiall calculation of the ratio after resizing columns and calling the setGridWidth the width of the columns have the initial state.
Also I use now round which seems to work ok. In my tests the remaining pixels for the last visible column is maximum +(-) 2, note that in some cases it can be + in other it can be -.
You can test the new recalculation.
The fix is here:
http://github.com/tonytomov/jq.....2d86c62b14
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.
23:15
01/09/2009
Hi Tony, yes when I played with this I also saw that round() does seem to fix the issue most of the time, but I do not think it is a good idea: even if in most cases things tend to "work out", using round could mean that the final width of the table may be larger of some pixel of the the reuqested width.
For instance suppose you have 15 columns of 5 pixels and they all get a new width 5.6, so the total width is 15*5.6=84 pixels, you end up with the first 9 columns taking 15*6=90 pixels, now even making the last column of width 0, the table is larger than 84 pixels, which would cause big problems if the table has to fit in a parent that has with 84!
The reason is that when we have only initiall calculation of the ratio after resizing columns and calling the setGridWidth the width of the columns have the initial state
I am not sure I understand what you mean here... let me try to explain what I had in mind in pseudocode
initial size:
3 columns of with 10, 8, 2, total width 20
store ratios (stored in float values for each col)
first col ratio = 10/20 = 0.5, sec col ratio = 8/20 = 0.4, third col ratio = 2/20 = 0.1
table resized to width 30
first col size = floor(30 * 0.5) = 15
sec col size = floor(30 * 0.4) = 12
last col = 30 - 15 - 12 = 3
table resized to width 35
first col size = floor(35 * 0.5) = 17
sec col size = floor(35 * 0.4) = 14
last col = 35 - 17 - 14 = 4
etc
As you see the at each setGridWidth, the width of the column has these properties:
1) it depends only on the initial proportion of the widths and not on the previous width hence approximation errors do not grow at each resize
2) width is guaranteed to be equal to the total width set
Best regards and as usual huge thanks for jqgrid.
00:05
Moderators
30/10/2007
Hello,
Here are my tests,
initial size:
3 columns of with 10, 8, 2, total width 20
store ratios (stored in float values for each col)
first col ratio = 10/20 = 0.5, sec col ratio = 8/20 = 0.4, third col ratio = 2/20 = 0.1
table resized to width 30
first col size = floor(30 * 0.5) = 15
sec col size = floor(30 * 0.4) = 12
last col = 30 – 15 – 12 = 3
…
After first resize to 30 try to resize the first column – not the grid to let say to 20px,
then set the new grid width and see the result
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.
00:39
01/09/2009
I didn't realize there was an api to set a single col width, which api is that?
what does happen today when setting only the first col from 15 to 20? does the whole grid grow of 5 px or is the 5 px removed from the other columns?
I guess when setting a single column, you just need to renormalize the ratios. how to do that depends on the desired result, in particular if setting a single col width changes the whole table width or if the width difference is redistributed among other columns.
00:48
01/09/2009
I realized that maybe you simply mean resizing manually in the browser (not with an api): that should make it easier since I guess if you enlarge a column you just remove width from the nearby column, so
col1_ratio = old_ratio * (new_width / old_width) = 0.5 ( 20 / 15)
col2_ration = 0.4 * ((12 - 5) / 12)
19:14
Moderators
30/10/2007
Hello,
Thanks.
This will stay for now as it is written. I will do some more experiments with this.
Best 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.
Most Users Ever Online: 715
Currently Online:
79 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66