How to get slickgrid div to resize table

Question

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

I have 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 

I want my slickGrid to collect data and then automatically resize the div to enable the updated grid. Currently it turns out that the div size should be set statically? If I do not set the height of the div "myGrid" , it just sets the height to 0. I want the div to expand with the size of the loaded mesh.

The documentation for slickgrid on gitHub ( https://github.com/mleibman/SlickGrid/wiki/_pages ) is extremely limited (to be honest, the author acknowledges this). I also had problems with this topic on Google.

I know that this software is specific, but actually hope that we have some kind of slickGrid guru, because this tool seems amazing!

Answer 1

To achieve this, you can use the autoHeight option.

  options = { ... autoHeight: true }; 

Contains a div to hold the entire grid, avoiding the need for a scroll bar.

You can find an example here .

Answer 2

I suggest adding the following code in onpagingInfoChanged

 dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { //...... ///****************************************************** var divSize = 2 + (options.rowHeight * (pagingInfo.pageSize +1)); $("#myGrid").css( 'height' , divSize+'px' ) grid.resizeCanvas() ///******************************************************* }); 

Being a little lazy, I added 2 px to the height to ensure that the VScrollbar does not appear, but I'm sure you can find something more pleasant.

Answer 3

Unfortunately, autoHeight and paging cannot be used together. If you want to use paging, you can automatically adjust the height of the table as follows (be sure to do this BEFORE providing 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' );