SlideOut

A widget that allows you to slide-out the current view to reveal an item list.

Type: Object

In its simplest form, this widget consists of a panel that slides out to reveal a menu with an item list. To create the dxSlideOut widget, add a div element with dxSlideOut Knockout binding within the body of the required view.

HTML
<div id="slideOut" data-bind="dxSlideOut:{dataSource: items, selectedIndex: selectedIndex}"></div>

The items in the displayed menu are loaded from an array specified via the dataSource configuration option. You can specify a simple array or the array of objects.

JavaScript
items: [
    { text: 'item1', icon: 'plus' },
    { text: 'item2', icon: 'plus' },
    { text: 'item3', icon: 'plus' }             
],

To display menu items, a default template is applied based on the following fields of the data source item objects.

  • disabled - specifies whether the select box item is disabled.
  • visible - specifies whether the select box item is visible.
  • html - specifies the HTML markup inserted into the item element.
  • text - specifies the text inserted into the item element.

You can introduce a custom template for menu items. For this purpose, add a div element with the data-options attribute set to dxTemplate. Assign the menuItem name to the template. In this instance, this template will be applied automatically. See the Customize Widget Item Appearance topic to learn more about templates.

HTML
<div id="slideOut" data-bind="dxSlideOut:{dataSource: items, selectedIndex: selectedIndex}">
    <div data-options="dxTemplate : { name: 'menuItem' } ">
        This is <div data-bind="text: text"></div>
    </div>
</div>

Menu items can have a selected/deselected state. You can get and set the selected item using the selectedItem option. In addition, you can perform an action when an item is selected. For this purpose, assign the required action to the itemSelectAction option.

You can reveal the menu with items not only by sliding out the widget panel, but also by calling the toggleMenuVisibility() method on any element on the panel, or change the menuVisible option value. To place this element in the widget's panel, introduce a template using the dxTemplate component, and give it the "item" name using the component's name option. In this instance, the template will automatically be applied.

HTML
<div id="slideOut" data-bind="dxSlideOut:{dataSource: items, selectedIndex: selectedIndex, menuVisible: menuVisible}">
    <div data-options="dxTemplate : { name: 'item' } ">
        <div data-bind="dxButton: { text: 'Show Menu', clickAction: function() { menuVisible(!menuVisible()); } }"></div>
        Currently selected menu item is: <b data-bind="text: text"></b>
    </div>
</div>

Refer to the Add a Widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery

Configuration

An object defining configuration options for the dxSlideOut widget.

Methods

This section describes members used to manipulate the widget.

Events

This section describes events fired by this component.