JavaScript/jQuery ValidationSummary Options
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
jQuery
$(function(){
$("#validationSummaryContainer").dxValidationSummary({
// ...
elementAttr: {
id: "elementId",
class: "class-name"
}
});
});Angular
<dx-validation-summary ...
[elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-validation-summary>
import { DxValidationSummaryModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxValidationSummaryModule
],
// ...
})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
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;items
Array<String | CollectionWidgetItem | any>
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.
onContentReady
A function that is executed when the UI component's content is ready and each time the content is changed.
| Name | Type | Description |
|---|---|---|
| component |
The UI component's instance. |
|
| element |
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. |
onDisposing
A function that is executed before the UI component is disposed of.
| Name | Type | Description |
|---|---|---|
| component |
The UI component's instance. |
|
| element |
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. |
onInitialized
| Name | Type | Description |
|---|---|---|
| component |
The UI component's instance. |
|
| element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onItemClick
| Name | Type | Description |
|---|---|---|
| component |
The UI component's instance. |
|
| element |
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 |
The clicked item's data. |
|
| itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemIndex |
The clicked item's index. |
|
| model | any |
Model data. Available only if you use Knockout. |
onOptionChanged
| Name | Type | Description |
|---|---|---|
| model | any |
Model data. Available only if you use Knockout. |
| fullName |
The path to the modified property that includes all parent properties. |
|
| element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The UI component's instance. |
|
| name |
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. |
The following example shows how to subscribe to component property changes:
jQuery
$(function() {
$("#validationSummaryContainer").dxValidationSummary({
// ...
onOptionChanged: function(e) {
if(e.name === "changedProperty") {
// handle the property change here
}
}
});
});Angular
<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
<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
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
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.