React ValidationSummary Props

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: {}

You can configure this option in an ASP.NET MVC Control as follows:

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .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<String | Object>

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

Specifies a custom template for items.

Type:

template

Template Data:

Object

The item object to be rendered.

Default Name: 'item'

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:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Object

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
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:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Object

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
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:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Object

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: null

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

onItemClick

A handler for the itemClick event.

Type:

Function

|

String

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Object

The widget's instance.
element

HTMLElement | jQuery

The widget's container.
model

Object

The model data. Available only if you use Knockout.
itemData

Object

The clicked item's data.
itemElement

HTMLElement | jQuery

The item's container. It is an HTML Element or a jQuery Element when you use jQuery.
itemIndex

Number

The clicked item's index.
jQueryEvent

jQuery.Event

Use 'event' instead.

The jQuery event that caused the handler execution. Deprecated in favor of the event field.
event

Event (jQuery or EventObject)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.
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:
e:

Object

Information about the event.

Object structure:
Name Type Description
name

String

The option's short name.
model

Object

The model data. Available only if you use Knockout.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
component

Object

The widget's instance.
fullName

String

The option's full name.
value any

The option's new value.
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.