Vue ValidationGroup Props

An object defining configuration properties for the ValidationGroup UI component.

See Also

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Type:

Object

Default Value: {}

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>

height

Specifies the UI component's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's height.

Default Value: undefined

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:

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

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

ValidationGroup

The UI component's instance.

element

HTMLElement | jQuery

The UI component'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 UI component instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

ValidationGroup

The UI component's instance.

element

HTMLElement | jQuery

The UI component'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 UI component property 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 property that includes all parent properties.

element

HTMLElement | jQuery

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

component

ValidationGroup

The UI component's instance.

name

String

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.

Default Value: null

The following example shows how to subscribe to component property changes:

App.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>

width

Specifies the UI component's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's width.

Default Value: undefined

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:

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