Vue ValidationSummary Props

An object defining configuration properties for the UI component.

See Also
jQuery
Angular
Vue
React

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Selector: DxElementAttr
Type:

Object

Default Value: {}

jQuery
$(function(){
    $("#validationSummaryContainer").dxValidationSummary({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-validation-summary ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-validation-summary>
import { DxValidationSummaryModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxValidationSummaryModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxValidationSummary ...
        :element-attr="validationSummaryAttributes">
    </DxValidationSummary>
</template>

<script>
import DxValidationSummary from 'devextreme-vue/validation-summary';

export default {
    components: {
        DxValidationSummary
    },
    data() {
        return {
            validationSummaryAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import ValidationSummary from 'devextreme-react/validation-summary';

class App extends React.Component {
    validationSummaryAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <ValidationSummary ...
                elementAttr={this.validationSummaryAttributes}>
            </ValidationSummary>
        );
    }
}
export default App;

hoverStateEnabled

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

Selector: hover-state-enabled
Type:

Boolean

Default Value: false

items

An array of items displayed by the UI component.

Selector: DxItem
Type:

Array<String | CollectionWidgetItem | any>

Raised Events: onOptionChanged

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 property 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.

Selector: item-template
Type:

template

Template Data:

Object

The item object to be rendered.

Default Name: 'item'

See Also

onContentReady

A function that is executed when the UI component is rendered and each time the component is repainted.

Selector: @content-ready
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

ValidationSummary

The UI component's instance.
element

HTMLElement | jQuery

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

Model data. Available only when using Knockout.
Default Value: null

onDisposing

A function that is executed before the UI component is disposed of.

Selector: @disposing
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

ValidationSummary

The UI component's instance.
element

HTMLElement | jQuery

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

Model data. Available only if you use Knockout.
Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Selector: @initialized
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

ValidationSummary

The UI component's instance.
element

HTMLElement | jQuery

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

See Also
jQuery
Angular
Vue
React

onItemClick

A function that is executed when a collection item is clicked or tapped.

Selector: @item-click
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

ValidationSummary

The UI component's instance.
element

HTMLElement | jQuery

The UI component's container.
event

Event (jQuery or EventObject)

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
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.
model any

Model data. Available only if you use Knockout.
Default Value: null

onOptionChanged

A function that is executed after a UI component property is changed.

Selector: @option-changed
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model any

Model data. Available only if you use Knockout.
fullName

String

The path to the modified property that includes all parent properties.
element

HTMLElement | jQuery

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

ValidationSummary

The UI component's instance.
name

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
value any

The modified property's new value.
previousValue any

The UI component's previous value.
Default Value: null

The following example shows how to subscribe to component property changes:

jQuery
index.js
$(function() {
    $("#validationSummaryContainer").dxValidationSummary({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-validation-summary ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-validation-summary>
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxValidationSummaryModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxValidationSummaryModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }
Vue
App.vue
<template> 
    <DxValidationSummary ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxValidationSummary from 'devextreme-vue/validation-summary'; 

export default { 
    components: { 
        DxValidationSummary
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>
React
App.js
import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import ValidationSummary from 'devextreme-react/validation-summary'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <ValidationSummary ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

validationGroup

Specifies the validation group for which summary should be generated.

Selector: validation-group
Type:

String

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

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