Angular SPA Framework - Markup Components - View - Configuration

This section describes configuration options used to create a view.

disableCache

Indicates whether to cache the view.

Type:

Boolean

By default, this option is not specified, which means that caching of this view is enabled. In this instance, the first time the view is displayed - it is cached. Each following time when this view must be displayed repeatedly, it is obtained from the cache. This allows the application to not have to create this view each time it is displayed. For details on the process of the view display, refer to the View Life Cycle topic.

To disable view caching, set this option to true. In this mode, this view will be created and rendered each time it is displayed.

To disable caching totally for all application views, set the application's disableViewCache configuration option to true.

modal

Indicates whether the view should be displayed in a modal mode.

Type:

Boolean

To display a modal view in a popup window, add the Popup Layout to your application. This layout uses the Popup widget to display a view in a popup window. By default the SimpleLayoutController controller is used to manage the popup window content. So, when defining a modal view, find out which content placeholders and command containers are available in the Simple Layout.

HTML
<div data-options="dxView : { name: 'login', title: 'Log in', modal: true } " >
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
        ...
    </div>
</div>

If a view should be modal in specific scenarios only, do not set the modal option for it. Instead, use the modal parameter when navigating to the view using the navigate() method or the modal option when using a command.

Pay attention to the recommendations given for using modal views in the Modal Contexts article. If it is better to display an "alert"/"confirm" dialog instead of a modal view, use an appropriate method of the DevExpress.ui.dialog object.

name

Specifies the name of the view defined by this markup component.

Type:

String

Default Value: null

Every view has a unique name that serves as an identifier. The framework uses this name to find the view's HTML markup and a JavaScript code. Set this name to the name option of the dxView component defining a view template. In addition, use this name for the JavaScript function that must be called when displaying the view.

orientation

Specifies the target device orientation for this view HTML template.

Type:

String

Accepted Values: 'portrait' | 'landscape'

In addition to device orientation, you can define view HTML templates specific to a device platform or a device type, or set a custom context. For details, refer to the Context Specific Markup topic.

Watch Video

pane

Specifies whether to display the view in the 'master' or 'detail' pane of the Split layout.

Type:

String

Default Value: 'detail'
Accepted Values: 'master' | 'detail'

Use this option if the view is displayed within the predefined Split layout. Usually, a list view is displayed in the 'master' pane and a detail view is displayed in the 'detail' pane.

NOTE
If you navigate from the Split layout to a view displayed within a non-Split layout, set the pane option of the target view to "master". Otherwise, this view can be put to the "details" navigation stack, which can cause unexpected behavior.

title

Specifies the title of the current view.

Type:

String

Default Value: null

Use this option to set a static title for the view.

HTML
<div data-options="dxView : { name: 'home', title: 'Home' } ">
    ...
</div>

If you need to change the view's title dynamically, add an observable title field to the view's ViewModel, as shown below.

HTML
JavaScript
<div data-options="dxView : { name: 'home' } ">
    ...
</div>
MyApp.home = function(params) {
    var viewModel = {
        title: ko.observable('My new title')
    };
    return viewModel;
};

Internally, a ViewModel is populated by the fields that correspond to the options of the respective dxView component. However, the fields that are set explicitly in the ViewModel override the corresponding fields created from the options implicitly. So, the statically set title is available using the title field of the ViewModel, if you don't add the title field explicitly.

NOTE
Check that the layout in which a view is displayed contains a UI element that is bound to the title field of the view's ViewModel. The following code snippet demonstrates how a toolbar's text is bound to the title field of the ViewModel.
    <div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' } " >
        <div
            data-bind="dxToolbar: { dataSource: [ { text: title, location: 'center' } ] }"
            data-options="dxCommandContainer : { id: 'ios-header-toolbar' } " >
        </div>
    </div>

In this instance, the toolbar's text will be set to the value of the statically declared title or of the dynamically set title field of the ViewModel.

If the field to which the layout's element is bound has another name, change the corresponding field name in your ViewModel or the option name in the dxView definition. If a layout does not include a UI element that represents a view title, neither the title field in your ViewModel nor the title option in the dxView definition will have an effect.