Diagram auto-width in a splitter

Question

When using the splitter with the diagram, how can we have the diagram set the width automatically? If I collapse the left or right splitter pane, the diagram is not auto-resizing for the additional width provided.

Right pane

size: 25%

min: 60px

Aravind Ravi · Answer

Hi Scott,

We have created a sample to change the diagram width when resize the splitter. When you resize the splitter, you need to refresh the pane content by using the Resizing event. In the splitter event get the diagram width and change the diagram width according to the splitter pane width. Please refer below code snippet and sample

</DiagramPageSettings>

</SfDiagram>

</ContentTemplate>

</SplitterPane>

//Here width is bind to the diagram width.

public string width = "100%";

public void SizeChange(ResizingEventArgs args) {

this.width = (args.PaneSize[0]).ToString() + "px";

StateHasChanged();

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/7z/Sf-Splitter-37614375

Documentation: https://blazor.syncfusion.com/documentation/splitter/resizing/#refresh-content-on-resizing

Regards,
Aravind Ravi

Scott Peal · Answer

The resize event does not fire on pane expand/collapse. I can use an event for those actions also; however, I am not able to find the panel holding the diagram's width.

public void SplitterExpanded(Syncfusion.Blazor.Layouts.ExpandedEventArgs args)

{

this.DiagramWidth = (args.PaneSize[0]).ToString() + "px";

StateHasChanged();

}

public void SplitterCollapsed(Syncfusion.Blazor.Layouts.ExpandedEventArgs args)

{

this.DiagramWidth = (args.PaneSize[0]).ToString() + "px";

StateHasChanged();

}

BTW, brilliant approach to the auto-width setting!

Scott Peal · Answer

For those following along. If you have 3 panes, you will need to figure out which splitter is being dragged. The left-side splitter or the right-side splitter. The code below is how I did it. Also I subtracted 4 pixels from the width to avoid a horizontal scrollbar from appearing. I still have an issue with the collapse/expand events as described in my past post.

public void SplitterPaneSizeChange(ResizingEventArgs args)

{

if (args.Index[0] == 0)

{

// Left Pane

this.DiagramWidth = (args.PaneSize[1] - 4).ToString() + "px";

}

else

{

// Right Pane (args.Index[0] == 1)

this.DiagramWidth = (args.PaneSize[0] - 4).ToString() + "px";

}

StateHasChanged();

}

Aravind Ravi · Answer

Hi Scott, 
 
We have created a sample to increase the diagram width while on Expand / collapse. Unless like resizing event we cannot able to get the pane size on splitter expanded / collapsed event. However, by using the diagram Refresh method we can able to increase the diagram width. Since the diagram component is placed inside another component we can use refresh method to update the diagram width. Please refer below code snippet for how to use diagram refresh method.  
 




 
    public void OnExpanded(Syncfusion.Blazor.Layouts.ExpandedEventArgs args) 
    { 
        diagram.Refresh(); 
    } 
 
    public void OnCollapsed(Syncfusion.Blazor.Layouts.ExpandedEventArgs args) 
    { 
        diagram.Refresh(); 
    } 
 
Regards 
Aravind Ravi

Scott Peal · Answer

Hello,The collapse works great if expanding it back for a single pane.  When expanding two panes it doesn't work. Settings: 1 splitter with 3 panes. Pallete in pane #0, Diagram in pane #1, Div in pane #2. Pane #1 not permitted to collapseUse Cases:- Collapse pane #0     Results: Pane #2 grows     Desired Effect: Pane #2 stays the same and pane #1 grows (the diagram)- Collapse pane #0, then collapse pane #2     Results: The splitter width grows resulting in horizontal scrollbar     Desired Effect: No page width growth and pane #1 grows to maximum available space

Aravind Ravi · Answer

Hi Scott, 

We will check with our internal team and update you with more details on September 11th 2020. 

Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Scott, 

Sorry for the incovinence caused. We are checking the requirements with the Splitter team. We will update you with more details on September 16th 2020. 

Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Scott, 

On further analysis with our internal team, it is the behavior of the splitter. By default, in the splitter, If we have 3 panes means then two panes render for given size and remaining size taken by last pane. So if we collapse the first pane means then first pane size taken by 3rd pane. This is the behavior of the Splitter pane.  

Regards 
Aravind Ravi

Scott Peal · Answer

I recommend changing the behavior. I have never seen an application where that behavior exists. I have seen a lot of applications which have the behavior as I described. For example, Visio Studio or any application with properties like panel. Sometimes this is called panel docking.

Indrajith Srinivasan · Answer

Hi Scott, 
 
Good day to you, 
 
Based on the reported queries, 
 
Query 1 : 
 
Use Cases: 
- Collapse pane #0 
     Results: Pane #2 grows 
     Desired Effect: Pane #2 stays the same and pane #1 grows (the diagram) 
 
The Splitter last pane is an flexible pane. If the sizes are defined for the  first two panes, the remaining sizes occupies the last pane. The pane 2 grows for the usecase, since there is an fixed size(50%) set for the pane. In order to achieve your desired effect, we suggest you to remove the size set for the pane 2. Check the below sample for reference. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/157613/ze/SfSplitter_with_diagram-925270471  
 
Query 2: 
 
- Collapse pane #0, then collapse pane #2 
     Results: The splitter width grows resulting in horizontal scrollbar 
     Desired Effect: No page width growth and pane #1 grows to maximum available space 
 
The scroll is generated since the splitter and diagram width is set to 100%. In order to resolve this, we suggest you to set static width for the splitter so that it doesn’t exceeds that size. Check the above shared sample for reference. 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith