Vue Resizable Props

An object defining configuration options for the Resizable widget.

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
    ],
    // ...
})
ASP.NET MVC Control
Razor C#
Razor VB
@(Html.DevExtreme().Resizable()
    .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().Resizable() _
    .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" }
    })
)

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

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

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

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

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
name

String

The option's short name.
model

Object

The model data. Available only if you use Knockout.
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.
fullName

String

The option's full name.
value any

The 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.
model

Object

The model data. Available only if Knockout is used.
jQueryEvent

jQuery.Event

Use 'event' instead.

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

Event (jQuery or EventObject)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.
width

Number

The widget's current width.
height

Number

The widget's current height.
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.
model

Object

The model data. Available only if Knockout is used.
jQueryEvent

jQuery.Event

Use 'event' instead.

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

Event (jQuery or EventObject)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.
width

Number

The current widget width.
height

Number

The current widget height.
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.
model

Object

The model data. Available only if Knockout is used.
jQueryEvent

jQuery.Event

Use 'event' instead.

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

Event (jQuery or EventObject)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.
width

Number

The widget's current width.
height

Number

The widget's current height.
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