How to get slickgrid div to resize with size of table

Question

I hope we have some users familiar with slickGrid seeing as how StackOverflow uses it also :)

I have a HTML containing my slickGrid as follows:

  <         


        

Answer 1

You can use the autoHeight option to achieve this.

  options = {
    ...
    autoHeight: true
  };

The containing div will expand to hold the entire grid avoiding the need for a scrollbar.

You can find an example here.

Answer 2

Unfortunately, autoHeight and paging cannot be used together. If you want to use paging, you can auto-adjust the height of the table as follows (be sure to do this BEFORE rendering the data):

// Determine the total width of the grid div element
var gridWidth = 0;
for( i in columns )
{
    if( columns[i].width != null && columns[i].width != 0 )
    {
        // Use the specified width
        gridWidth += columns[i].width;
    }
    else
    {
        // If the column width is not specified, or is zero, try to use the default column width

        if( columns[i].defaultColumnWidth == null ) // If default also does not exist
            gridWidth += 80;                        // Pick an arbitrary default width (could replace with CSS property)
        else
            gridWidth += columns[i].defaultColumnWidth;
    }
}


// Calculate the height of the Div by adding the values of the header row height and the row height * # rows
var rowH = (options.rowHeight != null ? options.rowHeight : 25); // If no rowHeight is specified, use the default size 25 (could be set by CSS)
var headerH = 0;

// First, determine whether to account for the header row
if( options.showHeaderRow == null || options.showHeaderRow == true )
{  
    // If so, use specified height, or default height
    if( options.headerRowHeight == null )
        headerH = 25;
    else
        headerH = options.headerRowHeight;        
}

// Set the table size
var divSize = (json.length * rowH) + headerH + 1;
$j("#myGrid").css( 'height' , divSize+'px' )
             .css( 'width'  , gridWidth+'px' );

Answer 3

I suggest adding the following code to the onpagingInfoChanged

dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
//......

///******************************************************
    var divSize = 2 + (options.rowHeight * (pagingInfo.pageSize +1)); 
    $("#myGrid").css( 'height' , divSize+'px' )
    grid.resizeCanvas()
///*******************************************************

});

Being a bit lazy, I added the 2 px to the height to ensure the VScrollbar doesn't appear but I'm sure you can figure out something more pleasing.