OBSOLETE - How to extend the SlideOutLayout and create a custom CommandManager

This example is OBSOLETE. The approach described here cannot be used in version 13.2 and older. At the moment, there is no alternative solution.


[Old content]
This example demonstrates how to add one more List to the SlideOutLayout and divide commands into two groups.

The first thing to do is create a copy of the SlideOutLayout.hml file, and add one more List to it. Actually, you only need to create a copy of the existing list. Then, create a CSS rule for the second List to always keep it on the bottom edge and one more CSS rule for the partial view that contains both Lists:

[CSS]
.layout-list-bottom{position:absolute;bottom:0;height:auto;width:100%;}.nav-list{height:100%;}

Create a separate file (CustomLayout.css, for example) and put the code above into this file. In addition, change the data-dx-command-container attribute of each dxList, so it define a custom location. The default location name is "navigation", but we will use "navigationTop" and "navigationBottom" names to help the CommandManager to find an appropriate container.

[HTML]
<divclass="nav-patrial-view"data-options="dxView : { name: 'custom-nav-list' } "><divdata-bind="dxList: {}"style="height: 100%"data-options="dxCommandContainer : { locations: [{'name':'navigationTop'}] } "><divdata-bind="visible: visible, css: { 'dx-state-disabled': disabled }"data-options="dxTemplate : { name: 'item' } "><divdata-bind="click: clickAction"><!-- ko if: icon --><spandata-bind="attr: { 'class': 'dx-icon dx-icon-' + icon }"></span><!-- /ko --><!-- ko if: iconSrc --><imgclass="dx-icon"data-bind="attr: { src: iconSrc }"/><!-- /ko --><divclass="dx-navigation-item"data-bind="text: title"></div></div></div></div><divdata-bind="dxList: {}"class="layout-list-bottom"data-options="dxCommandContainer : { locations: [{'name':'navigationBottom'}] } "><divdata-bind="visible: visible, css: { 'dx-state-disabled': disabled }"data-options="dxTemplate : { name: 'item' } "><divdata-bind="click: clickAction"><!-- ko if: icon --><spandata-bind="attr: { 'class': 'dx-icon dx-icon-' + icon }"></span><!-- /ko --><!-- ko if: iconSrc --><imgclass="dx-icon"data-bind="attr: { src: iconSrc }"/><!-- /ko --><divclass="dx-navigation-item"data-bind="text: title"></div></div></div></div></div>

Now, all that you need is to specify an appropriate location for commands:

[JScript]
"navigation": [{
        title: "Index",
        action: "#Index",
        icon: "home",
        location: "navigationTop"},{
        title: "About",
        action: "#About",
        icon: "info",
        location: "navigationBottom"}]