Vue SlideOutView - Customize the View

Similar to the slide-out menu, the view also demands a template to be specified. For example, in the following code, the view contains the Toolbar and the Chart UI components. They are both placed into a dxTemplate whose name is assigned to the contentTemplate property of the SlideOutView. All the other code configures the Toolbar and the Chart and does not affect the SlideOutView directly.

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({
        dataSource: [{
            widget: 'dxButton',
            options: {
                icon: 'menu',
                onClick: function (e) {
                    slideOutView.showMenu();
                }
            },
            location: 'before'
        }, {
            text: "Title",
            location: 'center'
        }]
    }).dxToolbar("instance");

    var chart = $("#chart").dxChart({
        dataSource: [],
        commonSeriesSettings: { type: 'bar', argumentField: "text" },
        series: [
            { valueField: "china", name: "China" },
            { valueField: "usa", name: "USA" },
            { valueField: "turkey", name: "Turkey" }
        ],
        legend: {
            orientation: "horizontal",
            verticalAlignment: "bottom",
            horizontalAlignment: "center"
        },
        valueAxis: {
            label: {
                format: { type: "largeNumber", precision: 1 }
            }
        }
    }).dxChart("instance");

    $("#treeView").dxTreeView({
        // TreeView is configured in the "Customize the Menu" article
    });
});

#slideOutView {
    height: auto;
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 100%;
}

The contentTemplate property can also accept a function combining the HTML markup. In this case, you do not need to specify any markup for the view in the HTML file.

HTML

JavaScript

<div id="slideOutView">
    <div data-options="dxTemplate: { name: 'treeView' }">
        <div id="treeView"></div>
    </div>
</div>

$(function() {
    var slideOutView = $("#slideOutView").dxSlideOutView({
        menuTemplate: 'treeView',
        contentTemplate: function (view) {
            view.append(
                $("<div />").attr("id", "toolbar"),
                $("<div />").attr("id", "chart")
            )
        }
    }).dxSlideOutView("instance");

    // The rest is omitted for brevity
});

In addition, you can use a 3rd-party template engine to customize the view. For more information, see the 3rd-Party Template Engines article.

Vue SlideOutView - Customize the View

See Also