JavaScript/jQuery ValidationGroup Options
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
- <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
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"
,"20vh"
,"80%"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
onInitialized
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
- <template>
- <div>
- <DxValidationGroup ...
- @initialized="saveInstance">
- </DxValidationGroup>
- </div>
- </template>
- <script>
- import DxValidationGroup from 'devextreme-vue/validation-group';
- export default {
- components: {
- DxValidationGroup
- },
- data: function() {
- return {
- validationGroupInstance: null
- };
- },
- methods: {
- saveInstance: function(e) {
- this.validationGroupInstance = e.component;
- }
- }
- };
- </script>
- <template>
- <div>
- <DxValidationGroup ...
- @initialized="saveInstance">
- </DxValidationGroup>
- </div>
- </template>
- <script setup>
- import DxValidationGroup from 'devextreme-vue/validation-group';
- let validationGroupInstance = null;
- const saveInstance = (e) => {
- validationGroupInstance = e.component;
- }
- </script>
See Also
- Get a UI component Instance in Vue
onOptionChanged
Name | Type | Description |
---|---|---|
value | any |
The modified property's new value. |
previousValue | any |
The UI component's previous value. |
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
The following example shows how to subscribe to component property changes:
- <template>
- <DxValidationGroup ...
- @option-changed="handlePropertyChange"
- />
- </template>
- <script>
- 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
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"
,"20vw"
,"80%"
,"auto"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
If you have technical questions, please create a support ticket in the DevExpress Support Center.