View Configuration

This section describes configuration options used to create a view.

layout

Deprecated

Use the resolveLayoutController event of your application instead.

Specifies the name of the layout to show in the current view.

Type: String
Default Value: null

Specify this option only if the view should be shown in a non-default layout.

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.

targetFrame

Specifies the target placeholder for a view that is displayed in the Split layout.

Type: String
Default Value: 'content'
Accepted Values: 'content'|'navigation'

Use this option only if the view that is defined by the current dxView markup component is displayed within the Split predefined layout. Usually, a list view is displayed in the "navigation" placeholder and a detail view is displayed in the "content" placeholder.

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
<div data-options="dxView : { name: 'home' } ">
    <!--...-->
</div>
JavaScript
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.