JavaScript/jQuery Resizable Options

Default Value: Infinity

maxWidth

Specifies the upper width boundary for resizing.

Type:

Default Value: Infinity

minHeight

Specifies the lower height boundary for resizing.

Type:

Default Value: 30

minWidth

Specifies the lower width boundary for resizing.

Type:

Default Value: 30

onDisposing

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

Type:

Function parameters:

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.

model

Model data. Available only if you use Knockout.

Default Value: null

onInitialized

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

Type:

Function parameters:

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.

Default Value: null

onOptionChanged

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

Type:

Function parameters:

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 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.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
value	any	The modified property's new value.

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.common.css'; 
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.common.css'; 
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.

Type:

Function parameters:

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 a dxEvent or a jQuery.Event when you use jQuery.
height	Number	The UI component'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 UI component's current width.

Default Value: null

onResizeEnd

A function that is executed when resizing ends.

Type:

Function parameters:

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 a dxEvent or a jQuery.Event when you use jQuery.
height	Number	The current UI component 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 UI component width.

Default Value: null

onResizeStart

A function that is executed when resizing starts.

Type:

Function parameters: