SlideOutView

The SlideOutView widget is a classic slide-out menu paired with a view.

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

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.

You can create the widget using one of the following approaches.

  • jQuery

    HTML
    <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>
    CSS
    #slideOutView {
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    JavaScript
    $(function () {
        $("#slideOutView").dxSlideOutView({
            contentTemplate: 'view',
            menuTemplate: 'menu',
        });
    });
  • Angular

    HTML
    <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>
  • AngularJS

    HTML
    <div 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>
  • Knockout

    HTML
    <div 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>
  • ASP.NET MVC Wrappers

    Razor C#
    Razor VB
    @(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

Note that DevExtreme widgets require you to link the jQuery library to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the topics in the Installation section.

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 fired by this widget.