Grid _rec_bottom height

[claude-carrier]

When I click save on the toolbar, the grid resizes and the tr with id ending in _rec_bottom is given a height proportional to the number of records being shown in the grid. This leaves a large blank area at the bottom of the grid. If I reload the grid, refresh the page, add a new record or change which fields are being displayed, the grid resizes correctly. It is only when saving that the error occurs. Any idea as to how I can get it to resize correctly?

[claude-carrier]

I traced the problem to line 6250 where the height of the last row is being set.

        // first/last row size
        var h1 = (start - 1) * obj.recordHeight;
        var h2 = (buffered - end) * obj.recordHeight;
        if (h2 < 0) h2 = 0;
        tr1.css('height', h1 + 'px');
        tr2.css('height', h2 + 'px');   <- This line sets the _rec_bottom (line = bottom) height to the height of the table thus doubling the height of the grid and leading to "empty space" in the grid.

Additional info:

• The grid is configured with fixedBody: false
• When I hard code h2 to 0, the grid works fine.

[vitmalina]

I rarely use fixedBody: false. Can you create JS fiddle with the problem.

[claude-carrier]

Vitali,

I have tried reproducing the issue in JSFiddle without success. You can see it here: http://jsfiddle.net/claude_carrier/sL64bLuk/

The above differs from the actual implementation in two ways: 1) The "Food Items" data is hard coded in JSFiddle whereas it is loaded via an AJAX function in reality but I don't see that as an issue. 2) The URL property for the grid is commented out in JSFiddle. I'm not familiar enough with JSFiddle to know if I can configure it any better than this.

I've attached some images that may be helpful. They include screen shots for before and after clicking save along with corresponding DOM Elements screen shots.

Thanks,

Claude

[TinyZzh]

i have the same problem.

just w2grid.add(); t'm trying add a empty record and inline edit it.

[TinyZzh]

i found something maybe helpful.

when i try config w2grid.url to load data from remote data source. the bug will be reproduce. config the "url" not null.

Just use the demo : Grid Demo 9

$('#grid').w2grid({
    ....
    url: "../remoteDataSource.php",
    ...
});

[TinyZzh]

before post record data to remote server, user add new local record and inline edit. The remote records count is empty or less than w2grid.records.length.

    ...
    scroll: function (event) {
        ...
        if (end > this.total) end = this.total;   //  when the remote data source return total records count is less than local in browser. The bug reproduce.
       // Fixed : if (end > this.total) end = Math.max(this.total, this.records.length);
        ...
        var h2 = (buffered - end) * obj.recordHeight;// result : h2 > 0
        ....
        tr2.css('height', h2 + 'px');//  reproduce the bug.
    }

[mrg2001]

There is a sample how to do this, http://w2ui.com/web/demos/#!grid/grid-21. I do not think it works with the remote data source, but the principle should be the same. You can use grid.load() method, which keeps data source local. Or you can set grid.url to null when user clicked "add new" button and after he provided input and clicked save, you can push it to the server and then restore grid.url.

I hope it helps. I will close the issue if I do not hear from you.

[mpf82]

I have the same problem with a tree-like grid, if I load the data from a remote source and have grid.url set.

If I add the following code after the data has been loaded from the remote source the empty line will disappear, but removing the url is not an option.

    setTimeout(function(){
        grid.url = "";
        grid.refresh();
    }, 1000);

Update 2017-10-23: Setting total=... to the correct value on the returned server data fixed the problem.

[mohahn]

Maybe related to #854 ?

[kimseeyea]

function addRecord(){ var g = w2ui['myGrid'].records.length; w2ui['myGrid'].add({ recid: g + 1, fname: '1', lname: '2', email: '4', sdate: '5' },true); w2ui.myGrid.total = w2ui.myGrid.total+1; <== total change }