Panorama

A widget displaying the required content in a long horizontal canvas that extends beyond the frames of the screen.

Type: Object

dxPanorama is a full screen widget that allows you to locate widgets, display data and provide services by using a long horizontal canvas that extends beyond the frames of the screen. Content is divided into items that can be explored by panning and flicking. When viewing an item, you will be able to see a portion of the item next to it. This widget is often used as a navigation map on the first page of an application. Although dxPanorama was designed based on the native WindowsPhone8 Panorama widget, it can be used on any platform.

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

HTML
<div data-bind="dxPanorama: {
        dataSource: items,
        title: 'Online restaurant'
    }">  
</div>

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

JavaScript
items = [
    {
        header: "Main courses",
        text: "First and second course of a meal"
    },
    {
        header: "Seafood",
        text: "Seafood: ocean and sea"
    },
    {
        header: "Desserts",
        text: "Desserts: biscuits and cookies"
    },
    {
        header: "Drinks",
        text: "Drinks: Soft vine and tea"
    }
]

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

  • disabled - specifies whether or not the panorama item is disabled.
  • visible - specifies whether or not the panorama item is visible.
  • html - specifies the html markup inserted into the item element.
  • text - specifies the text inserted into the item element.
  • header - specifies the name for the panorama item.

You can introduce a custom template for panorama 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, this template will be applied automatically. See the Customize Widget Item Appearance topic to learn more about templates.

HTML
<div data-bind="dxPanorama: { title: 'Online restaurant', dataSource: items }">
    <div data-options="dxTemplate : { name: 'item' } ">
        <div data-bind="text: text"></div>
        <div  data-bind="foreach: images">
            <img data-bind="attr: { src: src }" />
        </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 dxPanorama widget.

Methods

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

Events

This section describes events fired by this component.