React ValidationGroup Props

An object defining configuration options for the ValidationGroup widget.

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
    ],
    // ...
})
ASP.NET MVC Control
Razor C#
Razor VB
@(Html.DevExtreme().ValidationGroup()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().ValidationGroup() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

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%", "auto", "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

The 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
name

String

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

Object

The model data. Available only if you use Knockout.
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.
fullName

String

The path to the modified option that includes all parent options.
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;
}