REACT Grid - Horizontal Scrollbar is not shown when data grid columns span out of view

[Rasheed Basheer]

REACT Grid - Horizontal Scrollbar is not shown when data grid columns span out of view. As a side effect of this, the vertical scroll bar is show off the screen as well. Also, if the user tries to scroll right by selecting a cell and clicking the right arrow key, the container layout is changed.

Example:

https://codesandbox.io/s/serene-franklin-v4w42

Since i'm using flexbox, I need a solution that is reactive to the size change of the browser window.

FYI: using chrome:

Thanks

[Dhivya Rajendran]

Hi Rasheed, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and by default when apply width and height as 100 % then grid element fill its parent container and its necessary to specify the parent container width as static value. Please refer the below updated sample and documentation for more information.  

Sample : https://codesandbox.io/s/restless-glade-msvy8 

Help documentation : https://ej2.syncfusion.com/react/documentation/grid/scrolling/#responsive-with-parent-container 

Regards, 

R.Dhivya 

[Rasheed Basheer]

Thanks for the fast response.

Setting the parent height/width breaks the Flexbox "fill" remaining space features. 

The idea here is, if the data grid is suppose to fill the remaining space of the application, and the user changes the browser size, the grid should adjust whether the browser height or width changes to shrink or expand.

In my real world application, the top most hosting control has a display of absolute positioning. About 7 or more divs down exist the datagrid. All the divs up the hierarchy are flexbox with height and width set to 100%. Other surrounding controls (divs) have a set width and sometimes a set height, which then requires the datagrid control to be agile enough to fill in the remaining space. All other controls and grids  (by other 3rd party vendors) work fine filling in the remaining space. The only control that doesn't is syncfusion data grid.

Is there a solution to this problem that doesn't involve setting a hardcoded height/width to a parent div? 

Thanks

[Pavithra Subramaniyam]

Hi Rasheed  

 

Thanks for your update. 

 

In Essential JavaScript 2, responsive Grid is rendered based on the Parent container width and height. So it is essential to set explicit height for the parent container. However we have modified the sample as grid to adapt the remaining space by setting the width as “auto”. Please refer to the below documentation link and sample link for more information. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/scrolling/ 

 

Sample               : https://codesandbox.io/s/holy-meadow-qrsd3 

 

Regards, 

Pavithra S.