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:

  <div style="position:relative; overflow:visible; width:600px; margin:25px 0 0 0;">

    <div id="myGrid" style="width:100%;overflow:visible; min-height:100px; max-height:300px;"></div>
  </div>

  <div class="options-panel">
    <h2>Demonstrates:</h2>
    <ul>
      <li>adding basic keyboard navigation and editing</li>
      <li>custom editors and validators</li>
      <li>auto-edit settings</li>
    </ul>

    <h2>Options:</h2>

    <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button>
    &nbsp;
    <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button>
  </div>


<script  type="text/javascript" language="javascript" src="./js/slickGrid/lib/firebugx.js"></script>
<!-- <script src="js/slickGrid/lib/jquery-1.7.min.js"></script>-->
<script src="js/slickGrid/lib/jquery-ui-1.8.16.custom.min.js.php"></script>
<script src="js/slickGrid/lib/jquery.event.drag-2.0.min.js"></script>

<script src="js/slickGrid/slick.core.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="js/slickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="js/slickGrid/slick.formatters.js"></script>
<script src="js/slickGrid/slick.editors.js"></script>
<script src="js/slickGrid/slick.grid.js"></script>

<script>
  function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
      return {valid: false, msg: "This is a required field"};
    } else {
      return {valid: true, msg: null};
    }
  }

  var grid;
  var data = [];
  var columns = [
    {id: "id", name: "Id", field: "id", width: 20, minWidth: 20, maxWidth:20, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true},
    {id: "date", name: "Date", field: "date", minWidth: 80, editor: Slick.Editors.Date, sortable: true},
    {id: "venue", name: "Venue", field: "venue", width: 120, minWidth:120, editor: Slick.Editors.Text, sortable: true},
    {id: "event", name: "Event", field: "event", width: 180, minWidth:180, editor: Slick.Editors.Text, sortable: true},
    {id: "description", name: "Additional", field: "desc", width: 180, minWidth:180, editor: Slick.Editors.Text, sortable: true},
    {id: "visible", name: "Visible", field: "visible", width: 20, minWidth: 20, cssClass: "cell-effort-driven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, sortable: true}
  ];
  var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: true,
    multiColumnSort: true
  };

  $(function () {
    for (var i = 0; i < 6; i++) {
      var d = (data[i] = {});

      d["id"] = i;
      d["date"] = "06/31/2012";
      d["venue"] = "Sample Venue";
      d["event"] = "Sample Event";
      d["desc"] = "$45 Door";
      d["visible"] = (i % 5 == 0);
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);

    grid.setSelectionModel(new Slick.CellSelectionModel());

    grid.onAddNewRow.subscribe(function (e, args) {
      var item = args.item;
      grid.invalidateRow(data.length);
      data.push(item);
      grid.updateRowCount();
      grid.render();
    });

    grid.onSort.subscribe(function (e, args) {
      var cols = args.sortCols;

      data.sort(function (dataRow1, dataRow2) {
        for (var i = 0, l = cols.length; i < l; i++) {
          var field = cols[i].sortCol.field;
          var sign = cols[i].sortAsc ? 1 : -1;
          var value1 = dataRow1[field], value2 = dataRow2[field];
          var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
          if (result != 0) {
            return result;
          }
        }
        return 0;
      });
      grid.invalidate();
      grid.render();
    });
  })
</script>

<hr />EOP

What I want is for my slickGrid to gather data, then have the div automatically resize to encompass the updated grid. Currently it appears that the div size must be set statically? If I don't set values for the height of div "myGrid", it just sets it's height to 0. I want the div to expand with the size of the grid it loads.

The documentation for slickgrid on gitHub ( https://github.com/mleibman/SlickGrid/wiki/_pages ) is extremely limited (to be fair the author acknowledges this). I've also had a lot of trouble with this topic on google also.

I know it's software specific, but really hoping we have some slickGrid Guru's out there as this tool seems amazing!

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

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.

Answer 3

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' );