syncfusion 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
- Code Editor Layout - Split code editor with preview/output pane
- Dashboard - Multiple sections with resizable panels
- Email Client - Folder list, message list, message detail
- IDE Interface - Project explorer, editor, properties panel
- Document Editor - Ribbon, canvas, properties, preview
- File Manager - Tree view, file list, preview
- 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