Vue Resizable Props

An object defining configuration properties for the Resizable UI component.

See Also
jQuery
Angular
Vue
React

area

Specifies the area within which users can resize the UI component.

Type:

String

|

HTMLElement | jQuery

Default Value: undefined

Area Available For Resize

You can use a selector string, jQuery object, or DOM element to specify this property:

  • String

    JavaScript
    area: '.test-div'

  • jQuery object

    JavaScript
    area: $('.test-div')

  • DOM element

    JavaScript
    area: $('.test-div')[0]

View Demo

elementAttr

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

Selector: DxElementAttr
Type:

Object

Default Value: {}

jQuery
$(function(){
    $("#resizableContainer").dxResizable({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-resizable ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-resizable>
import { DxResizableModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxResizableModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxResizable ...
        :element-attr="resizableAttributes">
    </DxResizable>
</template>

<script>
import DxResizable from 'devextreme-vue/resizable';

export default {
    components: {
        DxResizable
    },
    data() {
        return {
            resizableAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import Resizable from 'devextreme-react/resizable';

class App extends React.Component {
    resizableAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Resizable ...
                elementAttr={this.resizableAttributes}>
            </Resizable>
        );
    }
}
export default App;

handles

Specifies which borders of the UI component element are used as a handle.

Type:

ResizeHandle

|

String

Default Value: 'all'

You can pass several values separated by a space. For example, "right bottom".

height

Specifies the UI component's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's height.

Default Value: undefined
Raised Events: onResize

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.

keepAspectRatio

Specifies whether to resize the UI component's content proportionally when you use corner handles.

Selector: keep-aspect-ratio
Type:

Boolean

Default Value: true

When this property value is true, you can use a corner handle to resize the UI component proportionally.

keepAspectRatio is True

Set this property to false to enable free-form resize:

jQuery
$(function(){
    $("#resizable").dxResizable({
        // ...
        keepAspectRatio: false
    });
});
Angular
app.component.html
<dx-resizable ... 
    [keepAspectRatio]="false">
</dx-resizable>
Vue
App.vue
<template>
    <DxResizable ...
        :keep-aspect-ratio="false"
    />
</template>

<script>
// ...
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Resizable from 'devextreme-react/resizable';

function App() {
    return (
        <Resizable ...
            keepAspectRatio={false}           
        />
    );
}

export default App;

View Demo

maxHeight

Specifies the upper height boundary for resizing.

Selector: max-height
Type:

Number

Default Value: Infinity

maxWidth

Specifies the upper width boundary for resizing.

Selector: max-width
Type:

Number

Default Value: Infinity

minHeight

Specifies the lower height boundary for resizing.

Selector: min-height
Type:

Number

Default Value: 30

minWidth

Specifies the lower width boundary for resizing.

Selector: min-width
Type:

Number

Default Value: 30

onDisposing

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

Selector: @disposing
Type:

Function

Function parameters:
e:

DisposingEvent

Information about the event.

Object structure:
Name Type Description
model any

The model data. Available only if you use Knockout.
element

HTMLElement | jQuery

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

Resizable

The UI component's instance.
Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Selector: @initialized
Type:

Function

Function parameters:
e:

InitializedEvent

Information about the event.

Object structure:
Name Type Description
element

HTMLElement | jQuery

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

Resizable

The UI component's instance.
Default Value: null

Angular
app.component.html
app.component.ts
<dx-resizable ...
    (onInitialized)="saveInstance($event)">
</dx-resizable>
import { Component } from "@angular/core";
import Resizable from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    resizableInstance: Resizable;
    saveInstance (e) {
        this.resizableInstance = e.component;
    }
}
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <div>
        <DxResizable ...
            @initialized="saveInstance">
        </DxResizable>
    </div>
</template>

<script>
import DxResizable from 'devextreme-vue/resizable';

export default {
    components: {
        DxResizable
    },
    data: function() {
        return {
            resizableInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.resizableInstance = e.component;
        }
    }
};
</script>
<template>
    <div>
        <DxResizable ...
            @initialized="saveInstance">
        </DxResizable>
    </div>
</template>

<script setup>
import DxResizable from 'devextreme-vue/resizable';

let resizableInstance = null;

const saveInstance = (e) => {
    resizableInstance = e.component;
}
</script>
React
App.js
import Resizable from 'devextreme-react/resizable';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.resizableInstance = e.component;
    }

    render() {
        return (
            <div>
                <Resizable onInitialized={this.saveInstance} />
            </div>
        );
    }
}
See Also
jQuery
  • Get a UI component Instance in jQuery
Angular
  • Get a UI component Instance in Angular
Vue
  • Get a UI component Instance in Vue
React
  • Get a UI component Instance in React

onOptionChanged

A function that is executed after a UI component property is changed.

Selector: @option-changed
Type:

Function

Function parameters:
e:

OptionChangedEvent

Information about the event.

Object structure:
Name Type Description
value any

The modified property's new value.
previousValue any

The UI component's previous value.
name

String

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

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

Resizable

The UI component's instance.
Default Value: null

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

jQuery
index.js
$(function() {
    $("#resizableContainer").dxResizable({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-resizable ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-resizable>
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxResizableModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxResizableModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }
Vue
App.vue
<template> 
    <DxResizable ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxResizable from 'devextreme-vue/resizable'; 

export default { 
    components: { 
        DxResizable
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>
React
App.js
import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Resizable from 'devextreme-react/resizable'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Resizable ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

onResize

A function that is executed each time the UI component is resized by one pixel.

Selector: @resize
Type:

Function

Function parameters:
e:

ResizeEvent

Information about the event.

Object structure:
Name Type Description
component

Resizable

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

Event (jQuery or EventObject)

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
height

Number

The UI component's current height.
model any

Model data. Available only if Knockout is used.
width

Number

The UI component's current width.
Default Value: null

onResizeEnd

A function that is executed when resizing ends.

Selector: @resize-end
Type:

Function

Function parameters:
e:

ResizeEndEvent

Information about the event.

Object structure:
Name Type Description
component

Resizable

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

Event (jQuery or EventObject)

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
height

Number

The current UI component height.
model any

Model data. Available only if Knockout is used.
width

Number

The current UI component width.
Default Value: null

onResizeStart

A function that is executed when resizing starts.

Selector: @resize-start
Type:

Function

Function parameters:
e:

ResizeStartEvent

Information about the event.

Object structure:
Name Type Description
component

Resizable

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

Event (jQuery or EventObject)

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
height

Number

The UI component's current height.
model any

Model data. Available only if Knockout is used.
width

Number

The UI component's current width.
Default Value: null

rtlEnabled

Switches the UI component to a right-to-left representation.

Selector: rtl-enabled
Type:

Boolean

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

width

Specifies the UI component's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's width.

Default Value: undefined
Raised Events: onResize

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.