Configuration

An object defining configuration options for the widget.

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type: Object
Default Value: {}

When you configure this option in an ASP.NET MVC Control, pass a dictionary as shown in the following code.

Razor C#
Razor VB
@(Html.DevExtreme()
    // other widget options
    // ...
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" },
        // ...
    })
)
@(Html.DevExtreme().WidgetName() _
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type: Boolean
Default Value: false

items

An array of items displayed by the widget.

Type: Array

Generally, the array of items is auto-generated when a validation result is ready. And if you set a custom array of items, it will be overridden by the auto-generated array. So use this option to read the current array of items. Alternatively, you can set the array of items generated by a custom validation engine.

itemTemplate

The template to be used for rendering items.

Type: template
Function parameters:
itemData: Object
The item object to be rendered.
itemIndex: Number
The index of the item to be rendered.
itemElement: jQuery
An HTML element of the item to be rendered.
Return Value: String|DOM Node|jQuery
A template name or a template container.
Default Value: 'item'

A binding context of an item template is the data source object that corresponds to the currently rendered item.

In Knockout approach, you can bind template elements to the item object's fields directly. To access another binding context within an item template, use Knockout binding variables.

In AngularJS Approach, if you need to access item object's fields within a template, use a variable whose name is assigned to the dx-item-alias directive. Add the directive to the widget element to specify an alias to the root object of an item. Without this directive, item object fields are beyond reach. To access another binding context within an item template, use AngularJS binding variables.

See Also

onContentReady

A handler for the contentReady event. Executed when the widget's content is ready. This handler may be executed multiple times during the widget's lifetime depending on the number of times its content changes.

Type: function
Function parameters:
Information about the event.
Object structure:
component: Object
The widget's instance.
element: jQuery
The widget's container.
model: Object
The model data. Available only when using Knockout.
Default Value: null

onDisposing

A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Type: function
Function parameters:
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
model: Object
The model data. Available only if you use Knockout.
Default Value: null

onInitialized

A handler for the initialized event. Executed only once, after the widget is initialized.

Type: function
Function parameters:
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
Default Value: null

You cannot access elements in the widget because this handler is executed before they are ready. Use the onContentReady handler instead.

onItemClick

A handler for the itemClick event.

Type: function |String
Function parameters:
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.
itemData: Object
The data that is bound to the clicked item.
itemElement: jQuery
An HTML element of the item.
itemIndex: Number
Specifies the index of the clicked item.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action when a widget item is clicked.

To navigate to a specific URL when the itemClick event fires, assign that URL or the anchor part (#) of that URL directly to this option as a string.

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget is changed.

Type: function
Function parameters:
Information about the event.
Object structure:
component: Object
The widget instance.
name: String
A short name of the option whose value has been changed.
fullName: String
A full name of the option whose value has been changed; contains a full hierarchy of the option.
value: any
A new value for the option.
element: jQuery
The widget's container.
model: Object
The model data. Available only if you use Knockout.
Default Value: null

validationGroup

Specifies the validation group for which summary should be generated.

Type: String

In the Knockout approach, the ValidationSummary widget should be added to the div element representing the ValidationGroup component. In this instance, you do not have to specify the validationGroup option for the ValidationSummary widget.

If you use the JQuery approach, the validationGroup option should be specified for the ValidationSummary widget to generate a summary for a particular validation group. Assign the validation group name that is specified for the validationGroup option of the validators that extend the editors to be validated.