SlideOutView

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.

Included in: dx.mobile.js, dx.all.js
Export: default

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the SlideOutView widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
HTML
JavaScript
CSS
<div id="slideOutView">
    <div data-options="dxTemplate: { name: 'view' }">
        <p>View content</p>
    </div>
    <div data-options="dxTemplate: { name: 'menu' }">
        <p>Menu content</p>
    </div>
</div>
$(function () {
    $("#slideOutView").dxSlideOutView({
        contentTemplate: 'view',
        menuTemplate: 'menu',
    });
});
#slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
Angular
HTML
TypeScript
<dx-slide-out-view
    contentTemplate="view"
    menuTemplate="menu">
        <div *dxTemplate="let viewData of 'view'">
            <p>View content</p>
        </div>
        <div *dxTemplate="let menuData of 'menu'">
            <p>Menu content</p>
        </div>
</dx-slide-out-view>
import { DxSlideOutViewModule } from 'devextreme-angular'
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSlideOutViewModule
    ],
    // ...
})
AngularJS
HTML
CSS
<div id="slideOutView" dx-slide-out-view="{
    contentTemplate: 'view',
    menuTemplate: 'menu'
}">
    <div data-options="dxTemplate: { name: 'view' }">
        <p>View content</p>
    </div>
    <div data-options="dxTemplate: { name: 'menu' }">
        <p>Menu content</p>
    </div>
</div>
#slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
Knockout
HTML
CSS
<div id="slideOutView" data-bind="dxSlideOutView: {
    contentTemplate: 'view',
    menuTemplate: 'menu'
}">
    <div data-options="dxTemplate: { name: 'view' }">
        <p>View content</p>
    </div>
    <div data-options="dxTemplate: { name: 'menu' }">
        <p>Menu content</p>
    </div>
</div>
#slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
ASP.NET MVC Controls
Razor C#
Razor VB
CSS
@(Html.DevExtreme().SlideOutView()
    .ID("slideOutView")
    .ContentTemplate(@<text>
        <p>View content</p>
    </text>)
    .MenuTemplate(@<text>
        <p>Menu content</p>
    </text>)
)
@Code
    Html.DevExtreme().SlideOutView() _
        .ID("slideOutView") _
        .ContentTemplate(Sub()
            @<text>
                <p>View content</p>
            </text>
        End Sub) _
        .MenuTemplate(Sub()
            @<text>
                <p>Menu content</p>
            </text>
        End Sub).Render()
End Code
#slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
See Also
Show Example:
AngularJS
Knockout
jQuery

Configuration

An object defining configuration options for the widget.

Methods

This section describes members used to manipulate the widget.

Events

This section describes events that this widget raises.

See Also