Overview

The FlexGrid control automatically adjusts its height to fit its content by default. However, to maintain a consistent and organized layout, you may want to limit the grid's height. This ensures that content remains easily accessible and visually appealing. You can achieve this by setting the height in CSS. Once the height is fixed, the grid will display scrollbars when needed and virtualize the content to enhance performance.

The following example demonstrates two FlexGrid controls: one with a fixed height of 150 pixels and the other with an automatic height.

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    var data = [];
    for (var i = 0; i < 50; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
    // show the data in a grid with fixed height
    var theGridFixed = new wjGrid.FlexGrid('#theGridFixed', {
        itemsSource: data
    });
    // show the data in a grid with auto height
    var theGridAuto = new wjGrid.FlexGrid('#theGridAuto', {
        itemsSource: data
    });
}    

You can limit the height of the FlexGrid control using the following stylesheet:

#theGridFixed.wj-flexgrid {  max-height: 150px;}

Sizing FlexGrid using Mouse

The FlexGrid control allows users to resize columns by dragging the right edge of the column header cells or by double-clicking the right edge to auto-size the columns. You can customize this behavior using the `allowResizing` property of the FlexGrid class. This property enables you to prevent resizing entirely or allow users to resize columns by dragging the right edge of any cell. This is particularly useful for grids without column headers.

The following code example allows resizing columns from header edges as well as from column edges by setting the allowResizing property to ColumnsAllCells:

// show the data in a grid with fixed height
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        itemsSource: data,
        allowResizing: 'ColumnsAllCells'
    });