Resizable Events

This section describes events fired by this widget.

disposing

Fires when the widget is being removed.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget 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.

Instead, you can use the onDisposing option to handle the event.

See Also

NOTE: This event fires only if the widget is removed using the remove(), empty(), or html() jQuery methods.

initialized

Fires when the widget is initialized.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.

Instead, you can use the onInitialized option to handle the event.

See Also

optionChanged

Fires after an option of the component is changed.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
name: String
Specifies the name of the option whose value is changed.
fullName: String
Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.
value: any
Specifies a new value for the option.
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.

Instead, you can use the onOptionChanged option to handle the event.

See Also

resize

Fires after the widget is resized.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget 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.

Instead, you can use the onResize option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to Resize event', onClick: clickHandler }"></div></br>
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100,
        onInitialized: initializedHandler
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.resizableInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.resizableInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.resizableInstance
                .on(
                    "resize", function (e) { DevExpress.ui.notify("Current width: " + e.width + ". Current height: " + e.height, "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from Resize event");
            flag = true;
        } else {
            $scope.resizableInstance.off("resize");
            e.component.option("text", "Subscribe to Resize event");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}
<div data-bind="dxButton: { text: 'Subscribe to Resize event', onClick: clickHandler }"></div></br>
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onInitialized: initializedHandler
}">
    <p><b>Resize this element</b></p>
</div>
var flag = false;
var myViewModel = {
    resizableInstance: {},
    initializedHandler: function (e) {
        myViewModel.resizableInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.resizableInstance
                .on(
                    "resize", function (e) { DevExpress.ui.notify("Current width: " + e.width + ". Current height: " + e.height, "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from Resize event");
            flag = true;
        } else {
            myViewModel.resizableInstance.off("resize");
            e.component.option("text", "Subscribe to Resize event");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}
<div id="button"></div></br>
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
var flag = false;
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
});
$("#button").dxButton({
    text: 'Subscribe to Resize event',
    onClick: function (e) {
        if (flag === false) {
            $("#myResizable").dxResizable("instance")
                    .on(
                        "resize", function (e) { DevExpress.ui.notify("Current width: " + e.width + ". Current height: " + e.height, "success", 1500); }
                    );
            e.component.option("text", "Unsubscribe from Resize event");
            flag = true;
        } else {
            $("#myResizable").dxResizable("instance").off("resize");
            e.component.option("text", "Subscribe to Resize event");
            flag = false;
        }
    }
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}

resizeEnd

Fires when the widget has been resized.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget 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.

Instead, you can use the onResizeEnd option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to ResizeEnd and ResizeStart events', onClick: clickHandler }"></div></br>
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100,
        onInitialized: initializedHandler
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.resizableInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.resizableInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.resizableInstance
                .on(
                    "resizeEnd", function (e) { DevExpress.ui.notify("Resize ended", "error", 1500); }
                )
                .on(
                    "resizeStart", function (e) { DevExpress.ui.notify("Resize started", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from ResizeEnd and ResizeStart events");
            flag = true;
        } else {
            $scope.resizableInstance
                    .off("resizeEnd")
                    .off("resizeStart");
            e.component.option("text", "Subscribe to ResizeEnd and ResizeStart events");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}
<div data-bind="dxButton: { text: 'Subscribe to ResizeEnd and ResizeStart events', onClick: clickHandler }"></div></br>
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onInitialized: initializedHandler
}">
    <p><b>Resize this element</b></p>
</div>
var flag = false;
var myViewModel = {
    resizableInstance: {},
    initializedHandler: function (e) {
        myViewModel.resizableInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.resizableInstance
                .on(
                    "resizeEnd", function (e) { DevExpress.ui.notify("Resize ended", "error", 1500); }
                )
                .on(
                    "resizeStart", function (e) { DevExpress.ui.notify("Resize started", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from ResizeEnd and ResizeStart events");
            flag = true;
        } else {
            myViewModel.resizableInstance
                .off("resizeStart")
                .off("resizeEnd");
            e.component.option("text", "Subscribe to ResizeEnd and ResizeStart events");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}
<div id="button"></div></br>
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
var flag = false;
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
});
$("#button").dxButton({
    text: 'Subscribe to ResizeEnd and ResizeStart events',
    onClick: function (e) {
        if (flag === false) {
            $("#myResizable").dxResizable("instance")
                    .on(
                        "resizeEnd", function (e) { DevExpress.ui.notify("Resize ended", "error", 1500); }
                    )
                    .on(
                        "resizeStart", function (e) { DevExpress.ui.notify("Resize started", "success", 1500); }
                    );
            e.component.option("text", "Unsubscribe from ResizeEnd and ResizeStart events");
            flag = true;
        } else {
            $("#myResizable").dxResizable("instance")
                .off("resizeEnd")
                .off("resizeStart");
            e.component.option("text", "Subscribe to ResizeEnd and ResizeStart events");
            flag = false;
        }
    }
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}

resizeStart

Fires when an end user started to resize the widget.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget 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.

Instead, you can use the onResizeStart option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to ResizeEnd and ResizeStart events', onClick: clickHandler }"></div></br>
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100,
        onInitialized: initializedHandler
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.resizableInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.resizableInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.resizableInstance
                .on(
                    "resizeEnd", function (e) { DevExpress.ui.notify("Resize ended", "error", 1500); }
                )
                .on(
                    "resizeStart", function (e) { DevExpress.ui.notify("Resize started", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from ResizeEnd and ResizeStart events");
            flag = true;
        } else {
            $scope.resizableInstance
                    .off("resizeEnd")
                    .off("resizeStart");
            e.component.option("text", "Subscribe to ResizeEnd and ResizeStart events");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}
<div data-bind="dxButton: { text: 'Subscribe to ResizeEnd and ResizeStart events', onClick: clickHandler }"></div></br>
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onInitialized: initializedHandler
}">
    <p><b>Resize this element</b></p>
</div>
var flag = false;
var myViewModel = {
    resizableInstance: {},
    initializedHandler: function (e) {
        myViewModel.resizableInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.resizableInstance
                .on(
                    "resizeEnd", function (e) { DevExpress.ui.notify("Resize ended", "error", 1500); }
                )
                .on(
                    "resizeStart", function (e) { DevExpress.ui.notify("Resize started", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from ResizeEnd and ResizeStart events");
            flag = true;
        } else {
            myViewModel.resizableInstance
                .off("resizeStart")
                .off("resizeEnd");
            e.component.option("text", "Subscribe to ResizeEnd and ResizeStart events");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}
<div id="button"></div></br>
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
var flag = false;
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
});
$("#button").dxButton({
    text: 'Subscribe to ResizeEnd and ResizeStart events',
    onClick: function (e) {
        if (flag === false) {
            $("#myResizable").dxResizable("instance")
                    .on(
                        "resizeEnd", function (e) { DevExpress.ui.notify("Resize ended", "error", 1500); }
                    )
                    .on(
                        "resizeStart", function (e) { DevExpress.ui.notify("Resize started", "success", 1500); }
                    );
            e.component.option("text", "Unsubscribe from ResizeEnd and ResizeStart events");
            flag = true;
        } else {
            $("#myResizable").dxResizable("instance")
                .off("resizeEnd")
                .off("resizeStart");
            e.component.option("text", "Subscribe to ResizeEnd and ResizeStart events");
            flag = false;
        }
    }
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 20px;
    border: solid 2px #053;
    background-color: #ccc;
}
.dx-resizable p{
    color: #333;
    margin-top: 20px;
    font-size: larger;
}
.dx-button {
    margin: 10px;
}