Grid not rendering fully on page load in Chrome

[jcamorgan]

On loading a new grid with data in a DataView, the ViewPort does no completely fill the grid space (vertically). See screenshot here: http://prntscr.com/1fikdx

This only seems to be a chrome issue. I have tested it in the latest FF an IE.

I have built in a button to call the grid.resizeCanvas() method, and then the viewPort fills the grid.

Here's the grid initialization code: var users; var orgList;

if (users == null) {
    console.log("Users = null");
    if (loadUsers == null) {
        userService.getUserUsers()
            .then(function (data) {
                users = data;
            });
    } else {
        users = loadUsers;
    }
}

var grid;
var dataView;

// Set the height for the detail panel $('#bodyDetail').css('height', $(window).height() - 135);

var columns = [];

var checkboxSelector = new LaNet.CheckboxSelectColumn({
    cssClass: "slick-cell-checkboxsel"
});

columns.push(checkboxSelector.getColumnDefinition());

columns.push(
    {id: "idUser", name: "ID", field: "idUser", width: 40, editor: Slick.Editors.Text},
    {id: "username", name: "Username", field: "username", width: 150, editor: Slick.Editors.Text},
    {id: "email", name: "Email", field: "email", width: 320, editor: Slick.Editors.Text},
    {id: "idOrganisation", name: "Organisation", width: 110, field: "idOrganisation", formatter: Slick.Formatters.OrgComboFormatter, editor: Slick.Editors.OrgComboEditor},
    {id: "strTel", name: "Telefon", field: "strTel", width: 60, editor: Slick.Editors.Text},
    {id: "isActive", name: "Active", field: "isActive", width: 25, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox},
    {id: "SubOrganisations", name: "Sub-Organisations", field: "SubOrganisations", width: 25, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
);

var options = {
    autoEdit: true,
    editable: true,
    enableAddRow: false,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    enableColumnReorder: false,
    editCommandHandler: queueAndExecuteCommand,
    forceFitColumns: true
};

// Initialize grid var dirtyRows = [];

dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#dataGrid", dataView, columns, options);
var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));

grid.setSelectionModel(new Slick.CellSelectionModel());
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
grid.registerPlugin(checkboxSelector);

grid.onCellChange.subscribe(function (e, args) {
    args.item.isDirty = true;
    var selector = "div[name=row" + grid.getActiveCell().row + "]";
    dirtyRows.push(selector);
    $(selector).addClass("dirty");
    safeApply($scope);
});

grid.onActiveCellChanged.subscribe(function (e, args) {
    console.log("onActiveCellChanged");
});

// Make the grid respond to DataView change events.
dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

dataView.setPagingOptions({pageSize: 20});

// Fix the grid size according to the window width resizeGrid($(window).width() - $('#sideBar').width() - 40);

dataView.beginUpdate();
dataView.setItems(users);

// dataView.setFilter(myFilter); // dataView.setFilterArgs(0); dataView.endUpdate(); grid.render(); // End initialize grid

[mleibman]

Obviously I can't debug this, but the grid actually initializes in the constructor, so your call to resizeGrid() for the width should be before it. (The grid.render() call is unnecessary.)

[jcamorgan]

Thanks for the reply! It's not a horizontal filling of the window that's the problem. It is the viewPort not completely filling the space allocated for the grid canvas. I have created a plunk to demonstrate the issue:

http://plnkr.co/edit/Yw7CuWojbyMQlPGSRSU4?p=preview

It works fine in FF and IE but does not like Chrome. Clicking the resizeCanvas button calls this method on the grid, which does the job of fixing the viewport.

[kanngard]

You have to change the CSS links in your plunk, they are pointing to an inaccessible server.

[jcamorgan]

Right... sorry. Updated them now.

[mleibman]

There seems to be some sort of a timing issue with loading/parsing CSS. After setting the height of the '#dataGrid', it reads it as a different value, but it all works when debugging. I don't know much about how AngularJS initializes things to give you a better answer. Adding 'setTimeout(function() { grid.resizeCanvas(); }, 0);' at the end of the initialization does fix it though.

[jcamorgan]

Seems pretty strange... I had already added the timeout workaround but was kind of hoping there was a more fundamental fix. Still, as long as it works! Thanks!

[amaalej]

Hi, Any solution since then? Cordially