syncfusion-aspnetcore-splitter

Implementing Syncfusion ASP.NET Core Splitter

When to Use This Skill

Use this skill when you need to:

• Create responsive multi-pane layouts with the Splitter component
• Configure horizontal and vertical split panes
• Set up pane sizing (pixels, percentages, auto)
• Enable or disable pane resizing with min/max constraints
• Add HTML, plain text, or Syncfusion controls as pane content
• Implement expand/collapse functionality for panes
• Build nested splitters for complex layouts
• Customize splitter styling and appearance
• Enable RTL (right-to-left) support for globalization

Component Overview

The Syncfusion ASP.NET Core Splitter is a layout/container control that allows you to create complex multi-pane applications. It supports:

• Multiple panes with horizontal and vertical orientations
• Flexible sizing using pixels, percentages, or automatic sizing
• Resizable panes with drag handles and min/max constraints
• Collapsible panes with expand/collapse buttons
• Rich content including HTML, text, and other Syncfusion controls
• Nested splitters for hierarchical layout architectures
• Customizable styling and RTL support

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet package installation
• Tag helper registration
• Stylesheet and script setup
• Creating your first splitter
• Basic two-pane configuration
• Orientation setup

Split Pane Layouts

📄 Read: references/split-pane-layouts.md

• Horizontal vs vertical layouts
• Multiple pane configurations
• Separator customization
• Nested splitter implementation
• Layout patterns for complex designs

Pane Content

📄 Read: references/pane-content.md

• HTML markup as pane content
• Syncfusion controls within panes
• Plain text content
• Content templates
• Selector-based content loading
• JavaScript initialization approach (Accordion + ListView)

Pane Sizing and Resizing

📄 Read: references/pane-sizing-and-resizing.md

• Pixel-based pane sizing
• Percentage-based sizing
• Auto-sizing panes
• Min/max size constraints
• Enabling/disabling resize
• Resize events and gripper customization

Expand and Collapse

📄 Read: references/expand-collapse.md

• Collapsible pane configuration
• Programmatic expand/collapse methods
• Initial collapsed state
• Expand/collapse events

Styling and Globalization

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

• CSS customization for split bars
• Resize handle styling
• Custom themes
• RTL (right-to-left) support
• Accessibility features

API Reference

📄 Read: references/api-reference.md

• Complete Splitter properties documentation
• Pane properties with examples
• Methods (expand, collapse, addPane, removePane)
• All events with event handlers
• Event argument objects and properties
• Complete working examples

Quick Start Example

<!-- _Layout.cshtml -->
<head>
    <link rel="stylesheet" href="url" />
    <script src="url"></script>
</head>

<body>
    @RenderBody()
    <ejs-scripts></ejs-scripts>
</body>

<!-- Index.cshtml -->
@addTagHelper *, Syncfusion.EJ2

<ejs-splitter id="splitter" height="400px">
    <e-splitter-panes>
        <e-splitter-pane size="50%">
            <div class="content">
                <h3>Pane 1</h3>
                <p>Left pane content</p>
            </div>
        </e-splitter-pane>
        <e-splitter-pane size="50%">
            <div class="content">
                <h3>Pane 2</h3>
                <p>Right pane content</p>
            </div>
        </e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

Common Patterns

Two-Pane Layout (Left Navigation + Content)

<ejs-splitter id="splitter" height="600px">
    <e-splitter-panes>
        <e-splitter-pane size="25%" min="20%"></e-splitter-pane>
        <e-splitter-pane size="75%" min="40%"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

Three-Pane Layout (Master, Detail, Preview)

<ejs-splitter id="splitter" height="600px">
    <e-splitter-panes>
        <e-splitter-pane size="30%" min="20%"></e-splitter-pane>
        <e-splitter-pane size="40%" min="25%"></e-splitter-pane>
        <e-splitter-pane size="30%" min="20%"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

Vertical Stack (Header, Main, Footer)

<ejs-splitter id="splitter" height="600px" orientation="Vertical">
    <e-splitter-panes>
        <e-splitter-pane size="15%" min="50px"></e-splitter-pane>
        <e-splitter-pane size="70%" min="100px"></e-splitter-pane>
        <e-splitter-pane size="15%" min="50px"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

Key Pane Configuration Properties

Property	Type	Purpose
size	string	Pane size in pixels ("200px") or percentage ("50%")
min	string	Minimum size to prevent over-resizing
max	string	Maximum size to limit expansion
resizable	bool	Enable/disable resize for this pane (default: true)
collapsible	bool	Enable/disable collapse button (default: false)
collapsed	bool	Initial collapsed state (default: false)
content	string	HTML or text content for pane

Common Use Cases

1. Code Editor Layout - Split code editor with preview/output pane
2. Dashboard - Multiple sections with resizable panels
3. Email Client - Folder list, message list, message detail
4. IDE Interface - Project explorer, editor, properties panel
5. Document Editor - Ribbon, canvas, properties, preview
6. File Manager - Tree view, file list, preview
7. Chat Application - Conversation list, chat area, user info

Next Steps

• Review the Getting Started guide for installation and basic setup
• Choose your layout pattern from Split Pane Layouts
• Configure pane sizing in Pane Sizing and Resizing
• Add rich content using Pane Content options
• Implement advanced features like Expand and Collapse
• Apply custom styling from Styling and Globalization