React ValidationGroup Props

An object defining configuration options for the ValidationGroup widget.

See Also

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Object

Default Value: {}

jQuery
$(function(){
    $("#validationGroupContainer").dxValidationGroup({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-validation-group ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-validation-group>
import { DxValidationGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxValidationGroupModule
    ],
    // ...
})
Vue
App.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
App.js
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

Specifies the widget's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's height.

Default Value: undefined

This option 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:

    JavaScript
    height: function() {
    return window.innerHeight / 1.5;
}

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

ValidationGroup

The widget's instance.
element

HTMLElement | jQuery

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

Object

Model data. Available only if you use Knockout.
Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

ValidationGroup

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: null

See Also

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model

Object

Model data. Available only if you use Knockout.
fullName

String

The path to the modified option that includes all parent options.
element

HTMLElement | jQuery

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

ValidationGroup

The widget's instance.
name

String

The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into.
value any

The modified option's new value.
Default Value: null

width

Specifies the widget's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

This option 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:

    JavaScript
    width: function() {
    return window.innerWidth / 1.5;
}