Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
last column width grows when calling setGridWidth
18/01/2010
19:44
Avatar
pbor
Member
Members
Forum Posts: 33
Member Since:
01/09/2009
sp_UserOfflineSmall Offline

We track when the parent changes width and call setGridWidth to resize the grid to fit the parent.

There is a bug that causes the last column to grow in relative width every time you call setGridWidth.

18/01/2010
21:37
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

18/01/2010
22:54
Avatar
pbor
Member
Members
Forum Posts: 33
Member Since:
01/09/2009
sp_UserOfflineSmall Offline

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:

            this.widthDiv.bind('widthchange', function() {
                self.table.fluidGrid({example: this.widthDiv});
            });

fluidgrid is this small but very useful plugin:

http://code.google.com/p/codei.....d.fluid.js

20/01/2010
21:50
Avatar
pbor
Member
Members
Forum Posts: 33
Member Since:
01/09/2009
sp_UserOfflineSmall Offline

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>

22/01/2010
11:14
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

05/02/2010
18:37
Avatar
pbor
Member
Members
Forum Posts: 33
Member Since:
01/09/2009
sp_UserOfflineSmall Offline

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.

08/02/2010
12:10
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

25/02/2010
00:16
Avatar
sebabal
sebabal
Member
Members
Forum Posts: 5
Member Since:
19/05/2009
sp_UserOfflineSmall Offline

hi i was wondering if there are any fix for this problem?

regards,

sebastian

26/02/2010
21:30
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

26/02/2010
22:54
Avatar
pbor
Member
Members
Forum Posts: 33
Member Since:
01/09/2009
sp_UserOfflineSmall Offline

tony said:

Until now - no (sorry). There is is no appropriate fix for this bug.


What about the solution I proposed above? did you try and it does not work? I hope to have time to try it myself, but jqgrid internals are still a bit intimidating for me Smile

Thanks for all your work on jqgrid

27/02/2010
19:51
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

02/03/2010
14:53
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

02/03/2010
23:15
Avatar
pbor
Member
Members
Forum Posts: 33
Member Since:
01/09/2009
sp_UserOfflineSmall Offline

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.

03/03/2010
00:05
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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 Wink

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.

03/03/2010
00:39
Avatar
pbor
Member
Members
Forum Posts: 33
Member Since:
01/09/2009
sp_UserOfflineSmall Offline

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.

03/03/2010
00:48
Avatar
pbor
Member
Members
Forum Posts: 33
Member Since:
01/09/2009
sp_UserOfflineSmall Offline

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)

04/03/2010
19:14
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

Forum Timezone: Europe/Sofia

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.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information