Grid component within tabs that is part of a splitter does not show Horizontal bar when size to small splitter pane

[Tim Hartog]

Hi,

I have the following problem:

I have a component that holds a splitter. 

This right pane of the splitter holds a TimeLine Scheduler.

The left pane of the splitter holds a ejs-tab component.

Each ejs-tab has its own component with a grid.

Everything works fine except there is no horizontal scrollbar in the grid when the splitter is drawn to a width that is not wide enough to show all columns of the grid.

I tried to to change settings of width of the splitter, tab and/or grid. But somehow it is not showing the horizontal scrollbar when needed.

Hope this info / problem is clear enough.

Kind regards,

Bob

[Shalini Maragathavel]

Hi Bob, 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that the Grid did not show the Horizontal scrollbar when splitter size is adjusted. So, we have prepared a sample and tried to reproduce the issue but we unable to reproduce the mentioned issue at our end.  

Please check below sample and video demo for your reference, 

Sample: https://stackblitz.com/edit/angular-lcw2yv-adajde?file=default.component.ts 

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/https_angular-lcw2yv-adajde.stackblitz.io.webm-518495840.zip 

If you still face the issue please share the below details that will be helpful for us to a provide better solution. 

1)     Share your complete Grid rendering code.  

2)     If possible please replicate the problem with our above attached sample. 

3)     Please share your Syncfusion package version. 

Let us know if you have any concerns.

Regards,
Shalini M. 

[Tim Hartog]

Hello Shalini,

What I can see in my project is the following.

In the ejs-tab. Each tab has a child component.

In this component is an ejs-grid.

This component (and ejs-grid) does not get the width of the splitter part.

So if the splitter is set to 70% left and 30 percent right. The ejs-tab has a width of (for example) 800px, but the components underneath CSS width does not take over this size of the splitter and stays at more then 1024px.

Kind regards,

Bob

[Shalini Maragathavel]

Hi Bob,  

Sorry for the inconvenience caused.

Based on your query we suspect that you want to render the Grid within the tab’s width. You can achieve your requirement by setting the Grid width as 100%  as demonstrated in the below code snippet,  

<ng-template #content> 

<ejs-grid #grid2 [dataSource]='data1' allowPaging='true' width='100%' height="700px" [pageSettings]='pageSettings'> 

<e-columns> 

</e-columns> 

</ejs-grid>         

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/angular-lcw2yv-jbf536?file=default.html

If we misunderstood your requirement then please elaborate on it with pictorial or video demonstration(if possible) to understand it better. 

 

Regards, 

Shalini M.