Splitter - Update index of splitterpane to move pane left/right or up/down

[Praveen D]

Look like we can add panes using API

public Task AddPaneAsync(SplitterPane paneProperties, int index)
​

I would like update the index of splitter panes based on a button click or other event is there any way to update index of existing index ? this will help user move the content with splitter up or down along with expand and collapse

thanks

[UdhayaKumar Duraisamy]

To add a new pane to the Blazor Splitter at a specific index, you can use the AddPaneAsync method. Below is an example demonstrating how to achieve this:

@using Syncfusion.Blazor.Layouts

@using Syncfusion.Blazor.Buttons

<SfSplitter @ref="splitterObj" Height="200px" Width="600px">

    <SplitterPanes>

        <SplitterPane Size="190px">

            <ContentTemplate>

                <div>

                    <div class='content'>Pane 1</div>

                </div>

            </ContentTemplate>

        </SplitterPane>

        <SplitterPane Size="190px">

            <ContentTemplate>

                <div>

                    <div class='content'>Pane 2</div>

                </div>

            </ContentTemplate>

        </SplitterPane>

    </SplitterPanes>

</SfSplitter>

<SfButton Content="Add Pane" @onclick="@Add"></SfButton>

<style>

    .content { padding: 9px; }

    #defaultbtn { margin-top: 15px; }

</style>

@code {

    SfSplitter splitterObj;

    private SplitterPane addingPane = new SplitterPane()

    {

        Size = "190px",

        Content = "New Pane",

        Min = "30px",

        Max = "250px"

    };

    private async Task Add()

    {

        await this.splitterObj.AddPaneAsync(addingPane, 1);

    }

}

In this example:

• The AddPaneAsync method is used to insert a new pane at the specified index (1 in this case).
• The addingPane object defines the new pane's properties, including Size, Content, Min, and Max.
• A button is provided to trigger the addition of the new pane dynamically.

For additional details, refer to the following resources:

• Split Panes in Blazor Splitter Component | Syncfusion
• Sample: https://blazorplayground.syncfusion.com/embed/VDBpsMLeWoDmYalk?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5