Collapse and Expand methods do not work when calling them async

[Michael]

Please find the code below for a sample with 2 splitter components.

1st works fine.

2nd never shows the right pane.

This is done with v18.2.0.48

----

@page "/Splitter2"

@using Syncfusion.Blazor.Layouts

@using Syncfusion.Blazor.Buttons

<div class="tertios-page" style="height: 200px;">

    <SfSplitter @ref="sfSplitter1" Height="100%" SeparatorSize="2" Width="100%">

        <SplitterPanes>

            <SplitterPane Collapsible="true" CssClass="splitter-pane-1">

                <ChildContent>

                    <div>

                        <div class="content">

                            Content of left panel

                        </div>

                    </div>

                </ChildContent>

            </SplitterPane>

            <SplitterPane Collapsible="true" Collapsed="true" CssClass="splitter-pane-2">

                <ChildContent>

                    <div>

                        <div class="content">

                            Content of right panel

                        </div>

                    </div>

                </ChildContent>

            </SplitterPane>

        </SplitterPanes>

    </SfSplitter>

</div>

<div>

    <SfButton OnClick="@ExpandClick1"> Expand </SfButton>

    <SfButton OnClick="@CollapseClick1"> Collapse </SfButton>

</div>

<hr />

<div class="tertios-page" style="height: 200px;">

    <SfSplitter @ref="sfSplitter2" Height="100%" SeparatorSize="2" Width="100%">

        <SplitterPanes>

            <SplitterPane Collapsible="true" CssClass="splitter-pane-1">

                <ChildContent>

                    <div>

                        <div class="content">

                            Content of left panel

                        </div>

                    </div>

                </ChildContent>

            </SplitterPane>

            <SplitterPane Collapsible="true" Collapsed="true" CssClass="splitter-pane-2">

                <ChildContent>

                    <div>

                        <div class="content">

                            Content of right panel

                        </div>

                    </div>

                </ChildContent>

            </SplitterPane>

        </SplitterPanes>

    </SfSplitter>

</div>

<div>

    <SfButton OnClick="@ExpandClick2"> Expand </SfButton>

    <SfButton OnClick="@CollapseClick2"> Collapse </SfButton>

</div>

@code {

    private SfSplitter sfSplitter1;

    private SfSplitter sfSplitter2;

    private async Task ExpandClick1(MouseEventArgs args)

    {

        this.sfSplitter1.Expand(1);

    }

    private async Task CollapseClick1(MouseEventArgs args)

    {

        this.sfSplitter1.Collapse(1);

    }

    private async Task ExpandClick2(MouseEventArgs args)

    {

        await this.sfSplitter2.Expand(1);

    }

    private async Task CollapseClick2(MouseEventArgs args)

    {

        await this.sfSplitter2.Collapse(1);

    }

}

[Indrajith Srinivasan]

Hi Michael, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. Since the Collapsed property in the SfSplitter has two-way binding support in the below codeblocks it is configured as one-way binding, hence the reported issue occurs. We suggest you to use @bind-Collapsed to resolve the reported issue. We have also prepared a sample modifying the shared code blocks. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156866/ze/SfSplitter_Collapsed-1515751546  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith