AutoSize
Rows
The FlexGrid automatically adjusts row heights to fit their content by setting the autoRowHeights property of the FlexGrid class to true. Row heights are updated whenever the grid is bound, cells are edited, or columns are resized. This feature is particularly useful for grids with columns that contain wrapped text (wordWrap = true), ensuring that all content is properly visible.
The following example code shows how to automatically adjust the size of rows of a FlexGrid control:
// show the data in a grid with autoRowHeights
new FlexGrid('#theGrid', {
autoRowHeights: true,
autoGenerateColumns: false,
columns: [
{ binding: 'id', header: 'ID', width: 60, isReadOnly: true },
{ binding: 'countries', header: 'Countries', width: '*', wordWrap: true },
{ binding: 'sales', header: 'Sales'},
{ binding: 'expenses', header: 'Expenses' }
],
itemsSource: data
});Auto-size Rows Asynchronously
Auto-sizing rows asynchronously improves performance by resizing rows in the background without interrupting the user interface in the FlexGrid. This ensures that large datasets or complex grids load and update smoothly, maintaining a responsive experience for users.
The following example code demonstrates how you can auto-size rows asynchronously to improve the performance. The code listens to events and auto-sizes only rows that are currently in view and have not been auto-sized yet.
// show the data in a grid with fixed height
var theGrid = new wjGrid.FlexGrid('#theGrid', {
autoGenerateColumns: false,
columns: [
{binding: 'id', header: 'ID', minWidth: 60, isReadOnly: true },
{binding: 'countries', header: 'Countries', width: 150, wordWrap: true },
{binding: 'sales', header: 'Sales' },
{binding: 'expenses', header: 'Expenses' }
],
// auto-size all rows when they are loaded
loadedRows: (s, e) => {autoSizeRowsAsync(s);
},
// auto-size all rows when a wrapping column is resized
resizedColumn: (s, e) => {
if(s.columns[e.col].wordWrap)
{ autoSizeRowsAsync(s);}
},
// auto-size a single row when a wrapping cell is edited
cellEditEnded: (s, e) => {
if(s.columns[e.col].wordWrap)
{autoSizeRowsAsync(s, e.row);
}
},
// autosize rows within view that haven't been autosized yet
scrollPositionChanged: (s, e) => {
var vr = s.viewRange;
for(var r = vr.topRow; r <= vr.bottomRow; r++)
{
if (s.rows[r].height == null)
{
s.autoSizeRows(r, r);
//console.log('autosized row ' + r)
}
}
},
// load some data
itemsSource: data
});
// reset row heights to null and raise scrollPositionChanged event
// to auto-size the rows that are in view and haven't been auto-sized
function autoSizeRowsAsync(grid, rowIndex) {
if(rowIndex != null)
{
grid.rows[rowIndex].height = null;
}
else
{
grid.rows.forEach(row => {row.height = null;});
}
setTimeout(() => {grid.onScrollPositionChanged();});
}
// synchronous auto-size (to show how long it would take)
document.getElementById('asSync').addEventListener('click', () => {
var start = Date.now();
theGrid.autoSizeRows();
alert('AutoSized all rows in ' + (Date.now() - start) + 'ms');
});Columns
The FlexGrid control automatically resizes columns to fit their content using the autoSizeColumns method, which is triggered by events that impact the content size.
The following example code allows you to input long entries into the "Countries" column, automatically resizing it to accommodate the new content:
// show the data in a grid with fixed height
var theGrid = new FlexGrid('#theGrid', {
autoGenerateColumns: false,
columns: [
{binding: 'id', header: 'ID', minWidth: 60, isReadOnly: true },
{binding: 'countries', header: 'Countries' },
{binding: 'sales', header: 'Sales', minWidth: 80 },
{binding: 'expenses', header: 'Expenses', minWidth: 80 }
],
loadedRows: function (s, e) {
s.autoSizeColumns();
},
cellEditEnded: function (s, e) {
s.autoSizeColumn(e.col);
},
rowEditEnded: function (s, e) {
s.autoSizeColumns();
},
itemsSource: getData(),
allowResizing: 'None'
});
theGrid.autoSizeColumns();Feedback
Submit and View Feedback For