how to show/hide vertical scrolbar automatically in slickgrid

Question

Basically i am trying to insert scrollbar to slickgrid in my application. Here I am initializing the slickgrid and loading it on popup open. Issue is, when the rows are mininum (i.e one for example) the scroll bar appears when overflow-y is set to scroll. How to make the vertical scroll bar hide when the number of rows are lesser than the height of the given div and appear when the rows exceed the fixed height? Please find the code below.

<td id="popupView" style="padding-left:10px;float:left">
<a href="#" onclick="popupView()" style="color:blue;" >slickgrid </a></td>

Onclick of "slickgrid" a popup opens which will load slickgrid that is initialized below (javascript for grid is assumed to have initialized):

<div id="slickgridGrid" style="height:99%;width:100%;border:1px solid lightgray;overflow-y:scroll;" >

The overflow-y property is mentioned for appearance of vertical scrollbar in grid,which will appear even when a single row appears. Please help me resolve the problem. Thank you in advance.

Answer 1

var gridOptions = { autoHeight:true };

you need to set the autoHeight option and then the page scrolls according to the height of the grid. You can also set a min-height for the surrounding div to avoid a small grid when there is no data.