DevExtreme Vue - 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