Syncfusion Blazor Splitter

Implementing Syncfusion Blazor Splitter

The Syncfusion Blazor Splitter component is a layout-based container that enables you to split a container area into resizable and collapsible panes. Use this skill when you need to create complex layouts with multiple content areas that users can adjust.

When to Use This Skill

Use this skill when you need to:

• Create split layouts — Divide your UI into multiple panes (2, 3, or more) that users can resize
• Handle pane configurations — Control pane sizing, minimum/maximum constraints, visibility, and collapsibility
• Manage user interactions — Respond to resize events, collapse/expand actions, and state changes
• Build complex interfaces — Create code editor layouts, dashboard panels, or multi-section dashboards
• Persist pane state — Save and restore pane sizes and collapse states across page refreshes
• Apply custom styling — Customize split bars, resize handles, and overall component appearance

Component Overview

The Splitter divides container space into independent panes using flexible layout:

• Default: Horizontal orientation with vertical separators (left-to-right split)
• Vertical mode: Vertical orientation with horizontal separators (top-to-bottom split)
• Nested splitters: Support for complex layouts by nesting splitters within panes
• Resizable: Users drag separators to adjust pane sizes in real-time
• Collapsible: Optional collapse/expand buttons to hide panes and recover space
• Persistent: Built-in state persistence to localStorage for user preferences

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and NuGet package setup
• WebAssembly vs Blazor Web App configuration
• Namespace imports and service registration
• Stylesheet and script resources
• Basic horizontal and vertical splitter implementation
• First render and initialization

Split Panes and Layouts

📄 Read: references/split-panes.md

• Horizontal layout (default orientation)
• Vertical layout (Orientation.Vertical)
• Multiple panes configuration
• Separator customization (SeparatorSize)
• Nested splitter patterns
• Flex-based auto-sizing behavior
• Add and remove panes dynamically (AddPaneAsync, RemovePaneAsync)

Pane Configuration and Settings

📄 Read: references/pane-configuration.md

• Pane sizing (fixed pixels, percentages, auto)
• Min/Max size constraints
• Visibility control (show/hide panes)
• Collapsible panes with toggle buttons
• Content templates and plain text
• Integrating other Blazor components

Events and Interactions

📄 Read: references/events-and-interactions.md

• Created event lifecycle
• OnResizeStart, Resizing, OnResizeStop events
• OnCollapse, OnExpand event handlers
• Collapsed, Expanded completion events
• Event args and callback structures
• Common event handling patterns

Resizing, Expand, and Collapse

📄 Read: references/resizing-and-expand-collapse.md

• Resizing behavior and gripper element
• Prevent resizing (Resizable property)
• Min/Max size validation during resize
• Enable/disable collapsible panes
• Programmatic expand/collapse methods
• Initial collapsed state configuration
• Customize resize icons and cursors
• Separator template customization (custom HTML templates)

Styling and Theming

📄 Read: references/styling-and-theming.md

• Customize split bar appearance
• Style resize handles
• Customize resize arrows
• Hide/show resize handlers
• CSS class selectors for panes
• Theme integration (Bootstrap, Fluent, etc.)

State Management and Persistence

📄 Read: references/state-management.md

• Enable state persistence (EnablePersistence)
• Two-way data binding (@bind-Collapsed, @bind-Size)
• Save/restore pane sizes and collapsed states
• LocalStorage integration
• Binding pane properties to component state

Advanced Scenarios and Layouts

📄 Read: references/advanced-scenarios.md

• Code editor style layout (nested horizontal + vertical)
• Outlook style layout with TreeView and ListView
• Dashboard and multi-panel layouts
• Performance optimization for complex layouts
• Nested splitters best practices
• Common troubleshooting and edge cases

Complete API Reference

📄 Read: references/api-reference.md

• All SfSplitter properties, methods, and events
• SplitterPane property details
• Event arguments and handlers
• Complete code examples for each API
• Content property vs ContentTemplate comparison
• RTL, persistence, and advanced property usage

Quick Start Example

Horizontal Splitter with Two Panes

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="300px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Left Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Right Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Vertical Splitter with Collapse Buttons

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="100px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Top Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Bottom Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Common Patterns

Pattern 1: Responsive Three-Pane Layout

<SfSplitter Height="400px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Sidebar</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="60%" Min="300px">
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Details Panel</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

When to use: Dashboard layouts, IDE-style interfaces, content management systems.

Pattern 2: Nested Splitters (Code Editor Layout)

<SfSplitter Height="400px" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="60%">
            <SfSplitter Height="100%">
                <SplitterPanes>
                    <SplitterPane Size="30%"><ContentTemplate>HTML</ContentTemplate></SplitterPane>
                    <SplitterPane Size="30%"><ContentTemplate>CSS</ContentTemplate></SplitterPane>
                    <SplitterPane Size="40%"><ContentTemplate>JS</ContentTemplate></SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </SplitterPane>
        <SplitterPane Size="40%"><ContentTemplate>Preview</ContentTemplate></SplitterPane>
    </SplitterPanes>
</SfSplitter>

When to use: Code editors, preview panes, complex dashboard layouts.

Pattern 3: Collapsible Sidebar with State Binding

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="250px" Min="50px" Collapsible="true" @bind-Collapsed="@sidebarCollapsed">
            <ContentTemplate><div>Navigation</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Area</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool sidebarCollapsed = false;
}

When to use: Applications needing dynamic sidebar toggles synchronized with UI state.

Key Props and Configuration

Common Use Cases

1. Code Editor Interface — Top panes for code tabs, bottom pane for output. Use nested horizontal splitters in top pane.

2. Admin Dashboard — Left sidebar for navigation, main area for content. Add right panel for details or settings.

3. Mail Client — Left pane for folder list, center for email list, right for email content.

4. Project Management Tool — Multiple collapsible panels for timeline, tasks, and gantt chart.

5. Data Analysis Dashboard — Resizable panels for charts, tables, and filters with state persistence.

---

Next Steps:

• Start with Getting Started for setup instructions
• Read Split Panes to understand layout options
• Explore Pane Configuration for customization
• Check Advanced Scenarios for complex layouts

Advanced Scenarios and Layouts

Table of Contents

• Code Editor Layout
• Outlook Style Layout
• Dashboard Layout
• Performance Tips
• Nested Splitters Best Practices
• Common Issues

Code Editor Layout

Create an IDE-style interface with nested horizontal and vertical splitters for HTML/CSS/JS + preview.

Complete Code Editor Example

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="600px" Width="100%" Orientation="Orientation.Vertical" CssClass="code-editor-splitter">
    <SplitterPanes>
        <!-- Top Pane: Three-Column Editor -->
        <SplitterPane Size="60%" Min="30%">
            <SfSplitter Height="100%" Width="100%">
                <SplitterPanes>
                    <SplitterPane Size="29%" Min="23%">
                        <ContentTemplate>
                            <div class="code-section">
                                <h3>HTML</h3>
                                <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Sample&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello World&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
                            </div>
                        </ContentTemplate>
                    </SplitterPane>
                    <SplitterPane Size="20%" Min="15%">
                        <ContentTemplate>
                            <div class="code-section">
                                <h3>CSS</h3>
                                <pre>body {
  font-family: Arial;
  background: #f0f0f0;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #333;
  text-align: center;
}</pre>
                            </div>
                        </ContentTemplate>
                    </SplitterPane>
                    <SplitterPane Size="35%" Min="35%">
                        <ContentTemplate>
                            <div class="code-section">
                                <h3>JavaScript</h3>
                                <pre>document.addEventListener('DOMContentLoaded', 
  function() {
    console.log('Page loaded');
    const heading = document.querySelector('h1');
    heading.style.fontSize = '2em';
});

function updateContent() {
  console.log('Content updated');
}</pre>
                            </div>
                        </ContentTemplate>
                    </SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </SplitterPane>
        
        <!-- Bottom Pane: Preview -->
        <SplitterPane Size="40%" Min="30%">
            <ContentTemplate>
                <div class="preview-section">
                    <h3>Preview</h3>
                    <div class="preview-content">
                        <h1>Hello World</h1>
                        <p>This is the rendered preview of your code</p>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .code-editor-splitter .e-pane {
        overflow: auto;
    }
    
    .code-section {
        padding: 15px;
        background: #f5f5f5;
        height: 100%;
        overflow: auto;
    }
    
    .code-section h3 {
        margin-top: 0;
        background: #333;
        color: white;
        padding: 10px;
        margin: -15px -15px 10px -15px;
    }
    
    .code-section pre {
        background: white;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        overflow: auto;
    }
    
    .preview-section {
        padding: 20px;
        background: white;
        height: 100%;
        overflow: auto;
    }
    
    .preview-content {
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 4px;
    }
</style>

Structure:

• Vertical splitter: top (60%) = editors, bottom (40%) = preview
• Horizontal splitter in top pane: left (29%) = HTML, center (20%) = CSS, right (35%) = JS

Outlook Style Layout

Create a multi-panel dashboard similar to Outlook with navigation, list, and details.

Outlook-Style Dashboard

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="600px" Width="100%" CssClass="outlook-layout">
    <SplitterPanes>
        <!-- Left: Navigation Panel -->
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate>
                <div class="panel-section">
                    <h3>Folders</h3>
                    <ul class="folder-list">
                        <li>📧 Inbox</li>
                        <li>📤 Sent</li>
                        <li>📋 Drafts</li>
                        <li>🗑️ Deleted</li>
                        <li>⭐ Starred</li>
                    </ul>
                </div>
            </ContentTemplate>
        </SplitterPane>
        
        <!-- Center: List View -->
        <SplitterPane Size="35%" Min="250px">
            <ContentTemplate>
                <div class="panel-section">
                    <h3>Messages</h3>
                    <div class="message-list">
                        <div class="message-item">
                            <strong>From: John Smith</strong>
                            <p>Subject: Meeting Tomorrow</p>
                            <span class="date">Today 10:30 AM</span>
                        </div>
                        <div class="message-item">
                            <strong>From: Jane Doe</strong>
                            <p>Subject: Project Update</p>
                            <span class="date">Today 9:15 AM</span>
                        </div>
                        <div class="message-item">
                            <strong>From: Bob Wilson</strong>
                            <p>Subject: RE: New Feature</p>
                            <span class="date">Yesterday 4:45 PM</span>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
        
        <!-- Right: Details View -->
        <SplitterPane Size="45%" Min="300px">
            <ContentTemplate>
                <div class="panel-section">
                    <h3>Message Details</h3>
                    <div class="message-details">
                        <div class="detail-row">
                            <strong>From:</strong> John Smith
                        </div>
                        <div class="detail-row">
                            <strong>To:</strong> me@example.com
                        </div>
                        <div class="detail-row">
                            <strong>Subject:</strong> Meeting Tomorrow
                        </div>
                        <div class="detail-row">
                            <strong>Date:</strong> Today 10:30 AM
                        </div>
                        <hr />
                        <div class="message-body">
                            <p>Hi there,</p>
                            <p>I wanted to confirm our meeting tomorrow at 2 PM.</p>
                            <p>Looking forward to discussing the project.</p>
                            <p>Best regards,<br/>John</p>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .outlook-layout .panel-section {
        background: white;
        height: 100%;
        overflow: auto;
        border-right: 1px solid #ddd;
    }
    
    .outlook-layout h3 {
        margin: 0;
        padding: 15px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }
    
    .folder-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .folder-list li {
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
    }
    
    .folder-list li:hover {
        background: #f9f9f9;
    }
    
    .message-list {
        padding: 10px;
    }
    
    .message-item {
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        border-radius: 4px;
        margin-bottom: 5px;
    }
    
    .message-item:hover {
        background: #f9f9f9;
    }
    
    .message-item strong {
        display: block;
        margin-bottom: 5px;
    }
    
    .message-item p {
        margin: 5px 0;
        color: #666;
        font-size: 13px;
    }
    
    .date {
        font-size: 11px;
        color: #999;
    }
    
    .message-details {
        padding: 20px;
    }
    
    .detail-row {
        margin-bottom: 15px;
    }
    
    .message-body {
        margin-top: 20px;
        line-height: 1.6;
    }
</style>

Dashboard Layout

Responsive multi-panel dashboard with resizable sections.

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="500px" Width="100%" Orientation="Orientation.Vertical">
    <!-- Top: Metrics -->
    <SplitterPane Size="15%" Min="80px">
        <ContentTemplate>
            <div class="dashboard-section">
                <h3>Key Metrics</h3>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px;">
                    <div class="metric"><strong>1,234</strong><br/>Sales</div>
                    <div class="metric"><strong>567</strong><br/>Users</div>
                    <div class="metric"><strong>89%</strong><br/>Uptime</div>
                    <div class="metric"><strong>$45K</strong><br/>Revenue</div>
                </div>
            </div>
        </ContentTemplate>
    </SplitterPane>
    
    <!-- Middle: Charts and Data -->
    <SplitterPane Size="70%" Min="250px">
        <SfSplitter Height="100%" Width="100%">
            <SplitterPanes>
                <SplitterPane Size="50%" Min="200px">
                    <ContentTemplate>
                        <div class="dashboard-section">
                            <h3>Sales Trend</h3>
                            <div style="height: 100%; display: flex; align-items: center; justify-content: center; background: #f9f9f9;">
                                [Chart Component Would Go Here]
                            </div>
                        </div>
                    </ContentTemplate>
                </SplitterPane>
                <SplitterPane Size="50%" Min="200px">
                    <ContentTemplate>
                        <div class="dashboard-section">
                            <h3>User Distribution</h3>
                            <div style="height: 100%; display: flex; align-items: center; justify-content: center; background: #f9f9f9;">
                                [Chart Component Would Go Here]
                            </div>
                        </div>
                    </ContentTemplate>
                </SplitterPane>
            </SplitterPanes>
        </SfSplitter>
    </SplitterPane>
    
    <!-- Bottom: Logs -->
    <SplitterPane Size="15%" Min="80px">
        <ContentTemplate>
            <div class="dashboard-section">
                <h3>Recent Activity</h3>
                <div style="overflow: auto; height: calc(100% - 45px); padding: 10px;">
                    <div class="log-item">User registered - 2 min ago</div>
                    <div class="log-item">Payment processed - 5 min ago</div>
                    <div class="log-item">Report generated - 8 min ago</div>
                </div>
            </div>
        </ContentTemplate>
    </SplitterPane>
</SfSplitter>

<style>
    .dashboard-section {
        background: white;
        height: 100%;
        border: 1px solid #ddd;
        display: flex;
        flex-direction: column;
    }
    
    .dashboard-section h3 {
        margin: 0;
        padding: 12px;
        background: #007bff;
        color: white;
        border-bottom: 1px solid #ddd;
    }
    
    .metric {
        background: white;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-align: center;
    }
    
    .metric strong {
        font-size: 20px;
        color: #007bff;
    }
    
    .log-item {
        padding: 8px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 12px;
        color: #666;
    }
</style>

Performance Tips

1. Avoid Too Many Nested Splitters

// ❌ Bad: Deep nesting (3+ levels)
<SfSplitter>
    <SplitterPane>
        <SfSplitter>
            <SplitterPane>
                <SfSplitter>
                    <!-- Deep nesting hurts performance -->
                </SfSplitter>
            </SplitterPane>
        </SfSplitter>
    </SplitterPane>
</SfSplitter>

// ✅ Good: 2 levels maximum
<SfSplitter>
    <SplitterPane>
        <SfSplitter>
            <!-- OK: 2 levels is acceptable -->
        </SfSplitter>
    </SplitterPane>
</SfSplitter>

2. Lazy Load Content

<SfSplitter Height="400px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="30%" Collapsible="true">
            <ContentTemplate>
                <div>Navigation - Always Loaded</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="70%">
            <ContentTemplate>
                @if (showDetailPane)
                {
                    <DetailComponent /> <!-- Only load when needed -->
                }
                else
                {
                    <div>Click to load details</div>
                }
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

3. Virtualization for Large Lists

<SplitterPane>
    <ContentTemplate>
        @if (Messages != null && Messages.Count > 0)
        {
            <!-- Use Virtualize for large lists -->
            <Virtualize Items="@Messages">
                <MessageItem Message="@context" />
            </Virtualize>
        }
    </ContentTemplate>
</SplitterPane>

4. Debounce Resize Events

@using System.Timers;

<SfSplitter>
    <SplitterEvents OnResizeStop="@OnResizeStopDebounced" />
    <!-- Panes -->
</SfSplitter>

@code {
    private Timer resizeTimer;
    private bool isResizing = false;

    private void OnResizeStopDebounced(ResizingEventArgs args)
    {
        if (isResizing) return;
        isResizing = true;
        
        resizeTimer = new Timer(500);
        resizeTimer.Elapsed += (s, e) =>
        {
            RefreshContent();
            isResizing = false;
            resizeTimer.Stop();
        };
        resizeTimer.Start();
    }

    private void RefreshContent()
    {
        // Expensive operation
    }
}

Nested Splitters Best Practices

✅ DO

• Use clear naming: OuterSplitter, InnerSplitter, etc.
• Set both Height="100%" and Width="100%" on nested splitters
• Provide fixed sizes to parent panes
• Use Min property to prevent panes from becoming too small
• Test performance with real content

❌ DON'T

• Nest more than 2-3 levels deep
• Omit height/width on nested splitters
• Create splitters inside loops
• Mix multiple horizontal/vertical orientations without planning
• Use arbitrary pane sizes

Common Issues

Issue 1: Nested Splitter Doesn't Resize Properly

Cause: Missing Height="100%" or Width="100%" on inner splitter

Fix:

<!-- ❌ Wrong -->
<SplitterPane>
    <SfSplitter>
        <!-- Inner splitter won't take full space -->
    </SfSplitter>
</SplitterPane>

<!-- ✅ Correct -->
<SplitterPane>
    <SfSplitter Height="100%" Width="100%">
        <!-- Takes full pane space -->
    </SfSplitter>
</SplitterPane>

Issue 2: Content Overflows Pane

Cause: Pane content doesn't respect container height

Fix:

<SplitterPane>
    <ContentTemplate>
        <div style="height: 100%; overflow: auto;">
            <!-- Content now scrolls within pane -->
        </div>
    </ContentTemplate>
</SplitterPane>

Issue 3: Collapse Button Disappears

Cause: Collapsible="true" not set on pane

Fix:

<!-- ❌ Wrong -->
<SplitterPane>
    <!-- No collapse button -->
</SplitterPane>

<!-- ✅ Correct -->
<SplitterPane Collapsible="true">
    <!-- Has collapse button -->
</SplitterPane>

Issue 4: Resize Performance Issues

Cause: Heavy operations on every resize event (especially Resizing event)

Fix: Use OnResizeStop instead of Resizing, or debounce resize events

---

Congratulations! You now have comprehensive knowledge of Syncfusion Blazor Splitter. For additional help, check the official documentation.

Blazor Splitter API Reference

Overview

The SfSplitter is a layout user interface (UI) component that splits the layout into multiple panes with resizable and collapsible support.

---

Table of Contents

• [SfSplitter Properties](#sf splitter-properties)
• [SfSplitter Methods](#sf splitter-methods)
• SplitterPane Properties
• SplitterEvents Properties
• Orientation Enum
• Event Args Classes
• Coverage Summary
• Examples for Not Previously Covered APIs
• Content Property Example
• EnableRtl Example
• Enabled Example
• EnableReversePanes Example
• HtmlAttributes Example
• ToggleAsync Example
• SplitterPane CssClass Example
• Destroyed Event Example
• Usage Examples

---

SfSplitter Properties

---

SfSplitter Methods

---

SplitterPane Properties

---

SplitterEvents Properties

---

Orientation Enum

---

Event Args Classes

---

Coverage Summary

---

Examples for Not Previously Covered APIs

Content Property Example

Use the Content property to set plain HTML string content directly in the pane without using ContentTemplate.

<SfSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="50%" Content="<div><h3>ASP.NET Scheduler</h3><p>The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.</p></div>">
        </SplitterPane>
        <SplitterPane Size="50%" Content="<div><h3>ASP.NET DataGrid</h3><p>The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.</p></div>">
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Use Cases:

• Simple HTML text content
• Static content (no dynamic binding required)
• Lightweight alternative to ContentTemplate
• Basic styling and markup

Comparison: Content vs ContentTemplate:

---

EnableRtl Example

Enable right-to-left (RTL) mode for languages like Arabic, Hebrew, or Persian.

<SfSplitter Height="200px" Width="100%" EnableRtl="true">
    <SplitterPanes>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Pane 1</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Pane 2</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

---

Enabled Example

Disable the Splitter to prevent user interactions like resizing panes.

<SfSplitter Height="200px" Width="100%" Enabled="false">
    <SplitterPanes>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Pane 1</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Pane 2</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

---

EnableReversePanes Example

Reverse the order of splitter panes - the right-most pane appears first.

<SfSplitter Height="200px" Width="100%" EnableReversePanes="true">
    <SplitterPanes>
        <SplitterPane Size="33%">
            <ContentTemplate>
                <div>Pane 1 (appears last)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="33%">
            <ContentTemplate>
                <div>Pane 2 (appears middle)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="33%">
            <ContentTemplate>
                <div>Pane 3 (appears first)</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

---

HtmlAttributes Example

Add additional HTML attributes like id, title, or custom data attributes to the Splitter.

<SfSplitter Height="200px" Width="100%" 
    HtmlAttributes="@HtmlAttr">
    <SplitterPanes>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Pane 1</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Pane 2</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private Dictionary<string, object> HtmlAttr = new Dictionary<string, object>
    {
        { "id", "custom-splitter" },
        { "title", "Custom Splitter" },
        { "data-theme", "dark" }
    };
}

---

ToggleAsync Example

Toggle multiple panes (expand some, collapse others) in a single method call.

<SfSplitter @ref="SplitterObj" Height="200px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="33%" Collapsible="true">
            <ContentTemplate>
                <div>Pane 1</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="33%" Collapsible="true">
            <ContentTemplate>
                <div>Pane 2</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="33%" Collapsible="true">
            <ContentTemplate>
                <div>Pane 3</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<SfButton Content="Toggle Panes" @onclick="@TogglePanes" />

@code {
    private SfSplitter SplitterObj;

    private async Task TogglePanes()
    {
        // Expand pane at index 0, collapse pane at index 2
        await this.SplitterObj.ToggleAsync(
            new List<double> { 0 },  // Indices to expand
            new List<double> { 2 }   // Indices to collapse
        );
    }
}

---

SplitterPane CssClass Example

Apply custom CSS class to individual SplitterPane for specific styling.

<SfSplitter Height="200px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="50%" CssClass="custom-pane">
            <ContentTemplate>
                <div>Custom Styled Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Normal Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .custom-pane {
        background-color: #f0f0f0;
        border: 2px solid #007bff;
    }
</style>

---

Destroyed Event Example

Handle the event when the Splitter component is destroyed/removed from DOM.

<SfSplitter Height="200px" Width="100%">
    <SplitterEvents Destroyed="@OnDestroyed" />
    <SplitterPanes>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Pane 1</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div>Pane 2</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private void OnDestroyed(object args)
    {
        // Cleanup logic when splitter is destroyed
        Console.WriteLine("Splitter component destroyed");
    }
}

---

Usage Examples

Basic Splitter

<SfSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane>
            <ContentTemplate>
                <div>Left Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div>Right Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

With Events

<SfSplitter>
    <SplitterEvents OnResizeStart="@OnResizeStartHandler" />
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div>Pane Content</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private void OnResizeStartHandler(ResizeEventArgs args)
    {
        // Handle resize start
    }
}

With State Persistence

<SfSplitter ID="Splitter" Height="300px" EnablePersistence="true">
    <SplitterPanes>
        <SplitterPane @bind-Size="@PaneSize" Min="60px" Collapsible="true">
            <ContentTemplate>
                <div>Pane Content</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private string PaneSize { get; set; } = "25%";
}

Events and Interactions

Table of Contents

• Component Lifecycle
• Resize Events
• Collapse/Expand Events
• Common Patterns
• Event Args Reference Table

Component Lifecycle

Created Event

Fires after the Splitter component initializes with all panes rendered.

@using Syncfusion.Blazor.Layouts

<SfSplitter @ref="SplitterObj">
    <SplitterEvents Created="@CreatedHandler" />
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate><div>Pane 1</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate><div>Pane 2</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private SfSplitter SplitterObj;

    public void CreatedHandler(Object args)
    {
        Console.WriteLine("Splitter created successfully");
        // Initialize pane state, set focus, load data
    }
}

Use case: Set initial focus, load pane content dynamically, initialize related components.

Resize Events

Three resize events fire during the pane resizing workflow:

OnResizeStart

Fires when user begins dragging the separator:

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents OnResizeStart="@OnResizeStartHandler" />
    <SplitterPanes>
        <SplitterPane Size="50%">
            <ContentTemplate><div>Pane 1</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Pane 2</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    public void OnResizeStartHandler(ResizeEventArgs args)
    {
        Console.WriteLine($"Resize started on pane: {args.Pane}");
        // Save initial pane state, prepare for changes
    }
}

ResizeEventArgs (Properties):

• Cancel: bool - Cancel the resize action
• Element: DOM - Root element of Splitter component
• Event: EventArgs - Original event arguments
• Index: int[] - Array of indices representing expanded panes order
• Name: string - Name of the event ("OnResizeStart")
• Pane: List<DOM> - DOM elements of resizing panes
• Separator: DOM - Separator element between panes

Resizing

Fires continuously as separator moves (use throttle if performance issue):

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents Resizing="@ResizingHandler" />
    <SplitterPanes>
        <SplitterPane Size="50%">
            <ContentTemplate><div>Pane 1</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Pane 2</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    public void ResizingHandler(ResizingEventArgs args)
    {
        // Called many times during drag, log cautiously
        Console.WriteLine($"Resizing: {args.NextPaneSize}");
    }
}

ResizingEventArgs (Properties):

• Element: DOM - Root element of Splitter component
• Event: EventArgs - Original event arguments
• Index: int[] - Array of indices representing expanded panes order
• Name: string - Name of the event ("Resizing")
• Pane: List<DOM> - DOM elements of resizing panes
• PaneSize: double[] - Array of current pane sizes during resize
• Separator: DOM - Separator element between panes

OnResizeStop

Fires when user releases separator (resizing complete):

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents OnResizeStop="@OnResizeStopHandler" />
    <SplitterPanes>
        <SplitterPane Size="50%">
            <ContentTemplate><div>Pane 1</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Pane 2</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    public void OnResizeStopHandler(ResizingEventArgs args)
    {
        Console.WriteLine($"Resize stopped. New pane sizes: {string.Join(", ", args.PaneSize)}");
        // Refresh content, save state, recalculate layout
    }
}

ResizingEventArgs (Properties for OnResizeStop):

• Element: DOM - Root element of Splitter component
• Event: EventArgs - Original event arguments
• Index: int[] - Array of indices representing expanded panes order
• Name: string - Name of the event ("OnResizeStop")
• Pane: List<DOM> - DOM elements of resizing panes
• PaneSize: double[] - Array of final pane sizes after resize complete
• Separator: DOM - Separator element between panes

Collapse/Expand Events

OnCollapse

Fires before a pane collapses (can cancel with args.Cancel):

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents OnCollapse="@OnCollapseHandler" />
    <SplitterPanes>
        <SplitterPane Size="30%" Collapsible="true">
            <ContentTemplate><div>Sidebar (Collapsible)</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    public void OnCollapseHandler(BeforeExpandEventArgs args)
    {
        Console.WriteLine($"Before collapse pane at index: {string.Join(", ", args.Index)}");
        // Cancel collapse if needed:
        // args.Cancel = true;
    }
}

BeforeExpandEventArgs (Properties):

• Cancel: bool - Set to true to prevent collapse action
• Element: DOM - Root element of Splitter component
• Event: EventArgs - Original event arguments
• Index: int[] - Array of indices representing expanded panes order
• Name: string - Name of the event ("OnCollapse")
• Pane: List<DOM> - DOM elements of panes
• Separator: DOM - Separator element

OnExpand

Fires before a pane expands:

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents OnExpand="@OnExpandHandler" />
    <SplitterPanes>
        <SplitterPane Size="30%" Collapsible="true">
            <ContentTemplate><div>Sidebar</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    public void OnExpandHandler(BeforeExpandEventArgs args)
    {
        Console.WriteLine($"Before expand pane at index: {string.Join(", ", args.Index)}");
        // Can cancel expand if needed: args.Cancel = true;
    }
}

Note: OnExpand also uses BeforeExpandEventArgs with same properties as OnCollapse - fires before expand action begins.

Collapsed

Fires after pane successfully collapses:

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents Collapsed="@CollapsedHandler" />
    <SplitterPanes>
        <SplitterPane Size="30%" Collapsible="true">
            <ContentTemplate><div>Sidebar</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    public void CollapsedHandler(ExpandedEventArgs args)
    {
        Console.WriteLine($"Successfully collapsed pane at index: {string.Join(", ", args.Index)}");
        Console.WriteLine($"New pane sizes: {string.Join(", ", args.PaneSizes)}");
        // Update UI state, save preferences
    }
}

ExpandedEventArgs (Properties for Collapsed event):

• Element: DOM - Root element of Splitter component
• Event: EventArgs - Original event arguments
• Index: int[] - Array of indices representing expanded panes order
• Name: string - Name of the event ("Collapsed")
• Pane: List<DOM> - DOM elements of panes
• PaneSizes: double[] - Array of pane sizes after collapse
• Separator: DOM - Separator element

Expanded

Fires after pane successfully expands:

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents Expanded="@ExpandedHandler" />
    <SplitterPanes>
        <SplitterPane Size="30%" Collapsible="true">
            <ContentTemplate><div>Sidebar</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    public void ExpandedHandler(ExpandedEventArgs args)
    {
        Console.WriteLine($"Successfully expanded pane at index: {string.Join(", ", args.Index)}");
        Console.WriteLine($"New pane sizes: {string.Join(", ", args.PaneSizes)}");
    }
}

ExpandedEventArgs (Properties for Expanded event):

• Element: DOM - Root element of Splitter component
• Event: EventArgs - Original event arguments
• Index: int[] - Array of indices representing expanded panes order
• Name: string - Name of the event ("Expanded")
• Pane: List<DOM> - DOM elements of panes
• PaneSizes: double[] - Array of pane sizes after expand
• Separator: DOM - Separator element

Common Patterns

Pattern 1: Sync Splitter State with Component State

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents Collapsed="@OnPaneCollapsed" Expanded="@OnPaneExpanded" />
    <SplitterPanes>
        <SplitterPane Size="25%" Collapsible="true" Index="0">
            <ContentTemplate><div>Sidebar (Index 0)</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Content</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<div>
    <p>Sidebar collapsed: @sidebarCollapsed</p>
</div>

@code {
    private bool sidebarCollapsed = false;

    private void OnPaneCollapsed(ExpandedEventArgs args)
    {
        // Index is an array of indices - check if index 0 (sidebar) is in the array
        if (args.Index != null && args.Index.Length > 0 && args.Index[0] == 0)
            sidebarCollapsed = true;
    }

    private void OnPaneExpanded(ExpandedEventArgs args)
    {
        if (args.Index != null && args.Index.Length > 0 && args.Index[0] == 0)
            sidebarCollapsed = false;
    }
}

Use case: Update page UI to reflect splitter state (show/hide buttons, change icons, etc.).

Pattern 2: Refresh Content on Resize

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="400px" Width="100%">
    <SplitterEvents OnResizeStop="@RefreshPaneContent" />
    <SplitterPanes>
        <SplitterPane Size="50%" Min="300px">
            @if (chartComponent != null)
            {
                <SfChart @ref="chartComponent" Title="Chart">
                    <!-- Chart content -->
                </SfChart>
            }
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 20px;">Details Panel</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private SfChart chartComponent;

    private async Task RefreshPaneContent(ResizingEventArgs args)
    {
        if (chartComponent != null)
        {
            await chartComponent.Refresh();
        }
    }
}

Use case: Charts, grids, and other components need refresh when container resizes.

Pattern 3: Prevent Collapse Based on Condition

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterEvents OnCollapse="@PreventCollapseIfNeeded" />
    <SplitterPanes>
        <SplitterPane Size="25%" Collapsible="true" Index="0">
            <ContentTemplate><div>Important Content (Cannot collapse if dirty)</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Other Content</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool hasUnsavedChanges = false;

    private void PreventCollapseIfNeeded(BeforeExpandEventArgs args)
    {
        // Check if first pane (index 0) is being collapsed
        if (args.Index != null && args.Index.Length > 0 && args.Index[0] == 0 && hasUnsavedChanges)
        {
            // Prevent collapse if user has unsaved changes
            args.Cancel = true;
            Console.WriteLine("Cannot collapse: Unsaved changes exist");
        }
    }
}

Use case: Form validation, unsaved changes warning, dependency checks.

Pattern 4: Complete Event Handling Example

@using Syncfusion.Blazor.Layouts

<div>
    <p>Events Log:</p>
    <div style="border: 1px solid #ccc; height: 150px; overflow: auto; padding: 10px;">
        @foreach (var log in eventLogs)
        {
            <div>@log</div>
        }
    </div>
</div>

<SfSplitter Height="300px" Width="100%" @ref="splitter">
    <SplitterEvents 
        Created="@OnCreated"
        OnResizeStart="@OnStart"
        Resizing="@OnResizing"
        OnResizeStop="@OnStop"
        OnCollapse="@OnCollapsing"
        Collapsed="@OnCollapsed"
        OnExpand="@OnExpanding"
        Expanded="@OnExpanded" />
    <SplitterPanes>
        <SplitterPane Size="30%" Collapsible="true">
            <ContentTemplate><div>Pane 1</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Pane 2</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private SfSplitter splitter;
    private List<string> eventLogs = new();

    private void LogEvent(string eventName, object args)
    {
        string details = eventName switch
        {
            "OnResizeStart" => $"Indices: {string.Join(",", ((ResizeEventArgs)args).Index ?? Array.Empty<int>())}",
            "Resizing" => $"Sizes: {string.Join(",", ((ResizingEventArgs)args).PaneSize ?? Array.Empty<double>())}",
            "OnResizeStop" => $"Final sizes: {string.Join(",", ((ResizingEventArgs)args).PaneSize ?? Array.Empty<double>())}",
            "OnCollapse" => $"Collapsing indices: {string.Join(",", ((BeforeExpandEventArgs)args).Index ?? Array.Empty<int>())}",
            "Collapsed" => $"Collapsed indices: {string.Join(",", ((ExpandedEventArgs)args).Index ?? Array.Empty<int>())}",
            "OnExpand" => $"Expanding indices: {string.Join(",", ((BeforeExpandEventArgs)args).Index ?? Array.Empty<int>())}",
            "Expanded" => $"Expanded indices: {string.Join(",", ((ExpandedEventArgs)args).Index ?? Array.Empty<int>())}",
            _ => ""
        };
        
        eventLogs.Add($"[{DateTime.Now:HH:mm:ss}] {eventName} - {details}");
        if (eventLogs.Count > 50) eventLogs.RemoveAt(0); // Keep last 50 logs
    }

    private void OnCreated(Object args) => LogEvent("Created", args);
    private void OnStart(ResizeEventArgs args) => LogEvent("OnResizeStart", args);
    private void OnResizing(ResizingEventArgs args) => LogEvent("Resizing", args);
    private void OnStop(ResizingEventArgs args) => LogEvent("OnResizeStop", args);
    private void OnCollapsing(BeforeExpandEventArgs args) => LogEvent("OnCollapse", args);
    private void OnCollapsed(ExpandedEventArgs args) => LogEvent("Collapsed", args);
    private void OnExpanding(BeforeExpandEventArgs args) => LogEvent("OnExpand", args);
    private void OnExpanded(ExpandedEventArgs args) => LogEvent("Expanded", args);
}

---

Event Args Reference Table

Key Differences

Common Patterns Using Event Args

Reading Index Array:

// Index is an int array representing expanded panes
if (args.Index != null && args.Index.Length > 0)
{
    int firstExpandedPane = args.Index[0];
    Console.WriteLine($"Expanded pane indices: {string.Join(",", args.Index)}");
}

Reading Pane Sizes:

// Use PaneSize[] in Resizing/OnResizeStop for current sizes
// Use PaneSizes[] in Collapsed/Expanded for final sizes
if (args.PaneSize != null)
{
    Console.WriteLine($"Current sizes: {string.Join(", ", args.PaneSize)}");
}

if (args.PaneSizes != null)
{
    Console.WriteLine($"Final sizes: {string.Join(", ", args.PaneSizes)}");
}

Accessing DOM Elements:

// Pane is a List<DOM> of pane elements
if (args.Pane != null && args.Pane.Count > 0)
{
    DOM firstPane = args.Pane[0];
    // Can use with JavaScript interop if needed
}

// Separator is the split bar DOM element
DOM separatorElement = args.Separator;

---

Next: Read Resizing, Expand, and Collapse for implementation of resize controls and programmatic methods.

Getting Started with Blazor Splitter

Table of Contents

• Installation
• Project Setup
• Basic Implementation
• Blazor Web App Setup
• First Render

Installation

NuGet Package Installation

The Splitter component requires two NuGet packages:

Visual Studio Package Manager:

Install-Package Syncfusion.Blazor.Layouts
Install-Package Syncfusion.Blazor.Themes

Visual Studio Code / .NET CLI:

dotnet add package Syncfusion.Blazor.Layouts
dotnet add package Syncfusion.Blazor.Themes
dotnet restore

Both packages are required. The Layouts package contains the Splitter component, while the Themes package provides styling.

Project Setup

Step 1: Add Namespace Imports

Edit the ~/_Imports.razor file and add the Syncfusion namespaces:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts

These imports must be in the root imports file to be available throughout your application.

Step 2: Register Syncfusion Blazor Service

Update Program.cs to register the Syncfusion service:

using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Register Syncfusion Blazor Service
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

Step 3: Add Stylesheet and Script Resources

Add the theme stylesheet and script references to ~/index.html in the <head> section:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Splitter App</title>
    <base href="/" />
    
    <!-- Syncfusion Theme -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <link href="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></link>
</head>

Available themes: bootstrap5, material3, fluent2, tailwind

Choose the theme that matches your design system.

Basic Implementation

Horizontal Splitter (Default)

The most basic splitter divides the container horizontally (left-to-right):

@using Syncfusion.Blazor.Layouts

<div>Horizontal Splitter</div>

<SfSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane>
            <ContentTemplate>
                <div class="centered-content">
                    Left Pane
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div class="centered-content">
                    Middle Pane
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div class="centered-content">
                    Right Pane
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .centered-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
</style>

Output: Three equally-sized horizontal panes with auto-sizing.

Vertical Splitter

For vertical (top-to-bottom) split, use Orientation="Orientation.Vertical":

@using Syncfusion.Blazor.Layouts

<div>Vertical Splitter</div>

<SfSplitter Height="305px" Width="600px" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="100px">
            <ContentTemplate>
                <div class="centered-content">
                    Top Pane
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="100px">
            <ContentTemplate>
                <div class="centered-content">
                    Middle Pane
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="100px">
            <ContentTemplate>
                <div class="centered-content">
                    Bottom Pane
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .centered-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
</style>

Blazor Web App Setup

For Blazor Web App (with server + client components), follow these additional steps:

Step 1: Install Packages in Client Project

If using WebAssembly or Auto render modes, install packages in the client project folder:

cd BlazorWebApp.Client
dotnet add package Syncfusion.Blazor.Layouts
dotnet add package Syncfusion.Blazor.Themes

Step 2: Add Imports in Client ~/_Imports.razor

Add namespaces to the client project's ~/_Imports.razor:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts

Step 3: Register Service in Program.cs

Register service in both server and client Program.cs if using WebAssembly/Auto render modes:

// Client Program.cs
builder.Services.AddSyncfusionBlazor();

// Server Program.cs (if WebAssembly or Auto mode)
builder.Services.AddSyncfusionBlazor();

Step 4: Add Resources to App.razor

Update ~/Components/App.razor with stylesheet and script:

<head>
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>

<body>
    ...
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
</body>

Step 5: Define Render Mode (Per-Page Components)

If Interactivity Location is set to "Per page/component", add render mode to your component:

@rendermode InteractiveAuto

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="240px" Width="100%">
    <!-- Panes here -->
</SfSplitter>

First Render

Minimal Complete Example

Create a new Razor page Splitter.razor in ~/Pages/:

@page "/splitter"
@using Syncfusion.Blazor.Layouts

<PageTitle>Splitter Component</PageTitle>

<h1>Syncfusion Blazor Splitter</h1>

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="300px">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h3>Left Panel</h3>
                    <p>This is the left pane content.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h3>Right Panel</h3>
                    <p>This is the right pane content. It auto-sizes to fill remaining space.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Navigate to /splitter to see the rendered component.

Key Takeaways

1. Two packages required: Syncfusion.Blazor.Layouts + Syncfusion.Blazor.Themes 2. Add to `_Imports.razor`: Syncfusion and Syncfusion.Blazor.Layouts namespaces 3. Register service: builder.Services.AddSyncfusionBlazor() in Program.cs 4. Include resources: Theme CSS and script in index.html or App.razor 5. Render mode (Web App only): Add @rendermode if using per-component interactivity

Troubleshooting

Issue: Component doesn't render, appears blank

• Check that both NuGet packages are installed
• Verify stylesheet and script are loaded (check browser DevTools)
• Confirm namespace imports in _Imports.razor

Issue: Styling looks wrong or default theme not applied

• Ensure correct theme name in stylesheet link (bootstrap5, material3, fluent2, tailwind)
• Verify CSS path is _content/Syncfusion.Blazor.Themes/[theme].css

Issue: "SfSplitter not found" compilation error

• Add @using Syncfusion.Blazor.Layouts to _Imports.razor
• Check project builds without errors

---

Next: Read Split Panes and Layouts to understand horizontal/vertical orientation and pane sizing.

Pane Configuration and Settings

Table of Contents

• Pane Sizing
• Min/Max Constraints
• Pane Visibility
• Collapsible Panes
• Content Types
• Component Integration

Pane Sizing

Control pane width/height using the Size property. Supports pixels and percentages.

Fixed Size (Pixels)

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">Left Pane (200px fixed)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">Middle Pane (200px fixed)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">Right Pane (auto, remaining space)</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .e-pane {
        text-align: center;
        align-items: center;
        display: grid;
    }
</style>

Behavior: First pane = 200px, second pane = 200px, third pane = remaining space (auto).

Percentage Sizing

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane Size="30%">
            <ContentTemplate>
                <div style="padding: 10px;">Left Pane (30%)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="40%">
            <ContentTemplate>
                <div style="padding: 10px;">Middle Pane (40%)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="30%">
            <ContentTemplate>
                <div style="padding: 10px;">Right Pane (30%)</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Behavior: Panes always maintain 30%-40%-30% ratio regardless of container width.

Auto-Sizing

Omit Size to let panes auto-adjust:

<SfSplitter Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane>
            <ContentTemplate><div>Auto-sized</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Auto-sized</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Best for: Flexible layouts that adapt when panes are added/removed or when container resizes.

Note: When all panes specify fixed sizes, the last pane becomes flexible (overrides its Size).

Min/Max Constraints

Use Min and Max properties to restrict how much users can resize each pane.

Size Validation Example

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px" SeparatorSize="4">
    <SplitterPanes>
        <SplitterPane Size="200px" Min="20%" Max="40%">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid</h3>
                    <p>Min: 20%, Max: 40%</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px" Min="30%" Max="60%">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule</h3>
                    <p>Min: 30%, Max: 60%</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>No constraints</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

Behavior:

• First pane: Resizable between 20%-40% of container width
• Second pane: Resizable between 30%-60% of container width
• Third pane: No constraints, fills remaining space

Use case: Prevent navigation panels from becoming too small, prevent content areas from taking all space.

Pane Visibility

Show/hide panes dynamically using the Visible property.

Visibility Control Example

@using Syncfusion.Blazor.Layouts

<button class="e-btn" @onclick="@ToggleMiddlePane">Toggle Middle Pane</button>

<SfSplitter Height="240px" Width="700px" SeparatorSize="2">
    <SplitterPanes>
        <SplitterPane Size="30%" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Left Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="30%" Collapsible="true" Visible="@this.PaneMiddleVisibility">
            <ContentTemplate>
                <div style="padding: 10px;">Middle Pane (Toggleable)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Right Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    public bool PaneMiddleVisibility { get; set; } = false;

    public void ToggleMiddlePane()
    {
        this.PaneMiddleVisibility = !this.PaneMiddleVisibility;
    }
}

Behavior:

• Click button to toggle Visible property
• Middle pane slides in/out, other panes auto-adjust
• When hidden, pane doesn't take space in layout

When to use: Show/hide optional panels, conditional UI sections, space-saving designs.

Collapsible Panes

Enable built-in collapse/expand buttons using the Collapsible property.

Basic Collapsible Example

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px" SeparatorSize="2">
    <SplitterPanes>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>PARIS</h3>
                    <p>Paris, the city of lights and love...</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>CAMEMBERT</h3>
                    <p>The village in Normandy where the famous French cheese originates...</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>GRENOBLE</h3>
                    <p>The capital city of the French Alps...</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

Behavior:

• Collapse/expand arrow buttons appear on each pane header
• Click arrows to collapse pane and reclaim space
• Collapsed pane shows only a thin bar

When to use: Save screen space, let users focus on important content, optional side panels.

Initial Collapsed State

Start with specific panes collapsed using Collapsed property:

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px" SeparatorSize="2">
    <SplitterPanes>
        <SplitterPane Collapsible="true">
            <ContentTemplate><div style="padding: 10px;">First Pane (Expanded)</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true" Collapsed="true">
            <ContentTemplate><div style="padding: 10px;">Second Pane (Initially Collapsed)</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate><div style="padding: 10px;">Third Pane (Expanded)</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool secondPaneCollapsed { get; set; } = true;
}

Use case: Load page with collapsible sections collapsed by default, users expand as needed.

Content Types

HTML Markup Content

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <div class="content">
                        <h3>Grid</h3>
                        <p>The ASP.NET DataGrid control is used to display data in a tabular format.</p>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <div class="content">
                        <h3>Schedule</h3>
                        <p>The ASP.NET Scheduler facilitates calendar features for time management.</p>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <div class="content">
                        <h3>Chart</h3>
                        <p>ASP.NET charts add beautiful visualizations to applications.</p>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

Plain Text Content

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="text-align: center; padding: 20px;">
                    Left pane
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="text-align: center; padding: 20px;">
                    Middle pane
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="text-align: center; padding: 20px;">
                    Right pane
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .e-pane {
        text-align: center;
        align-items: center;
        display: grid;
    }
</style>

Component Integration

Integrating Blazor Components

Any Blazor component can be rendered inside splitter panes:

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%" SeparatorSize="4">
    <SplitterPanes>
        <SplitterPane Size="50%" Min="300px">
            <SfGrid DataSource="@Orders">
                <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>
        </SplitterPane>
        <SplitterPane Size="50%">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h3>Details</h3>
                    <p>Select a row from the grid to see details here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private List<Order> Orders = new();

    protected override void OnInitialized()
    {
        Orders = new List<Order>
        {
            new Order { OrderID = 10248, CustomerID = "VINET", OrderDate = new DateTime(1996, 7, 4) },
            new Order { OrderID = 10249, CustomerID = "TOMSP", OrderDate = new DateTime(1996, 7, 5) },
            new Order { OrderID = 10250, CustomerID = "HANAR", OrderDate = new DateTime(1996, 7, 8) }
        };
    }

    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
    }
}

Best practices:

• Place large components (Grid, Tree, Chart) in fixed or minimum-sized panes
• Use Size="50%" Min="300px" to prevent pane from becoming too small
• Ensure components handle content resizing properly

Multiple Components in One Pane

<SplitterPane Size="40%">
    <ContentTemplate>
        <div style="overflow: auto; height: 100%;">
            <SfListView TValue="MailItem" DataSource="@Items" ShowCheckBox="true">
                <ListViewFieldSettings TValue="MailItem" Id="Id" Text="Subject"></ListViewFieldSettings>
            </SfListView>
        </div>
    </ContentTemplate>
</SplitterPane>

Key: Wrap multiple components in a container div with overflow: auto; height: 100%; to handle scrolling.

---

Next: Read Events and Interactions to learn about handling user events and pane changes.

Resizing, Expand, and Collapse

Table of Contents

• Resizing Behavior
• Size Constraints
• Prevent Resizing
• Programmatic Control
• Customize Resize Icon

Resizing Behavior

By default, resizing is enabled for all panes. Users drag the separator to adjust sizes.

Basic Resizing

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px" SeparatorSize="3">
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid</h3>
                    <p>Drag separator to resize</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule</h3>
                    <p>Drag separator to resize</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>Drag separator to resize</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

Behavior:

• Horizontal splitter: Drag left-right to resize panes
• Vertical splitter: Drag up-down to resize panes
• Resize gripper element (small icon) appears on separator for visibility
• Adjacent panes auto-adjust when one is resized

Size Constraints

Use Min and Max properties to restrict resize range for each pane.

Min and Max Validation

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px" SeparatorSize="4">
    <SplitterPanes>
        <SplitterPane Size="200px" Min="20%" Max="40%">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid</h3>
                    <p>Min: 20%, Max: 40%</p>
                    <p>Try to resize - constrained</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px" Min="30%" Max="60%">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule</h3>
                    <p>Min: 30%, Max: 60%</p>
                    <p>Try to resize - constrained</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>No constraints</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

Behavior:

• First pane: Cannot resize below 20% or above 40%
• Second pane: Cannot resize below 30% or above 60%
• Separator stops when limit reached

Use case: Ensure navigation panels stay visible, content areas have minimum space.

Mixed Units (Pixels and Percentages)

<SplitterPane Size="200px" Min="100px" Max="400px">
    <!-- Constrained between 100px and 400px -->
</SplitterPane>

<SplitterPane Size="30%" Min="200px" Max="60%">
    <!-- Constrained between 200px minimum and 60% maximum -->
</SplitterPane>

Prevent Resizing

Disable resizing for specific panes using Resizable="false".

Disable Resizing on One Pane

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px" SeparatorSize="4">
    <SplitterPanes>
        <SplitterPane Size="200px" Min="20%" Max="40%" Resizable="false">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid (Fixed)</h3>
                    <p>Cannot resize - Resizable=false</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px" Min="30%" Max="60%">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule (Resizable)</h3>
                    <p>Can resize normally</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>Can resize</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

Important: Both the pane and its adjacent pane must be resizable for resizing to work. If either has Resizable="false", the separator between them won't resize.

Use case: Fixed-width sidebars, locked navigation panels, preventing accidental resize.

Programmatic Control

Control expand/collapse via public methods on the SfSplitter component.

Expand Method

@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="@Expand">Expand Pane 0</SfButton>
<SfButton @onclick="@Collapse">Collapse Pane 0</SfButton>

<SfSplitter @ref="SplitterObj" Height="200px" Width="600px" SeparatorSize="2">
    <SplitterPanes>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>PARIS</h3>
                    <p>Pane 0</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>CAMEMBERT</h3>
                    <p>Pane 1</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>GRENOBLE</h3>
                    <p>Pane 2</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

@code {
    private SfSplitter SplitterObj;

    private async Task Expand()
    {
        // Expand pane at index 0
        await this.SplitterObj.ExpandAsync(0);
    }

    private async Task Collapse()
    {
        // Collapse pane at index 0
        await this.SplitterObj.CollapseAsync(0);
    }
}

Methods:

• ExpandAsync(int index): Expands pane at given index
• CollapseAsync(int index): Collapses pane at given index

Use case: Expand/collapse via button clicks, keyboard shortcuts, or menu items.

Initial Collapsed State

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px" SeparatorSize="2">
    <SplitterPanes>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">First Pane (Expanded)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true" Collapsed="true">
            <ContentTemplate>
                <div style="padding: 10px;">Second Pane (Initially Collapsed)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Third Pane (Expanded)</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool secondPaneCollapsed { get; set; } = true;
}

Collapsed="true": Pane renders in collapsed state on page load.

Two-Way Binding with Collapsed State

@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="@ToggleSidebar">Toggle Sidebar</SfButton>

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="25%" Collapsible="true" @bind-Collapsed="@sidebarCollapsed">
            <ContentTemplate>
                <div style="padding: 10px;">Sidebar (Collapsed: @sidebarCollapsed)</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">Main Content</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool sidebarCollapsed = false;

    private void ToggleSidebar()
    {
        sidebarCollapsed = !sidebarCollapsed;
    }
}

@bind-Collapsed: Two-way binding between pane state and component property. Changes to either side sync automatically.

Customize Resize Icon

Override default resize gripper and cursor using CSS.

Customize Resize Handler

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px" SeparatorSize="3">
    <SplitterPanes>
        <SplitterPane Size="200px" Min="20%" Max="40%">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid</h3>
                    <p>Custom resize icon</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px" Min="30%" Max="60%">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule</h3>
                    <p>Custom resize icon</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>Custom resize icon</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
    
    /* Customize resize handler icon */
    .e-splitter .e-split-bar .e-resize-handler:before {
        content: "\e934";
        font-family: 'e-icons';
        font-size: 11px;
        transform: rotate(90deg);
    }
    
    /* Customize cursor for horizontal splitter */
    .e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar,
    .e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar::after {
        cursor: e-resize;
    }
    
    /* Customize cursor for vertical splitter */
    .e-splitter .e-split-bar.e-split-bar-vertical.e-resizable-split-bar,
    .e-splitter .e-split-bar.e-split-bar-vertical.e-resizable-split-bar::after {
        cursor: n-resize;
    }
</style>

Hide Resize Handler

<style>
    /* Hide horizontal resize handler */
    .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
        display: none;
    }
    
    /* Hide vertical resize handler */
    .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
        display: none;
    }
</style>

Use case: Cleaner UI if resize is obvious, accessibility improvements with custom cursors.

Separator Template Customization

Customize the separator appearance using SplitterTemplates with a custom Separator template instead of relying on CSS alone.

Custom Separator Template

@using Syncfusion.Blazor.Layouts

<div>Custom Separator Template</div>
<SfSplitter Height="240px" Width="100%">
    <SplitterTemplates>
        <Separator>
            <div style="height: 10px; background: linear-gradient(to bottom, #ff6b6b, #ee5a6f); border-top: 1px solid #d63031; border-bottom: 1px solid #d63031;"></div>
        </Separator>
    </SplitterTemplates>
    <SplitterPanes>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">Left Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">Middle Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">Right Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Behavior: The <Separator> template replaces the default separator rendering completely with your custom HTML/CSS.

When to use: Brand-specific separator styling, animated separators, unique UI designs.

Advanced: Interactive Separator

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterTemplates>
        <Separator>
            <div style="display: flex; align-items: center; justify-content: center; background: #f0f0f0; cursor: grab; user-select: none;">
                <span style="font-size: 20px; color: #999;">⋮ ⋮</span>
            </div>
        </Separator>
    </SplitterTemplates>
    <SplitterPanes>
        <SplitterPane Size="30%">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h3>Interactive Separator</h3>
                    <p>Grab the dots above to resize</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h3>Content Area</h3>
                    <p>Custom separator improves usability</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Output: Separator shows visual indicator (dots) with grab cursor.

Template with Blazor Components

@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

<SfSplitter Height="300px" Width="100%">
    <SplitterTemplates>
        <Separator>
            <div style="background: #e0e0e0; display: flex; align-items: center; justify-content: center; gap: 10px;">
                <SfButton IconCss="e-icon-arrow-left" CssClass="e-small" Disabled="true"></SfButton>
                <div style="width: 2px; height: 30px; background: #999;"></div>
                <SfButton IconCss="e-icon-arrow-right" CssClass="e-small" Disabled="true"></SfButton>
            </div>
        </Separator>
    </SplitterTemplates>
    <SplitterPanes>
        <SplitterPane Size="30%">
            <ContentTemplate><div style="padding: 20px;">Left</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div style="padding: 20px;">Right</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Key Points about Templates

• Override HTML: Template replaces entire separator element
• Responsive: Template scales with splitter dimensions
• Functional: Resize still works with custom template
• Styling: Apply CSS directly in template for visual effects
• Performance: Complex templates may impact resize performance

Best practices:

• Keep template simple for performance
• Ensure adequate height/width for usability
• Maintain hover/active states visually

Refresh Content on Resize

Pane content (charts, grids) should refresh when container resizes:

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="400px" Width="100%">
    <SplitterEvents OnResizeStop="@RefreshChart" />
    <SplitterPanes>
        <SplitterPane Size="50%" Min="300px">
            <SfChart @ref="chartRef" Title="Sample Chart" Height="100%">
                <ChartSeriesCollection>
                    <ChartSeries DataSource="@SalesData" XName="Month" YName="Sales" Type="ChartSeriesType.Column"></ChartSeries>
                </ChartSeriesCollection>
            </SfChart>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 20px;">Details Panel</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private SfChart chartRef;
    private List<DataPoint> SalesData = new();

    protected override void OnInitialized()
    {
        SalesData = new List<DataPoint>
        {
            new DataPoint { Month = "Jan", Sales = 100 },
            new DataPoint { Month = "Feb", Sales = 150 },
            new DataPoint { Month = "Mar", Sales = 120 }
        };
    }

    private async Task RefreshChart(ResizingEventArgs args)
    {
        if (chartRef != null)
            await chartRef.Refresh();
    }

    public class DataPoint
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }
}

---

Next: Read Styling and Theming for custom appearance and theme options.

Split Panes and Layouts

Table of Contents

• Horizontal Layout
• Vertical Layout
• Separator Customization
• Multiple Panes
• Nested Splitters

Horizontal Layout

Default behavior: The Splitter renders in horizontal orientation with vertical separators dividing the container left-to-right.

Basic Horizontal Example

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid</h3>
                    <p>The ASP.NET DataGrid control is a feature-rich control used to display data in a tabular format.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule</h3>
                    <p>The ASP.NET Scheduler facilitates almost all calendar features for efficient time management.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>ASP.NET charts are used to add beautiful charts in web and mobile applications.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

Output: Three equal-width horizontal panes. Users can drag the vertical separators to resize.

When to use: Side-by-side content comparison, sidebar + main content layouts, three-column dashboards.

Vertical Layout

Use Orientation="Orientation.Vertical" to split the container top-to-bottom with horizontal separators.

Basic Vertical Example

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="305px" Width="600px" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="100px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid</h3>
                    <p>The ASP.NET DataGrid control is a feature-rich control used to display data in a tabular format.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="100px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule</h3>
                    <p>The ASP.NET Scheduler facilitates almost all calendar features for efficient time management.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="100px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>ASP.NET charts are used to add beautiful charts in web and mobile applications.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 9px;
    }
</style>

Output: Three stacked vertical panes. Users drag horizontal separators to adjust heights.

When to use: Toolbar + content + status bar layouts, code editor (top editors + bottom terminal), top navigation + main + footer.

Separator Customization

Customize the separator width/height using the SeparatorSize property (default: 1px).

Example: Thicker Separator

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="250px" Width="600px" SeparatorSize="5">
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid</h3>
                    <p>Grid component content.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule</h3>
                    <p>Schedule component content.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>Chart component content.</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

Effects:

• Horizontal splitter: SeparatorSize sets width (horizontal separator thickness)
• Vertical splitter: SeparatorSize sets height (vertical separator thickness)

Use case: Make separators more visible/easier to drag by increasing size.

Multiple Panes

The Splitter supports any number of panes (2, 3, 4, or more). Add additional SplitterPane elements for more divisions.

Four Horizontal Panes

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="800px">
    <SplitterPanes>
        <SplitterPane Size="150px">
            <ContentTemplate><div style="text-align: center; padding: 20px;">Pane 1</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="150px">
            <ContentTemplate><div style="text-align: center; padding: 20px;">Pane 2</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="150px">
            <ContentTemplate><div style="text-align: center; padding: 20px;">Pane 3</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="150px">
            <ContentTemplate><div style="text-align: center; padding: 20px;">Pane 4</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Behavior: Each pane can be resized independently. The last pane is flexible (auto-adjusts when others change).

Tip: For more than 3 panes, consider using nested splitters for complex layouts instead of all horizontal/vertical panes.

Nested Splitters

Create complex layouts by nesting splitters. The inner splitter must have 100% width and height to fit its parent pane.

Code Editor Layout (Nested Horizontal + Vertical)

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="400px" Width="600px" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <!-- Top Pane: Three-Column Editor -->
        <SplitterPane Size="53%" Min="30%">
            <SfSplitter Height="100%" Width="100%">
                <SplitterPanes>
                    <SplitterPane Size="29%" Min="23%">
                        <ContentTemplate>
                            <div style="padding: 10px;">
                                <h3>HTML</h3>
                                <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div&gt;Hello&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
                            </div>
                        </ContentTemplate>
                    </SplitterPane>
                    <SplitterPane Size="20%" Min="15%">
                        <ContentTemplate>
                            <div style="padding: 10px;">
                                <h3>CSS</h3>
                                <pre>body {
  font-family: Arial;
  margin: 0;
}</pre>
                            </div>
                        </ContentTemplate>
                    </SplitterPane>
                    <SplitterPane Size="35%" Min="35%">
                        <ContentTemplate>
                            <div style="padding: 10px;">
                                <h3>JavaScript</h3>
                                <pre>console.log('Hello');
document.ready();</pre>
                            </div>
                        </ContentTemplate>
                    </SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </SplitterPane>
        
        <!-- Bottom Pane: Preview -->
        <SplitterPane Size="47%" Min="30%">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Preview</h3>
                    <img src="preview.png" style="width: 100%; height: auto;" />
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Layout structure:

• Outer splitter: Vertical (top = editors, bottom = preview)
• Inner splitter (top pane): Horizontal (left = HTML, center = CSS, right = JS)

When to use: Code editors, IDEs, advanced dashboards with sub-sections.

Nested Splitters Best Practice

// Parent splitter (vertical)
<SfSplitter Height="500px" Width="100%">
    <SplitterPanes>
        <!-- Pane 1: Contains nested splitter -->
        <SplitterPane Size="60%">
            <!-- Nested splitter (horizontal) -->
            <SfSplitter Height="100%" Width="100%">
                <!-- Nested panes -->
            </SfSplitter>
        </SplitterPane>
        
        <!-- Pane 2: Simple content -->
        <SplitterPane Size="40%">
            <ContentTemplate>...</ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Key points:

• Inner splitter must have Height="100%" and Width="100%"
• Parent pane container must have defined size (e.g., Size="60%")
• Supports unlimited nesting levels (but performance degrades with deep nesting)

Auto-Sizing Panes

When panes don't specify a Size, they auto-adjust based on flex layout.

Auto-Sizing Example

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Grid</h3>
                    <p>Auto-sized pane</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Schedule</h3>
                    <p>Auto-sized pane</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Chart</h3>
                    <p>Auto-sized pane</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Behavior: All panes divide the container equally. If a pane is hidden or added, remaining panes auto-adjust.

When to use: Responsive designs where panes should share space equally, add/remove panes dynamically.

Add or Remove Panes Dynamically

Panes can be added or removed programmatically using the AddPaneAsync and RemovePaneAsync methods. This enables dynamic layout management based on user actions.

Add Pane Dynamically

Add new panes at runtime using AddPaneAsync with pane properties and insertion index:

@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

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

<SfSplitter @ref="SplitterObj" Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane Size="190px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Pane 1</h3>
                    <p>Initial pane</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="190px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Pane 2</h3>
                    <p>Initial pane</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 9px;
    }
</style>

@code {
    private SfSplitter SplitterObj;
    private int paneCount = 2;

    private async Task AddPane()
    {
        paneCount++;
        var newPane = new SplitterPane()
        {
            Size = "190px",
            Content = $"Pane {paneCount}",
            Min = "30px",
            Max = "250px"
        };
        
        // Add pane at index 1 (between pane 1 and pane 2)
        await this.SplitterObj.AddPaneAsync(newPane, 1);
    }
}

Behavior:

• New pane inserted at specified index
• Existing panes shift right/down
• Separators automatically added
• Layout recalculates automatically

AddPaneAsync Parameters:

• pane: SplitterPane object with properties (Size, Content, Min, Max, etc.)
• index: Where to insert (0-based position)

Remove Pane Dynamically

Remove panes at runtime using RemovePaneAsync with pane index:

@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="@RemovePane">Remove Pane 2</SfButton>

<SfSplitter @ref="SplitterObj" Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane Size="190px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Pane 1</h3>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="190px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Pane 2 (Removable)</h3>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="190px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Pane 3</h3>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 9px;
    }
</style>

@code {
    private SfSplitter SplitterObj;

    private async Task RemovePane()
    {
        // Remove pane at index 1
        await this.SplitterObj.RemovePaneAsync(1);
    }
}

Behavior:

• Pane at index removed
• Remaining panes shift left/up
• Adjacent separator removed
• Layout recalculates automatically

RemovePaneAsync Parameters:

• index: Pane index to remove (0-based)

Complete Add/Remove Example

@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

<div style="margin-bottom: 15px;">
    <SfButton @onclick="@AddPane" CssClass="e-outline">Add Pane</SfButton>
    <SfButton @onclick="@RemovePane" CssClass="e-outline">Remove Selected</SfButton>
    <p>Total Panes: @paneCount</p>
</div>

<SfSplitter @ref="SplitterObj" Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="25%">
            <ContentTemplate>
                <div style="padding: 15px; background: #f5f5f5; height: 100%; overflow: auto;">
                    <h3>Pane 1</h3>
                    <button @onclick="@(() => RemovePaneAtIndex(0))" style="padding: 5px 10px; margin-bottom: 10px;">Remove Me</button>
                    <p>Click button to remove this pane</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="25%">
            <ContentTemplate>
                <div style="padding: 15px; background: #f9f9f9; height: 100%; overflow: auto;">
                    <h3>Pane 2</h3>
                    <button @onclick="@(() => RemovePaneAtIndex(1))" style="padding: 5px 10px; margin-bottom: 10px;">Remove Me</button>
                    <p>Click button to remove this pane</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private SfSplitter SplitterObj;
    private int paneCount = 2;

    private async Task AddPane()
    {
        paneCount++;
        var newPane = new SplitterPane()
        {
            Size = "25%",
            Content = $"Pane {paneCount}",
            Min = "50px"
        };
        
        await this.SplitterObj.AddPaneAsync(newPane, paneCount - 1);
    }

    private async Task RemovePane()
    {
        if (paneCount > 1)
        {
            paneCount--;
            await this.SplitterObj.RemovePaneAsync(paneCount);
        }
    }

    private async Task RemovePaneAtIndex(int index)
    {
        paneCount--;
        await this.SplitterObj.RemovePaneAsync(index);
    }
}

Use Cases

Add Pane:

• Expand layout with new content areas
• Multi-step wizards (add panels as user progresses)
• Dynamic form sections
• Tab-like interface with splitter

Remove Pane:

• Close optional panels
• Clean up temporary views
• Minimize interface for focused work
• Handle variable content scenarios

Best Practices

For Adding Panes:

• Validate pane properties before adding
• Consider container size when adding multiple panes
• Update pane count tracking
• Provide visual feedback when pane added

For Removing Panes:

• Prevent removing all panes (keep at least one)
• Warn if pane contains unsaved data
• Update UI state after removal
• Recalculate dependent layouts

// ✅ Good: Prevent removing last pane
private async Task RemovePaneIfValid(int index)
{
    if (paneCount > 1)
    {
        paneCount--;
        await this.SplitterObj.RemovePaneAsync(index);
    }
    else
    {
        Console.WriteLine("Cannot remove last pane");
    }
}

// ✅ Good: Add with validation
private async Task AddPaneIfValid(SplitterPane pane)
{
    if (pane != null && !string.IsNullOrEmpty(pane.Content))
    {
        paneCount++;
        await this.SplitterObj.AddPaneAsync(pane, paneCount - 1);
    }
}

---

Next: Read Pane Configuration and Settings to learn about sizing, constraints, and content options.

State Management and Persistence

Table of Contents

• State Persistence
• Persisted Properties
• Two-Way Data Binding
• Manual State Saving

State Persistence

The Splitter can automatically save pane state to browser localStorage using the EnablePersistence property.

Enable Persistence

@using Syncfusion.Blazor.Layouts

<SfSplitter ID="Splitter" Height="300px" Width="100%" EnablePersistence="true">
    <SplitterPanes>
        <SplitterPane Size="25%" Min="60px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <div style="text-align: center;">
                        <div>Left pane</div>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="50%" Min="60px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <div style="text-align: center;">
                        <div>Middle pane</div>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Min="60px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <div style="text-align: center;">
                        <div>Right pane</div>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    // State automatically saved to localStorage under key: "Splitter"
}

How it works: 1. Set EnablePersistence="true" 2. Set unique ID (required for localStorage key) 3. User resizes/collapses panes → state saved to localStorage 4. Page refreshes → state restored from localStorage 5. State persists across sessions

Important: The ID property is crucial for persistence. Each splitter must have a unique ID.

Persisted Properties

When persistence is enabled, these pane properties are automatically saved and restored:

Example: Verify Persistence

@using Syncfusion.Blazor.Layouts

<h2>Resize panes, then refresh the page - state is restored</h2>

<SfSplitter ID="PersistentSplitter" Height="300px" Width="100%" EnablePersistence="true">
    <SplitterPanes>
        <SplitterPane Size="30%" Min="100px" Max="50%" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <p>Pane 1: Resize me or collapse, then refresh</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="40%" Min="100px" Max="60%" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <p>Pane 2: This state will persist</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Min="100px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <p>Pane 3: Browser refresh keeps your layout</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Two-Way Data Binding

Bind pane properties to component variables for programmatic control with @bind-PropertyName.

Two-Way Binding Example

@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

<div>
    <SfButton @onclick="@ToggleSidebar">Toggle Sidebar</SfButton>
    <p>Sidebar Collapsed: @sidebarCollapsed</p>
</div>

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="25%" Min="60px" Collapsible="true" @bind-Collapsed="@sidebarCollapsed">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <div style="text-align: center;">
                        <div>Sidebar (Two-Way Bound)</div>
                        <p>Collapsed: @sidebarCollapsed</p>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="50%" Min="60px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <div style="text-align: center;">
                        <div>Main Content</div>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Min="60px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <div style="text-align: center;">
                        <div>Right Panel</div>
                    </div>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool sidebarCollapsed = false;

    private void ToggleSidebar()
    {
        sidebarCollapsed = !sidebarCollapsed;
    }
}

How it works:

• @bind-Collapsed="@sidebarCollapsed" binds pane state to variable
• Collapse in UI → variable updates automatically
• Toggle variable in code → pane updates automatically
• Bidirectional synchronization in real-time

Bind Multiple Properties

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane 
            Size="@pane1Size" 
            @bind-Size="@pane1Size"
            Min="@paneMin"
            Collapsible="true" 
            @bind-Collapsed="@pane1Collapsed">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <p>Size: @pane1Size</p>
                    <p>Collapsed: @pane1Collapsed</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane 
            Size="@pane2Size" 
            @bind-Size="@pane2Size"
            Min="@paneMin"
            Collapsible="true" 
            @bind-Collapsed="@pane2Collapsed">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <p>Size: @pane2Size</p>
                    <p>Collapsed: @pane2Collapsed</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private string pane1Size = "30%";
    private string pane2Size = "70%";
    private string paneMin = "100px";
    private bool pane1Collapsed = false;
    private bool pane2Collapsed = false;
}

Combined: Persistence + Two-Way Binding

Use both together for powerful state management:

@using Syncfusion.Blazor.Layouts

<h3>State persists to localStorage AND syncs with component variables</h3>

<SfSplitter ID="AdvancedSplitter" Height="300px" Width="100%" EnablePersistence="true">
    <SplitterPanes>
        <SplitterPane 
            @bind-Size="@pane1Size" 
            @bind-Collapsed="@pane1Collapsed"
            Min="60px" 
            Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h4>Sidebar</h4>
                    <p>Size: @pane1Size</p>
                    <p>Collapsed: @pane1Collapsed</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane 
            @bind-Size="@pane2Size" 
            @bind-Collapsed="@pane2Collapsed"
            Min="100px" 
            Collapsible="true">
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h4>Main Area</h4>
                    <p>Size: @pane2Size</p>
                    <p>Collapsed: @pane2Collapsed</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private string pane1Size = "25%";
    private string pane2Size = "75%";
    private bool pane1Collapsed = false;
    private bool pane2Collapsed = false;
}

Manual State Saving (No Persistence)

If EnablePersistence="false", manually save state via events:

@using Syncfusion.Blazor.Layouts

<button @onclick="@SaveState">Save State</button>
<button @onclick="@RestoreState">Restore State</button>

<SfSplitter ID="ManualSplitter" Height="300px" Width="100%">
    <SplitterEvents OnResizeStop="@OnResize" Collapsed="@OnCollapsed" Expanded="@OnExpanded" />
    <SplitterPanes>
        <SplitterPane Size="30%" Collapsible="true">
            <ContentTemplate><div style="padding: 20px;">Pane 1</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div style="padding: 20px;">Pane 2</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private SplitterState savedState = new();

    private void OnResize(ResizingEventArgs args)
    {
        // Save size changes
    }

    private void OnCollapsed(ExpandedEventArgs args)
    {
        // Save collapsed state
    }

    private void OnExpanded(ExpandedEventArgs args)
    {
        // Save expanded state
    }

    private void SaveState()
    {
        // Manually serialize and save state
        savedState.Pane1Size = "30%";
        savedState.Pane1Collapsed = false;
        Console.WriteLine("State saved");
    }

    private void RestoreState()
    {
        // Manually restore state from saved data
        Console.WriteLine("State restored");
    }

    public class SplitterState
    {
        public string Pane1Size { get; set; }
        public bool Pane1Collapsed { get; set; }
    }
}

Troubleshooting

Issue: Persistence not working

• Verify EnablePersistence="true" is set
• Verify unique ID is provided (not empty)
• Check browser DevTools → Application → LocalStorage for key with splitter ID
• Ensure localStorage is not disabled or full

Issue: State not updating with two-way binding

• Verify @bind-PropertyName syntax is correct
• Check that property matches the binding (e.g., @bind-Collapsed not @bind-Collapsible)
• Ensure public property is defined in @code block

---

Next: Read Advanced Scenarios and Layouts for complex layout patterns and best practices.