Splitter with Chart and DataGrid

[Xamarin Master]

I am trying to create a Splitter that is 100% of the browser with a chart on top and a data grid on bottom.  I want the chart to fill 100% of the top of the splitter and the data grid to fill 100% of the bottom of the splitter.  When I drag the splitter divider, I want the chart and grid to resize automatically.

When I try this, the chart does not resize when I drag the divider.  Instead I just get a scrollbar.

[Vinitha Jeyakumar]

Hi Xamarin,

We have checked your requirement to resize the chart and grid content when we resize the splitter bar and it can be achieved by calling refresh method for the both the chart and grid controls using the OnResizeStop event of Splitter control.

Code snippet:

<SfSplitter CssClass="in-splitter" Height="700px" Width="100%" Orientation="Syncfusion.Blazor.Layouts.Orientation.Vertical" SeparatorSize="4">

                <SplitterPanes>

                    <SplitterPane Size="50%" Min="60px">

                        <ContentTemplate>

                           <SfChart @ref="chartObj">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

                        </ContentTemplate>

                    </SplitterPane>

                    <SplitterPane Size="50%" Min="60px">

                        <ContentTemplate>

                             <SfGrid DataSource="@Orders" @ref="gridObj">

                <GridColumns>

                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

                    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

                    <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

                </GridColumns>

            </SfGrid>

                        </ContentTemplate>

                    </SplitterPane>

                   

                </SplitterPanes>

                <SplitterEvents OnResizeStop="@OnResizeStopHandler"></SplitterEvents>

            </SfSplitter>

@code{

    SfChart chartObj;

    SfGrid<Order> gridObj;

    public void OnResizeStopHandler(ResizingEventArgs args)

    {

        this.chartObj.RefreshAsync();

        this.gridObj.Refresh();

    }
}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SplitterServer-1683316359

API Link: https://blazor.syncfusion.com/documentation/splitter/events#onresizestop

Regards,

Vinitha.