React SlideOutView - Overview

The SlideOutView UI component is a classic slide-out menu paired with a view. This UI component 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 UI component 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