JavaScript/jQuery ValidationGroup Options
See Also
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
jQuery
$(function(){
$("#validationGroupContainer").dxValidationGroup({
// ...
elementAttr: {
id: "elementId",
class: "class-name"
}
});
});Angular
<dx-validation-group ...
[elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-validation-group>
import { DxValidationGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxValidationGroupModule
],
// ...
})Vue
<template>
<DxValidationGroup ...
:element-attr="validationGroupAttributes">
</DxValidationGroup>
</template>
<script>
import DxValidationGroup from 'devextreme-vue/validation-group';
export default {
components: {
DxValidationGroup
},
data() {
return {
validationGroupAttributes: {
id: 'elementId',
class: 'class-name'
}
}
}
}
</script>React
import React from 'react';
import ValidationGroup from 'devextreme-react/validation-group';
class App extends React.Component {
validationGroupAttributes = {
id: 'elementId',
class: 'class-name'
}
render() {
return (
<ValidationGroup ...
elementAttr={this.validationGroupAttributes}>
</ValidationGroup>
);
}
}
export default App;height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px","20vh","80%","inherit".Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
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-group ...
(onInitialized)="saveInstance($event)">
</dx-validation-group>
import { Component } from "@angular/core";
import ValidationGroup from "devextreme/ui/data_grid";
// ...
export class AppComponent {
validationGroupInstance: ValidationGroup;
saveInstance (e) {
this.validationGroupInstance = e.component;
}
}Vue
<template>
<div>
<DxValidationGroup ...
@initialized="saveInstance">
</DxValidationGroup>
</div>
</template>
<script>
import DxValidationGroup from 'devextreme-vue/validation-group';
export default {
components: {
DxValidationGroup
},
data: function() {
return {
validationGroupInstance: null
};
},
methods: {
saveInstance: function(e) {
this.validationGroupInstance = e.component;
}
}
};
</script>
<template>
<div>
<DxValidationGroup ...
@initialized="saveInstance">
</DxValidationGroup>
</div>
</template>
<script setup>
import DxValidationGroup from 'devextreme-vue/validation-group';
let validationGroupInstance = null;
const saveInstance = (e) => {
validationGroupInstance = e.component;
}
</script>React
import ValidationGroup from 'devextreme-react/validation-group';
class App extends React.Component {
constructor(props) {
super(props);
this.saveInstance = this.saveInstance.bind(this);
}
saveInstance(e) {
this.validationGroupInstance = e.component;
}
render() {
return (
<div>
<ValidationGroup onInitialized={this.saveInstance} />
</div>
);
}
}See Also
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() {
$("#validationGroupContainer").dxValidationGroup({
// ...
onOptionChanged: function(e) {
if(e.name === "changedProperty") {
// handle the property change here
}
}
});
});Angular
<dx-validation-group ...
(onOptionChanged)="handlePropertyChange($event)">
</dx-validation-group>
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 { DxValidationGroupModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxValidationGroupModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { } Vue
<template>
<DxValidationGroup ...
@option-changed="handlePropertyChange"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxValidationGroup from 'devextreme-vue/validation-group';
export default {
components: {
DxValidationGroup
},
// ...
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 ValidationGroup from 'devextreme-react/validation-group';
const handlePropertyChange = (e) => {
if(e.name === "changedProperty") {
// handle the property change here
}
}
export default function App() {
return (
<ValidationGroup ...
onOptionChanged={handlePropertyChange}
/>
);
} width
This property accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px","20vw","80%","auto","inherit".Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.