DevExtreme jQuery - 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 widget, we recommend you place a collection widget there. For example, in the following code, the slide-out menu contains the TreeView widget. Note that this widget is placed into a dxTemplate whose name is assigned to the menuTemplate option 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 option 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 option.
$(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.