Query about javascript grid control scroll bar

[Durai]

Hi Team,

I have parent div with some height restriction and syncfusion javascript grid with 100% height. 
Expectation: I want to show the grid without vertical scroll bar when grid size is lesser than parent div.
And vertical scroll bar will show, when grid height is greater than parent div.

Vn1h13 (forked) (stackblitz.com)

[Ajith Govarthan]

Hi Durai, 

   

 Greetings from Syncfusion support. 

  

  Based on your requirement you want to hide the empty scroller displayed on the grid. Your requirement can be achieved by using the `dataBound` event of the EJ2 grid where you can call the`hideScroll` method to hide the scroll bar. 

  

Please refer the below code example. 

  

var grid = new ej.grids.Grid({  

  dataSource: [ 

    { OrderID: '1', CustomerName: 'XYZ' }, 

    { OrderID: '2', CustomerName: 'XYZ' }, 

    { OrderID: '3', CustomerName: 'XER' }, 

    { OrderID: '4', CustomerName: 'XYU' }, 

    { OrderID: '5', CustomerName: 'IOJ' }, 

    { OrderID: '6', CustomerName: 'XOP' }, 

    { OrderID: '7', CustomerName: 'XOO' }, 

  ], 

  dataBound: function (args) { 

    grid.hideScroll(); 

  }, 

  allowRowDragAndDrop: true, 

  selectionSettings: { type: 'Multiple' }, 

  height: '100%', 

  editSettings: { allowDeleting: true }, 

  columns: [ 

    { 

      field: 'OrderID', 

      headerText: 'Order ID', 

      width: 120, 

      isPrimaryKey: true, 

      textAlign: 'Right', 

    }, 

    { field: 'CustomerName', headerText: 'Customer Name', width: 135 }, 

  ], 

}); 

grid.appendTo('#Grid'); 

  

Sample: https://stackblitz.com/edit/vn1h13-hpruav?file=index.js 

  

  

Please refer the attached sample and revert for more queries. 

  

Regards, 

Ajith G.