Vue 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:

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:

|

|

Return Value:

|

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 that is executed only once, after the widget is initialized.

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

You cannot access widget elements in this function because it is executed before they are ready.

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 option's short name.
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 option's full name.
value	any	The option's new value.

Default Value: null

width

Specifies the widget's width.

Type:

|

|

Return Value:

|

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;
}
```