Pivot

A widget that is similar to a traditional tab control, but optimized for the phone with simplified end-user interaction.

Type: Object

The pivot widget includes items (tabs). These items are placed horizontally next to one another and navigated by flicking or panning to the left or right, or by choosing the desired pivot header. While you always see the content of one item (tab), the pivot header of the next item is visible so users can clearly see that more items are available. This widget is often used to present lists of data filtered by different criteria. Although dxPivot was created based on the native WindowsPhone8 Pivot widget, it can be used on any platform.

To create the dxPivot widget, add a div element with dxPivot Knockout binding within the body of the required view.

HTML
<div data-bind="dxPivot: { dataSource: items }">  </div>

The pivot items are loaded from an array specified using the dataSource configuration option.

JavaScript
items = [
    {
        title: "All",
        text: "All - description"
    },
    {
        title: "Family",
        text: "Family - description"
    },
    {
        title: "Friends",
        text: "Friends - description"
    },
    {
        title: "Work",
        text: "Work - description"
    }
]

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

  • disabled - specifies whether or not the pivot item is disabled.
  • visible - specifies whether or not the pivot item is visible.
  • html - specifies the html code inserted into the item element.
  • text - specifies the text inserted into the item element.
  • title - specifies the name for a pivot item.

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

HTML
<div data-bind="dxPivot: { dataSource: items }">
    <div data-options="dxTemplate : { name: 'item' } ">
        <div data-bind="dxList: { dataSource: listItems }">
            <div data-options="dxTemplate : { name: 'item' } ">
                <div data-bind="text: name"></div>
                <div data-bind="text: phone"></div>
                <div data-bind="text: email"></div>
            </div>
        </div>
    </div>
</div>

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

Watch Video

Show Example:
jQuery

Configuration

An object defining configuration options for the dxPivot widget.

Methods

This section describes methods that can be used to manipulate a widget.

Events

This section describes events fired by this component.