Is it possible to adjust the slider grid with the maximum size to the minimum range to match the number of rows?

Question

I am creating a website where the grid can have several lines or there can be many.

When there are only a few lines, a lot of space is wasted in the grid on an empty space.

Ideally, I would like to be able to set the minimum height and maximum height, and then automatically set my own grid size within this range depending on the number of rows.

I had a search and found that it was possible to make the grid automatically the size of the number of rows, but it seems to be incompatible with the search call.

var gridOptions = { autoHeight:true }; 

How to get slickgrid div to resize table

It also seems that you cannot set the maximum height; it will continue to expand until everything is displayed.

Does anyone have any solutions or suggestions?

Answer 1

I think you need to adjust the height of the surrounding DIV instead of resizing the grid. SlickGrid height is calculated based on the DIV height at which it is initialized. Thus, theoretically, you can change the height of the DIV based on the amount of data you have, and then manually initialize the grid.

See this link for an example in explicit grid initialization: http://mleibman.github.com/SlickGrid/examples/example-explicit-initialization.html

Hope this helps!

Answer 2

This is how I handle three different cases of "height":

• Height grows dynamically and limited by some maxHeight based on # visible lines
• Height grows dynamically and is not limited (the page will scroll)
• The height is fixed and static (and can show spaces if only 1 line, for example)

I mainly use autoHeight for case No. 2, and for case No. 1 (but only for case No. 1, if the number of lines is less than the desired number of visible lines). For case # 1, I use rowHeight and my own invention maxVisibleRows , so that the developer says that "this table will grow to 5 rows before scrolling, and the height of the scrollable area is equal to the sum of the heights of 5 rows." For case # 3, this is just a parent height constraint, which is the default behavior for SlickGrid.

Code example:

  var parentContainer = document.getElementById("slick_container"); var uniqueRecordIdField = "id"; var rows = [{id: 1, product: "Bells"}, {id: 2, product: "Whistles"}]; // data (array of rows) var maxVisibleRows = 3; // user can see 3 rows without scrolling var HeightOptions = { Static:0, Auto:1, Max:2 }; // "enum" for illustrative purposes var HeightOption = HeightOptions.Auto; // dev would set this somehow var options = { ... }; // slick grid options object var parentHeight = ""; switch (HeightOption) { case HeightOptions.Static: parentHeight = "400px;" // (hardcoded default/example; probably should allow override) options.autoHeight = false; // do not use slickgrid auto height break; case HeightOptions.Max: // use # of rows to determine whether table should be scrollable if (maxVisibleRows > 0 && rows.length > maxVisibleRows) { var arbitraryHeightPadding = 14; // style hack for viewport // constrain height to only show X rows parentHeight = ((options.rowHeight * maxVisibleRows) + arbitraryHeightPadding) + "px"; options.autoHeight = false; // do not use slickgrid auto height } else { // use slickgrid autoHeight to allow height to shrink / grow parentHeight = ""; options.autoHeight = true; } break; case HeightOptions.Auto: default: parentHeight = ""; // or could use 'inherit' or 'auto' or whatever probably options.autoHeight = true; // use slickgrid auto height to grow indefinitely break; } // set height of slick grid parent (container) parentContainer.style.height = parentHeight; // do normal slick grid rendering stuff... DataView.onRowCountChanged.subscribe(function (e, args) { Grid.updateRowCount(); Grid.render(); }); DataView.beginUpdate(); DataView.setItems(rows, uniqueRecordIdField); DataView.endUpdate();