Splitter scroll

[Szoke]

Dear forum !

Splitting a DIV with a calculated height with a Splitter: We place a 100% high TAB element on the upper Splitter part, and a 100% high component as the content of the first TAB item. In the browser, the Scrollbar is connected to the upper Spitter element (scrolling down like this: the TAB elements and the toolbar connected to the grid disappear).

We want the scrollbar to only scroll the grid rows!

What can be the solution?

Thank you in advance for your help!

[Vinitha Jeyakumar]

Hi Szoke,

Using the information, you have provided, we have tried to replicate your use case scenario. but unfortunately, we didn't face any issues as you reported. we have also prepared a sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SplitterServer1002188254

Can you please share the details below?

• Issue reproducing video illustration.
• Entire code snippet.
• Are you using Grid control inside Tab.
• If possible, please share us with the issue reproducing runnable sample to further validate on our end.

Regards,

Vinitha

[Szoke]

Hi Vinitha.

Sorry for the late response, but I just got back. This would be the sample code:

@page "/"

@using Syncfusion.Blazor.Layouts

<div class="befoglalo">

    <SfSplitter Height="100%" Width="100%" Orientation="Orientation.Vertical">

        <SplitterPanes>

            <SplitterPane>

                <ContentTemplate>

                    <div> Top

                        <Syncfusion.Blazor.Grids.SfGrid ID="Grid1" TValue="Order" DataSource=Orders Height="100%" ></Syncfusion.Blazor.Grids.SfGrid>

                    </div>

                </ContentTemplate>

            </SplitterPane>

            <SplitterPane>

                <ContentTemplate>

                    <div> Bottom

                        <Syncfusion.Blazor.Navigations.SfTab>

                            <Syncfusion.Blazor.Navigations.TabItems>

                                <Syncfusion.Blazor.Navigations.TabItem>

                                <HeaderTemplate>First tab</HeaderTemplate>

                                    <ContentTemplate>

                                        <Syncfusion.Blazor.Grids.SfGrid ID="Grid2" TValue="EmployeeData" DataSource=Employees Height="100%"></Syncfusion.Blazor.Grids.SfGrid>

                                    </ContentTemplate>

                                </Syncfusion.Blazor.Navigations.TabItem>

                                <Syncfusion.Blazor.Navigations.TabItem>

                                <HeaderTemplate>Second tab</HeaderTemplate>

                                    <ContentTemplate>

                                        <Syncfusion.Blazor.Grids.SfGrid ID="Grid3" TValue="Order" DataSource=Orders Height="100%"></Syncfusion.Blazor.Grids.SfGrid>

                                    </ContentTemplate>

                                </Syncfusion.Blazor.Navigations.TabItem>

                            </Syncfusion.Blazor.Navigations.TabItems>

                        </Syncfusion.Blazor.Navigations.SfTab>

                    </div>

                </ContentTemplate>

            </SplitterPane>

        </SplitterPanes>

    </SfSplitter>

</div>

<style>

    .befoglalo {

        height: calc(100vh - 6.5rem);

    }

</style>

@code {

    public List<Order> Orders { get; set; }

    public List<EmployeeData> Employees { get; set; }

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 75).Select(x => new Order()

            {

                OrderID = 1000 + x,

                EmployeeID = x,

                Freight = 2.1 * x,

                OrderDate = DateTime.Now.AddDays(-x),

            }).ToList();

        Employees = Enumerable.Range(1, 75).Select(x => new EmployeeData()

            {

                EmployeeID = x,

                FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],

            }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public int? EmployeeID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

    public class EmployeeData

    {

        public int? EmployeeID { get; set; }

        public string FirstName { get; set; }

    }

}



And the desire would be for the Grids to be able to use their own scroll bar (use the space of the height given by the splitter).

Thank you in advance for your help!

[Vinitha Jeyakumar]

Hi Szoke,

Your reported issue can be resolved by setting Size and Min property to the Splitter pane and by setting Height property to the Grid control just like below,

Code snippet:

@using Syncfusion.Blazor.Layouts

@using Syncfusion.Blazor.Grids

<div class="befoglalo">

    <SfSplitter Height="700px" Width="100%" Orientation="Orientation.Vertical">

        <SplitterPanes>

            <SplitterPane Size="300px" Min="300px">

                <ContentTemplate>

                    <div> Top

                        <SfGrid ID="Grid1" TValue="Order" DataSource=Orders Height="200px" Width="100%"></SfGrid>

                   </div>

                </ContentTemplate>

           </SplitterPane>

            <SplitterPane Size="300px" Min="300px">

                <ContentTemplate>

                    <div> Bottom

                        <Syncfusion.Blazor.Navigations.SfTab>

                            <Syncfusion.Blazor.Navigations.TabItems>

                                <Syncfusion.Blazor.Navigations.TabItem>

                                <HeaderTemplate>First tab</HeaderTemplate>

                                    <ContentTemplate>

                                        <Syncfusion.Blazor.Grids.SfGrid ID="Grid2" TValue="EmployeeData" DataSource=Employees Height="200px"></Syncfusion.Blazor.Grids.SfGrid>

                                    </ContentTemplate>

                                </Syncfusion.Blazor.Navigations.TabItem>

                                <Syncfusion.Blazor.Navigations.TabItem>

                                <HeaderTemplate>Second tab</HeaderTemplate>

                                    <ContentTemplate>

                                        <Syncfusion.Blazor.Grids.SfGrid ID="Grid3" TValue="Order" DataSource=Orders Height="200px"></Syncfusion.Blazor.Grids.SfGrid>

                                    </ContentTemplate>

                                </Syncfusion.Blazor.Navigations.TabItem>

                            </Syncfusion.Blazor.Navigations.TabItems>

                        </Syncfusion.Blazor.Navigations.SfTab>

                    </div>

                </ContentTemplate>

            </SplitterPane>

        </SplitterPanes>

    </SfSplitter>

</div>

Regards,

Vinitha

[Szoke]

Hi Vinitha !

But it would be the requirement to fill the Browser ViewPort 2 Grid Responsively:

[Vinitha Jeyakumar]

Hi Szoke,

Currently, we are validating the queries you have reported. We will provide you with further details as soon as possible.

Regards,

Vinitha

[Buvana Sathasivam]

Hi Szoke,

Thank you for your patience.

You can meet your requirement by incorporating the styles listed below into your application. Please find the below code and attached sample for your reference.

<div class="befoglalo">

 

    <SfSplitter Height="100%" Width="100%" Orientation="Orientation.Vertical">

 

        <SplitterPanes>

 

            <SplitterPane Size="50%">

 

                <ContentTemplate>

 

                    <div style="height: 100%"> Top

 

                        <Syncfusion.Blazor.Grids.SfGrid ID="Grid1" TValue="Order" DataSource=Orders Height="100%"></Syncfusion.Blazor.Grids.SfGrid>

 

                    </div>

 

                </ContentTemplate>

 

            </SplitterPane>

 

            <SplitterPane Size="50%">

 

                <ContentTemplate>

 

                    <div style="height: 100%"> Bottom

 

                        <Syncfusion.Blazor.Navigations.SfTab Height="100%">

 

                            <Syncfusion.Blazor.Navigations.TabItems>

 

                                <Syncfusion.Blazor.Navigations.TabItem>

 

                                <HeaderTemplate>First tab</HeaderTemplate>

 

                                    <ContentTemplate>

 

                                        <Syncfusion.Blazor.Grids.SfGrid ID="Grid2" TValue="EmployeeData" DataSource=Employees Height="100%"></Syncfusion.Blazor.Grids.SfGrid>

                                    </ContentTemplate>

 

                                </Syncfusion.Blazor.Navigations.TabItem>

 

                            </Syncfusion.Blazor.Navigations.TabItems>

 

                        </Syncfusion.Blazor.Navigations.SfTab>

 

                    </div>

 

                </ContentTemplate>

 

            </SplitterPane>

 

        </SplitterPanes>

 

    </SfSplitter>

 

</div>

 

<style>

 

    .befoglalo {

 

        height: calc(100vh - 6.5rem);

 

    }

    .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {

        overflow: hidden !important;

    }

    .e-tab .e-content>.e-item {

        height: 100%;

    }

</style>

 

Regards,

Buvana S

Attachment: SplitterServer_1f0c685b.zip