Angular ValidationSummary Properties

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: dxo-element-attr
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.

Type:

Boolean

Default Value: false

items

An array of items displayed by the UI component.

Selector: dxi-item
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.

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.

Type:

Function

Function parameters:
e:

ContentReadyEvent

Information about the event.

Object structure:
Name Type Description
model any

The model data. Available only if you use Knockout.
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.
Default Value: null

onDisposing

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

Type:

Function

Function parameters:
e:

DisposingEvent

Information about the event.

Object structure:
Name Type Description
model any

The model data. Available only if you use Knockout.
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.
Default Value: null

onInitialized

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

Type:

Function

Function parameters:
e:

InitializedEvent

Information about the event.

Object structure:
Name Type Description
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.
Default Value: null

Angular
app.component.html
app.component.ts
<dx-validation-summary ...
    (onInitialized)="saveInstance($event)">
</dx-validation-summary>
import { Component } from "@angular/core";
import ValidationSummary from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    validationSummaryInstance: ValidationSummary;
    saveInstance (e) {
        this.validationSummaryInstance = e.component;
    }
}
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <div>
        <DxValidationSummary ...
            @initialized="saveInstance">
        </DxValidationSummary>
    </div>
</template>

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

export default {
    components: {
        DxValidationSummary
    },
    data: function() {
        return {
            validationSummaryInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.validationSummaryInstance = e.component;
        }
    }
};
</script>
<template>
    <div>
        <DxValidationSummary ...
            @initialized="saveInstance">
        </DxValidationSummary>
    </div>
</template>

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

let validationSummaryInstance = null;

const saveInstance = (e) => {
    validationSummaryInstance = e.component;
}
</script>
React
App.js
import ValidationSummary from 'devextreme-react/validation-summary';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.validationSummaryInstance = e.component;
    }

    render() {
        return (
            <div>
                <ValidationSummary onInitialized={this.saveInstance} />
            </div>
        );
    }
}
See Also
jQuery
  • Get a UI component Instance in jQuery
Angular
  • Get a UI component Instance in Angular
Vue
  • Get a UI component Instance in Vue
React
  • Get a UI component Instance in React

onItemClick

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

Type:

Function

Function parameters:
e:

ItemClickEvent

Information about the event.

Object structure:
Name Type Description
model any

Model data. Available only if you use Knockout.
itemIndex

Number

The clicked item's index.
itemElement

HTMLElement | jQuery

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

Object

The clicked item's data.
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.
element

HTMLElement | jQuery

The UI component's container.
component

ValidationSummary

The UI component's instance.
Default Value: null

onOptionChanged

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

Type:

Function

Function parameters:
e:

OptionChangedEvent

Information about the event.

Object structure:
Name Type Description
value any

The modified property's new value.
previousValue any

The UI component's previous value.
name

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
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.
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.

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.