Angular SlideOutView - Customize the Menu
By default, the slide-out menu is empty. To specify its content, declare a template for it. Although the slide-out menu can contain any UI component, we recommend you place a collection UI component there. For example, in the following code, the slide-out menu contains the TreeView UI component. Note that this UI component is placed into a dxTemplate whose name is assigned to the menuTemplate property of the SlideOutView. All the other code configures the TreeView and does not affect the SlideOutView directly.
<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({ width: 200, selectionMode: "single", selectByClick: true, onContentReady: function (e) { e.component.selectItem("1_1"); }, dataSource: [{ id: '1', text: 'Fruits', expanded: true, items: [ { id: '1_1', text: 'Apples', china: 37001601, usa: 4110050 , turkey: 2889000 }, { id: '1_2', text: 'Oranges', china: 14400000, usa: 15700000, turkey: 1800000 } ] }, { id: '2', text: 'Vegetables', expanded: true, items: [ { id: '2_1', text: 'Cucumbers', china: 54300000, usa: 886480, turkey: 1800000 }, { id: '2_2', text: 'Tomatoes', china: 33911935, usa: 10965452, turkey: 5976732 } ] }], onItemSelectionChanged: function (e) { if(e.node.children.length < 1) { slideOutView.hideMenu(); var toolbarItems = toolbar.option("dataSource"); toolbarItems[1].text = e.node.itemData.text; toolbar.option("dataSource", toolbarItems); chart.option("dataSource", [e.node.itemData]); } } }); });
#slideOutView { height: auto; position: absolute; top: 0; bottom: 0; width: 100%; }
The menuTemplate property can also accept a function combining the HTML markup. In this case, you do not need to specify any markup for the slide-out menu in the HTML file.
<div id="slideOutView"> <div data-options="dxTemplate: { name: 'content' }"> <div id="toolbar"></div> <div id="chart"></div> </div> </div>
$(function() { var slideOutView = $("#slideOutView").dxSlideOutView({ menuTemplate: function (menu) { menu.append( $("<div />").attr("id", "treeView") ) }, contentTemplate: 'content' }).dxSlideOutView("instance"); // The rest is omitted for brevity });
By default, the menu slides out from the left side of the screen. To make it slide out from the right side, change the menuPosition property.
$(function() { var slideOutView = $("#slideOutView").dxSlideOutView({ menuTemplate: 'treeView', contentTemplate: 'content', menuPosition: 'inverted' // or "normal" }).dxSlideOutView("instance"); // ... });
In addition, you can use a 3rd-party template engine to customize the menu. For more information, see the 3rd-Party Template Engines article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.