JavaScript/jQuery ValidationGroup Options
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"
,"80%"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
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 |
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. |
onOptionChanged
Name | Type | Description |
---|---|---|
model |
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() { $("#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.common.css'; 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.common.css'; 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"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptwidth: function() { return window.innerWidth / 1.5; }
If you have technical questions, please create a support ticket in the DevExpress Support Center.