How to get SplitterPane's actual size on resizing？

[luyan]

I couldn't find any event and property about it.

[Indrajith Srinivasan]

Hi luyan,

Greetings from Syncfusion support,

We have validated your reported query. We have a Resizing event in splitter, in which you can get the updated paneSize based on the index of the pane. We have also prepared a sample tracing the splitter size in the output window.

Sample: https://www.syncfusion.com/downloads/support/forum/153254/ze/Splitter_resizing1474446573

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.ResizingEventArgs.html#Syncfusion_Blazor_Layouts_ResizingEventArgs_PaneSize

Please let us know if the solution helps or whether we misunderstood your requirement ?

Regards, 

Indrajith 

[luyan]

Thank you.

The code works fine, but when I embeded another splitter in the content, It looks like get wrong data in the event args.

Could you try this code:

@page "/"

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Layouts

<div id="pane-heading">Horizontal Splitter</div>

<SfSplitter Height="400px" Width="100%">

    <SplitterPanes>

        <SplitterPane>

            <ContentTemplate>

                <div> Left Pane </div>

            </ContentTemplate>

        </SplitterPane>

        <SplitterPane>

            <ContentTemplate>

                <SfSplitter Height="400px" Width="100%" Orientation="Syncfusion.Blazor.Layouts.Orientation.Vertical">

                    <SplitterEvents Resizing="@onResized"></SplitterEvents>

                    <SplitterPanes>

                        <SplitterPane>

                            <ContentTemplate>

                                <div> Left Pane </div>

                            </ContentTemplate>

                        </SplitterPane>

                        <SplitterPane>

                            <ContentTemplate>

                                <div> Middle Pane</div>

                            </ContentTemplate>

                        </SplitterPane>

                        <SplitterPane>

                            <ContentTemplate>

                                <div> Right Pane</div>

                            </ContentTemplate>

                        </SplitterPane>

                    </SplitterPanes>

                </SfSplitter>

            </ContentTemplate>

        </SplitterPane>

        <SplitterPane>

            <ContentTemplate>

                <div> Right Pane</div>

            </ContentTemplate>

        </SplitterPane>

    </SplitterPanes>

</SfSplitter>

@code {

    private void onResized(ResizingEventArgs args)

    {

        System.Diagnostics.Debug.WriteLine(args.PaneSize[0]);

    }

}

I always got 0 height in the inside splitter and can't move the outside splitter bar.

[Indrajith Srinivasan]

Hi Luyan,

Thanks for the update, 

 

We have validated your reported queries and below are the responses for it. 

Query 1: “It looks like get wrong data in the event args“ 

The args.PaneSize in splitter resizing event returns two values. The width of the left and right panes size based on the current bar resized, hence you could see the values updated for other bar resized. 

 

Query 2: “can't move the outside splitter bar.“ 

We have already considered “Splitter resizing not working with the nested splitter“ as a bug from our end and logged the report for the same and the fix will be available at end of the April 2020.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/13332/

Please let us know if you need any further assistance?

Regards, 

Indrajith 

[luyan]

The args.PaneSize in splitter resizing event returns two values. The width of the left and right panes size based on the current bar resized, hence you could see the values updated for other bar resized. 

-------------------------------------------------------

the PaneSize only contains leftpane and rightpane width? 

so that's why I always get the number 0 and 763 constantly in vertical splitter resizing event?

but I still don't know how to get the height of a vertical splitter in resizing event?

[Indrajith Srinivasan]

Hi Luyan,

Good day to you,

Query 1: “the PaneSize only contains leftpane and rightpane width?so that's why I always get the number 0 and 763 constantly in vertical splitter resizing event?“

We mean the width, as the size of the previous and next pane of the selected bar. The constant values returned issue will be resolved with the nested splitter resizing issue. Since it works fine with the Vertical splitter layout other than nested.

Query 2: “but I still don't know how to get the height of a vertical splitter in resizing event?“

The spitter height can be obtained from its @ref object. Below is the code snippet for getting the splitter height. 

 

 

<SfSplitter @ref="SplitterObj" /> 

 

@code { 

   SfSplitter SplitterObj; 

   // Height of the splitter 

   this.SplitterObj.Height; 

} 

 

 

Can you please check the above solution and let us know if it meets your requirements?

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Luyan,

Thanks for your patience,

 

We have resolved the issues “Splitter resizing not working with the nested splitter” and “Constant values returned issue on resizing the bars” with the SfSplitter and the fix is available with the Nuget version 18.1.46. We have also prepared a sample with the shared code blocks and logged the PaneSize of the Resized bars, previous and next pane obtained.

Sample: https://www.syncfusion.com/downloads/support/forum/153254/ze/RESIZI~11784247232

Can you please upgrade your package to this version to resolve the issue from your end?

Regards, 

Indrajith