DevExtreme Angular - 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 widgets. They are both placed into a dxTemplate whose name is assigned to the contentTemplate option of the SlideOutView. All the other code configures the Toolbar and the Chart 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({ 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 option 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.
<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.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.