If you have technical questions, please create a support ticket in the DevExpress Support Center.
<div class="dx-viewport">
<div class="demo-container">
Html.DevExtreme().Splitter() (
.ID("splitter")
.Items(items => {
items.Add()
.Resizable(true)
.Size("140px")
.MinSize("70px")
.Template(new JS("function(data, itemIndex, itemElement){return paneContentTemplate(data, itemElement, 'Left Pane')}"));
items.Add().Splitter(s => {
s.Orientation(Orientation.Vertical);
s.Items(verticalItems => {
verticalItems.Add()
.Resizable(true)
.Collapsible(true)
.MaxSize("75%")
.CollapsedSize("8%")
.Template(new JS("function(data, itemIndex, itemElement){return paneContentTemplate(data, itemElement, 'Central Pane')}"));
verticalItems.Add()
.Collapsible(true)
.Splitter(horizontalSplitter => {
horizontalSplitter.Orientation(Orientation.Horizontal);
horizontalSplitter.Items(horizontalItems => {
horizontalItems.Add()
.Resizable(true)
.Collapsible(true)
.Size("30%")
.MinSize("5%")
.Template(new JS("function(data, itemIndex, itemElement){return paneContentTemplate(data, itemElement, 'Nested Left Pane')}"));
horizontalItems.Add()
.Collapsible(false)
.Template(new JS("function(data, itemIndex, itemElement){return paneContentTemplate(data, itemElement, 'Nested Central Pane')}"));
horizontalItems.Add()
.Resizable(true)
.Collapsible(true)
.Size("30%")
.MinSize("5%")
.Template(new JS("function(data, itemIndex, itemElement){return paneContentTemplate(data, itemElement, 'Nested Right Pane')}"));
});
});
});
});
items.Add()
.Resizable(false)
.Collapsible(false)
.Size("140px")
.Template(new JS("function(data, itemIndex, itemElement){return paneContentTemplate(data, itemElement, 'Right Pane')}"));
})
)
</div>
</div>
<script>
function getStateText(data) {
if (data.resizable !== false && !data.collapsible) {
return 'Resizable only';
}
const resizableText = data.resizable ? 'Resizable' : 'Non-resizable';
const collapsibleText = data.collapsible ? 'collapsible' : 'non-collapsible';
return `${resizableText} and ${collapsibleText}`;
}
function paneContentTemplate(data, element, paneName) {
const dimensionOptions = new Set(['size', 'minSize', 'maxSize', 'collapsedSize']);
const filteredData = Object.fromEntries(
Object.entries(data)
.filter(([key]) => dimensionOptions.has(key))
);
element.attr('tabIndex', '0');
return `
<div class='pane-content'>
<div class='pane-title'>
${paneName}
</div>
<div class='pane-state'>
${getStateText(data)}
</div>
${Object.entries(filteredData).map(([key, value]) => `
<div class="pane-option">${key}: ${value}</div>
`).join('')}
</div>
`;
}
</script>
xxxxxxxxxx
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class SplitterController : Controller {
public ActionResult Overview() {
return View();
}
}
}
xxxxxxxxxx
.demo-container {
height: 500px;
}
#splitter {
border: 1px solid var(--dx-color-border);
border-radius: 8px;
overflow: hidden;
}
.pane-content {
padding: 12px;
}
.pane-title {
font-weight: 600;
margin-bottom: 2px;
}
.pane-state {
font-size: var(--dx-font-size-xs);
margin-bottom: 4px;
}
.pane-option {
color: var(--dx-texteditor-color-label);
font-size: 10px;
}
#splitter > .dx-splitter-item:first-child > .dx-splitter-item-content:focus {
border-start-start-radius: 8px;
border-end-start-radius: 8px;
}
#splitter > .dx-splitter-item:last-child > .dx-splitter-item-content:focus {
border-end-end-radius: 8px;
border-start-end-radius: 8px;
}
.dx-splitter-item-content:focus {
outline: none;
box-shadow: inset 0 0 0 1px var(--dx-color-primary);
}
To specify individual splitter panes, set the items or dataSource property. Use dataSource if data is remote or should be processed. If you specify multiple panes, they will appear one after another with splitters between them.
The following base options are available for a pane:
-
resizable (default:
true
)
If true, a handle appears at the side of the pane. Drag the handle to adjust pane size. -
collapsible (default:
false
)
If true, an arrow appears on the handle. Click the arrow to close the pane. -
collapsed (default:
false
)
Specifies whether the pane is initially collapsed.
To configure the layout of the Splitter component, you can specify its orientation as 'vertical' or 'horizontal' (default). All Splitter "size" properties depend on the orientation. If it is 'horizontal', "size" is the width. Otherwise, it is height. The following pane "size" properties can be specified:
-
size
Initial pane width/height. -
minSize
Minimum width/height for a resizable pane. -
maxSize
Maximum width/height for a resizable pane. -
collapsedSize
The width/height of a collapsible pane when collapsed.
You can also place one Splitter inside another to create nested layouts. To do so, use the pane's splitter property.
Splitter panes can include different content types, from simple HTML markup to components. You can declare HTML markup inside the item tag or use the following properties to populate panes with content:
-
itemTemplate
Specifies a custom template for all panes. -
template
Specifies a custom template for an individual pane.