Configuration

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: {}

You can configure this option in an ASP.NET MVC Control as follows:

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .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().WidgetName() _
    .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: 'top' | 'bottom' | 'right' | 'left' | 'all'

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

When using the widget as an ASP.NET MVC Control, specify this option with the ResizeHandle enum that accepts the following values: Top, Bottom, Right and Left. You can combine these values by separating them with a comma, for example:

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
Show Example:
AngularJS
Knockout
jQuery

height

Specifies the widget's height.

Return Value: Number|String

The widget height.

Default Value: undefined

This option accepts a value of one of the following types.

  • Number
    The height of the widget in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "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

Show Example:
AngularJS
Knockout
jQuery

maxWidth

Specifies the upper width boundary for resizing.

Type: Number
Default Value: Infinity

Show Example:
AngularJS
Knockout
jQuery

minHeight

Specifies the lower height boundary for resizing.

Type: Number
Default Value: 30

Show Example:
AngularJS
Knockout
jQuery

minWidth

Specifies the lower width boundary for resizing.

Type: Number
Default Value: 30

Show Example:
AngularJS
Knockout
jQuery

onDisposing

A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Default Value: null

onInitialized

A handler for the initialized event. Executed only once, after the widget is initialized.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
element: jQuery

The widget's container.

Default Value: null

You cannot access elements in the widget because this handler is executed before they are ready. Use the onContentReady handler instead.

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget is changed.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
name: String

A short name of the option whose value has been changed.

fullName: String

A full name of the option whose value has been changed; contains a full hierarchy of the option.

value: any

A new value for the option.

element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Default Value: null

onResize

A handler for the resize event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

width: Number

The current widget width.

height: Number

The current widget height.

Default Value: null

Assign a function to perform a custom action after the widget is resized.

Show Example:
AngularJS
Knockout
jQuery

onResizeEnd

A handler for the resizeEnd event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

width: Number

The current widget width.

height: Number

The current widget height.

Default Value: null

Assign a function to perform a custom action when the widget has been resized.

Show Example:
AngularJS
Knockout
jQuery

onResizeStart

A handler for the resizeStart event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

width: Number

The current widget width.

height: Number

The current widget height.

Default Value: null

Assign a function to perform a custom action when an end user started to resize the widget.

Show Example:
AngularJS
Knockout
jQuery

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

width

Specifies the widget's width.

Return Value: Number|String

The widget width.

Default Value: undefined

This option accepts a value of one of the following types.

  • Number
    The width of the widget 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;
    }