JavaScript/jQuery ValidationSummary Options
See Also
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 is rendered and each time the component is repainted.
| Name | Type | Description |
|---|---|---|
| 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. |
onDisposing
A function that is executed before the UI component is disposed of.
| Name | Type | Description |
|---|---|---|
| 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. |
onInitialized
| Name | Type | Description |
|---|---|---|
| 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. |
Angular
<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
<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
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
onItemClick
| Name | Type | Description |
|---|---|---|
| itemIndex |
The clicked item's index. |
|
| itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemData |
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 |
The UI component's container. |
|
| component |
The UI component's instance. |
onOptionChanged
| Name | Type | Description |
|---|---|---|
| value | any |
The modified property's new value. |
| previousValue | any |
The UI component's previous value. |
| name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
| 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. |
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.