Efficient way to measure longest cell in table column

Question

I am trying to determine the widest content in HTML table cells of fixed width. Currently I am using an external sizer DIV:

 <div id="xdivSizer" style="position:absolute;display:inline;visibility:hidden">
 </div>

in this code

var iColWidth = 0;

for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    oDivSizer.innerHTML = oDataTable.rows[Y].cells[0].innerHTML;
    iColWidth = Math.max(oDivSizer.offsetWidth, iColWidth)
}

It works, but extremally slow, even when the table has only 100 rows or so. It looks like main offender is calculating of offsetWidth. Is there a more efficient way to achieve this?

I am doing this because I need to resize that table column to the size of the widest data. If there're other better way, that would be great as well.

(More precisely I am trying to implement "column autosize" feature in Infragistics WebHierarchicalDataGrid control for ASP.NET - columns need to take the widest width Max(Header Width, Data Width) while maintaining fixed header/pager positions).

Thanks!

Answer 1

Rewriting the DIV contents will trigger copious redraws, applications of your CSS, DOM manipulations etc..

Try putting all of the cells from the column in the DIV all at once, separated by line breaks -- or each in it's own sub-DIV. The width of the resulting DIV should be that of the longest cell.

var html = [];
for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    html.push(oDataTable.rows[Y].cells[0].innerHTML);
}

oDivSizer.innerHTML = html.join("<br />");
var iColWidth = Math.max(oDivSizer.offsetWidth, 1);

Another possibility is a simple heuristic based on each cell's innerText.

var iColWidth = 0;
for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    var w = Math.floor(oDataTable.rows[Y].cells[0].innerText.length * 11.5);
    iColWidth = Math.max(w, iColWidth);
}

And yet another possibility, as indicated in my last comment, is to redraw only the TD in the column that consumes the greatest area.

var a = 0;
var n = null;
for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    var _a = oDataTable.rows[Y].cells[0].offsetHeight * oDataTable.rows[Y].cells[0].offsetWidth;
    if (Number(_a) > a) {
      a = _a;
      n = oDataTable.rows[Y].cells[0];
    }
}
oDivSizer.innerHTML = n.innerHTML;
var iColWidth = Math.max(oDivSizer.offsetWidth, 1);

Or, taking it a step further, divide the calculated area of each cell by the number of BR's found to account for "intentionally" tall cells.

var a = 0;
var n = null;
for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    var _a = oDataTable.rows[Y].cells[0].offsetHeight * oDataTable.rows[Y].cells[0].offsetWidth;
    var brs = oDataTable.rows[Y].cells[0].getElementsByTagName('br');
    _a = Number(_a) / brs.length;
    if (_a > a) {
      a = _a;
      n = oDataTable.rows[Y].cells[0];
    }
}
oDivSizer.innerHTML = n.innerHTML;
var iColWidth = Math.max(oDivSizer.offsetWidth, 1);

But, as the complexity of the fuzzy approaches grows and the result becomes more accurate, you can expect performance to decline.

As a side note, if this auto-sizing is being applied as the result of a user interaction, I'd suggest performing the sizing calculations / processes immediately after the table is available to be analyzed, rather than waiting for the user to initiate the resize.

Answer 2

By default the WebDataGrid will size the content area of the grid to its contents when there is no width specified on the column and on the grid itself. The headers then get sized to the data portion. This will work well whether the grid is in a container or outside of a container.

Since the data portion of the grid is sized correctly, all we need to do is size the columns to what is larger, the width of the first cell in the grid or a measurement for displaying the full header. The following JavaScript will do this:

function resizeGrid(grid) {
    var textWidthChecker = document.getElementById('textWidthChecker');
    var columns = grid.get_columns();
    var widths = new Array(columns.get_length());
    var row = grid.get_rows().get_row(0);
    var newGridWidth = 0;
    for (var colIdx = 0; colIdx < columns.get_length(); colIdx++) {
        var col = columns.get_column(colIdx);
        textWidthChecker.innerHTML = col.get_headerText();
        var cellElement = row.get_cell(colIdx)._element;
        if (!col.get_hidden()) {
            if (textWidthChecker.offsetWidth > cellElement.offsetWidth) {
                // 8 for padding in header.
                newGridWidth += textWidthChecker.offsetWidth + 8;
                widths[colIdx] = textWidthChecker.offsetWidth + 8;
            } else {
                widths[colIdx] = cellElement.offsetWidth;
                newGridWidth += cellElement.offsetWidth;
            }
        }
    }
    newGridWidth += columns.get_length() * 16; // added for padding on cells
    var gridElement = grid.get_element();            
    gridElement.style.width = newGridWidth + 'px';
    for (var colIdx = 0; colIdx < columns.get_length(); colIdx++) {
        var col = columns.get_column(colIdx);
        col.set_width(widths[colIdx] + 'px');
    }
}

The above requires that there be a span with id “textWidthChecker” for this to work using the same CSS classes as the header of the grid for the font:

<div style="height: 0px;overflow: hidden;" class="igg_HeaderCaption ig_Control">
    <span id="textWidthChecker"></span>
</div>

This approach works well when the resizeGrid function is called from the client side Initialize method as long as the grid is within a container that is wide enough for the grid when the headers are resized.

If the grid is in a container that is smaller this will fail because the WebDataGrid sets its width internally and this affects the sizing of the columns. To get around this the resizeGrid function needs to be called earlier though there isn’t any event for this.

Specifically the resizeGrid needs to be called during the initialize function of the grid between the calls to _initializeObjects and _adjustGridLayout. To do this you can modify the prototype of the the WebDataGrid to replace the _adjustGridLayout with another one that calls resizeGrid and calls the original _adjustGridLayout:

var adjustGridLayoutFunction = $IG.WebDataGrid.prototype._adjustGridLayout;
$IG.WebDataGrid.prototype._originalAdjustGridLayout = adjustGridLayoutFunction;
$IG.WebDataGrid.prototype._adjustGridLayout = function () {
    resizeGrid(this);
    this._originalAdjustGridLayout();
}; 

Note that modifying the prototype affects every grid on the page so if you wanted to control which grid this applied to you would need to add conditional logic in the new _adjustGridLayout function. For example:

if (this.get_id() == "WebDataGrid1")
    resizeGrid(this);

To prevent wrapping of the text within the grid you also need to use css for the ItemStyle:

.noWrapCellStyle {
    white-space: nowrap;
}

For this to work the desired width should be set on the container of the grid and the grids width should remain empty:

<div style="width:300px;overflow: auto;">
    <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="450px" AutoGenerateColumns="True" ItemCssClass="noWrapCellStyle">
    </ig:WebDataGrid>
</div>

If you are using row selectors, then the calculations will need to be updated in the logic that I am providing to account for the row selector.