DevExtreme Angular - 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.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.