jQuery Grid Plugin - jqGrid - Topic: last column width grows when calling setGridWidth

tony on last column width grows when calling setGridWidth

Thu, 04 Mar 2010 19:14:02 +0200

Hello,

Thanks.

This will stay for now as it is written. I will do some more experiments with this.

Best Regards

pbor on last column width grows when calling setGridWidth

Wed, 03 Mar 2010 00:48:50 +0200

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)

pbor on last column width grows when calling setGridWidth

Wed, 03 Mar 2010 00:39:10 +0200

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.

tony on last column width grows when calling setGridWidth

Wed, 03 Mar 2010 00:05:10 +0200

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

pbor on last column width grows when calling setGridWidth

Tue, 02 Mar 2010 23:15:13 +0200

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.

tony on last column width grows when calling setGridWidth

Tue, 02 Mar 2010 14:53:13 +0200

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

tony on last column width grows when calling setGridWidth

Sat, 27 Feb 2010 19:51:29 +0200

Hello,

I wil playthis Sunday with this.

Tony

pbor on last column width grows when calling setGridWidth

Fri, 26 Feb 2010 22:54:14 +0200

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

Thanks for all your work on jqgrid

tony on last column width grows when calling setGridWidth

Fri, 26 Feb 2010 21:30:12 +0200

Hello,

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

Thanks

Best Regards

Tony

sebabal on last column width grows when calling setGridWidth

Thu, 25 Feb 2010 00:16:31 +0200

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

regards,

sebastian

tony on last column width grows when calling setGridWidth

Mon, 08 Feb 2010 12:10:42 +0200

Hello,

Thanks. Will give a try.

Best Regards

Tony

pbor on last column width grows when calling setGridWidth

Fri, 05 Feb 2010 18:37:42 +0200

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.

tony on last column width grows when calling setGridWidth

Fri, 22 Jan 2010 11:14:57 +0200

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

pbor on last column width grows when calling setGridWidth

Wed, 20 Jan 2010 21:50:08 +0200

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>

        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>

pbor on last column width grows when calling setGridWidth

Mon, 18 Jan 2010 22:54:56 +0200

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

tony on last column width grows when calling setGridWidth

Mon, 18 Jan 2010 21:37:09 +0200

Hello,

Code please!

Best Regards

Tony

pbor on last column width grows when calling setGridWidth

Mon, 18 Jan 2010 19:44:58 +0200

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.