Configuration

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

Element (jQuery or HTML)

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

Element (jQuery or HTML)

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
component

ValidationGroup

The widget's instance.

name

String

The option's short name.

fullName

String

The option's full name.

value any

The option's new value.

element

Element (jQuery or HTML)

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

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