JavaScript/jQuery Resizable Options

An object defining configuration options for the Resizable widget.

See Also

elementAttr

Specifies the attributes to be attached to the widget's root element.

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 widget element are used as a handle.

Type:

String

Default Value: 'all'
Accepted Values: 'bottom' | 'left' | 'right' | 'top' | 'all'

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

Use the ResizeHandle enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top, Bottom, Right, and Left.

Razor C#
Razor VB
@(Html.DevExtreme().Resizable()
    .Handles(ResizeHandle.Top, ResizeHandle.Bottom)
    .Content(@<text>
        @* resizable content *@
    </text>)
)
@Code
    Html.DevExtreme().Resizable() _
        .Handles(ResizeHandle.Top, ResizeHandle.Bottom)
        .Content(Sub()
            @* resizable content *@
        End Sub).Render()
End Code

height

Specifies the widget's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's height.

Default Value: undefined
Raised Events: onResize

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%", "inherit".

  • Function
    A function returning either of the above. For example:

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

maxHeight

Specifies the upper height boundary for resizing.

Type:

Number

Default Value: Infinity

maxWidth

Specifies the upper width boundary for resizing.

Type:

Number

Default Value: Infinity

minHeight

Specifies the lower height boundary for resizing.

Type:

Number

Default Value: 30

minWidth

Specifies the lower width boundary for resizing.

Type:

Number

Default Value: 30

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

Resizable

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

Model data. Available only if you use Knockout.
Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Resizable

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

See Also

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
model

Object

Model data. Available only if you use Knockout.
fullName

String

The path to the modified option that includes all parent options.
element

HTMLElement | jQuery

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

Resizable

The widget's instance.
name

String

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

The modified option's new value.
Default Value: null

onResize

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

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Resizable

The widget's instance.
element

HTMLElement | jQuery

The widget'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 a dxEvent or a jQuery.Event when you use jQuery.
height

Number

The widget's current height.
jQueryEvent

jQuery.Event

Use 'event' instead.

The jQuery event that caused the handler execution. Deprecated in favor of the event field.
model

Object

Model data. Available only if Knockout is used.
width

Number

The widget's current width.
Default Value: null

onResizeEnd

A function that is executed when resizing ends.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Resizable

The widget's instance.
element

HTMLElement | jQuery

The widget'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 a dxEvent or a jQuery.Event when you use jQuery.
height

Number

The current widget height.
jQueryEvent

jQuery.Event

Use 'event' instead.

The jQuery event that caused the handler execution. Deprecated in favor of the event field.
model

Object

Model data. Available only if Knockout is used.
width

Number

The current widget width.
Default Value: null

onResizeStart

A function that is executed when resizing starts.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Resizable

The widget's instance.
element

HTMLElement | jQuery

The widget'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 a dxEvent or a jQuery.Event when you use jQuery.
height

Number

The widget's current height.
jQueryEvent

jQuery.Event

Use 'event' instead.

The jQuery event that caused the handler execution. Deprecated in favor of the event field.
model

Object

Model data. Available only if Knockout is used.
width

Number

The widget's current width.
Default Value: null

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Boolean

Default Value: false

When this option is set to true, the widget 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
});
See Also

width

Specifies the widget's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined
Raised Events: onResize

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