Question

I have a datagrid control I am working on that uses a total of 4 tables to generate fixed column headers, column headers, fixed cells and cells (top-left, top-right, bottom-left, bottom-right with the bottom ones scrolling vertically and the right ones scrolling horizontally). The alignment between some of the tables (in this case the fixed cells [vertical] and the non-fixed column headers [horizontal]) must be synchronized with the table on scroll and the header-widths are calculated from hidden headers within the table holding the data. This works great even for very large (100k+ row) datasets – except when initially loaded. The table is dynamically generated (via an AJAX callback) and I’m looking for a method, preferably in JQuery to call a custom render() function that resizes headers after the table is created and initially rendered by the browser (just being inserted isn’t enough, it must be after the browser has handled all the text metric/border/padding/margin calculations and initially rendered the table so the proper widths can be pulled from it).

TL;DR: Need an event or some hack that will allow me to call a function after a table’s contents have been rendered for a table that has been created dynamically through DOM or JQuery calls (preferably not so hacked together as a setTimeout call).

Answer 1

Had to solve this by creating a setTimeout that called a function repeatedly checking for a change in size as below (some code excluded that isn’t directly related):

function Datagrid() {
    var _this = this; setTimeout(function () { _this.CheckAutoColumns(); }, 20);
}
function Datagrid_CheckAutoColumns() {
    if (this != null) {
        var render = false;
        for (var i = 0; i < this.Columns.length; i++) {
            if (this.Columns[i].__LastWidth != this.Columns[i].Container.width()) {
                render = true;
                break;
            }
        }
        if (render == true) { this.Render(); }
        if (this.Disposing === false) { var _this = this; setTimeout(function () { _this.CheckAutoColumns(); }, 20); }
    }
}
Datagrid.prototype.constructor = Datagrid;
Datagrid.prototype.CheckAutoColumns = Datagrid_CheckAutoColumns;