DevExtreme jQuery - Overview
The SlideOutView widget is a classic slide-out menu paired with a view. This widget is very similar to the SlideOut with only one difference - the SlideOut always contains the List in the slide-out menu, while the SlideOutView can hold any collection there.
The following code adds the SlideOutView widget to your page. The view contains a Toolbar and a Chart; the slide-out menu contains a TreeView. This example is expanded further in the Customize the View and Customize the Menu articles.
HTML
JavaScript
CSS
<div id="slideOutView">
<div data-options="dxTemplate: { name: 'content' }">
<div id="toolbar"></div>
<div id="chart"></div>
</div>
<div data-options="dxTemplate: { name: 'treeView' }">
<div id="treeView"></div>
</div>
</div>$(function() {
var slideOutView = $("#slideOutView").dxSlideOutView({
menuTemplate: 'treeView',
contentTemplate: 'content'
}).dxSlideOutView("instance");
var toolbar = $("#toolbar").dxToolbar({
// Toolbar is configured in the "Customize the View" article
}).dxToolbar("instance");
var chart = $("#chart").dxChart({
// Chart is configured in the "Customize the View" article
}).dxChart("instance");
$("#treeView").dxTreeView({
// TreeView is configured in the "Customize the Menu" article
});
});#slideOutView {
height: auto;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}See Also
Feedback