Resizable Configuration

An object defining configuration options for the dxResizable widget.

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 space. For example, "right bottom".

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label" style="width:30%;">
                <span id="handles" dx-hoverstart="showTooltip();">handles</span>
            </div>
            <div class="dx-field-value" style="width:70%;" dx-text-box="{
                bindingOptions: {
                    value: 'handlesValue'
                }
            }"></div>
        </div>
    </div>
    <div dx-resizable="{
        minHeight: 100,
        minWidth: 200,
        maxHeight: 300,
        maxWidth: 300,
        width: 200,
        height: 100,
        bindingOptions: {
            handles: 'handlesValue'
        }
    }">
        <p><b>Resize this element</b></p>
    </div>
    <div dx-tooltip="{
        target: '#handles',
        bindingOptions: {
            visible: 'tooltipVisible'
        }
    }">
        <p>Available values:</p>
        <ul><li>"all"</li><li>"top"</li><li>"bottom"</li><li>"left"</li><li>"right"</li></ul>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.handlesValue = "bottom right";
    $scope.tooltipVisible = false;
    $scope.showTooltip = function () {
        $scope.tooltipVisible = true;
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
ul{
    text-align: left;
    margin-left: 20px;
}
#handles{
    border-bottom: dotted 2px;
}
.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-resizable-handle-top {
    border-top: solid 2px yellow;
}
.dx-resizable-handle-bottom {
    border-bottom: solid 2px yellow;
}
.dx-resizable-handle-left {
    border-left: solid 2px yellow;
}
.dx-resizable-handle-right {
    border-right: solid 2px yellow;
}
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label" style="width:30%;">
            <span id="handles" data-bind="event: { dxhoverstart: showTooltip }">handles</span>
        </div>
        <div class="dx-field-value" style="width:70%;" data-bind="dxTextBox: {
            value: handlesValue
        }"></div>
    </div>
</div>
<div data-bind="dxResizable: {
    handles: handlesValue,
    minHeight: 100,
    minWidth: 200,
    maxHeight: 300,
    maxWidth: 300,
    width: 200,
    height: 100
}">
    <p><b>Resize this element</b></p>
</div>
<div data-bind="dxTooltip: {
    visible: tooltipVisible,
    target: '#handles'
}">
    <p>Available values:</p>
    <ul><li>"all"</li><li>"top"</li><li>"bottom"</li><li>"left"</li><li>"right"</li></ul>
</div>
var myViewModel = {
    handlesValue: ko.observable("bottom right"),
    tooltipVisible: ko.observable(false),
    showTooltip: function () {
        this.tooltipVisible(true);
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
ul{
    text-align: left;
    margin-left: 20px;
}
#handles{
    border-bottom: dotted 2px;
}
.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-resizable-handle-top {
    border-top: solid 2px yellow;
}
.dx-resizable-handle-bottom {
    border-bottom: solid 2px yellow;
}
.dx-resizable-handle-left {
    border-left: solid 2px yellow;
}
.dx-resizable-handle-right {
    border-right: solid 2px yellow;
}
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label" style="width:30%;">
            <span id="handles">handles</span>
        </div>
        <div class="dx-field-value" style="width:70%;" id="handlesTextBox"></div>
    </div>
</div>
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
<div id="handlesTooltip">
    <p>Available values:</p>
    <ul><li>"all"</li><li>"top"</li><li>"bottom"</li><li>"left"</li><li>"right"</li></ul>
</div>
$("#handlesTooltip").dxTooltip({
    target: '#handles'
});
$("#handles").on("dxhoverstart", function () {
    $("#handlesTooltip").dxTooltip("instance").show();
});
$("#handlesTextBox").dxTextBox({
    value: "right bottom",
    onValueChanged: function (e) {
        $("#myResizable").dxResizable("instance").option("handles", e.value);
    }
});
$("#myResizable").dxResizable({
    handles: "right bottom",
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
});
body{
    text-align: center;
}
ul{
    text-align: left;
    margin-left: 20px;
}
#handles{
    border-bottom: dotted 2px;
}
.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-resizable-handle-top {
    border-top: solid 2px yellow;
}
.dx-resizable-handle-bottom {
    border-bottom: solid 2px yellow;
}
.dx-resizable-handle-left {
    border-left: solid 2px yellow;
}
.dx-resizable-handle-right {
    border-right: solid 2px yellow;
}

height

Specifies the height of the widget.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: undefined

The option can hold a value of the following types.

  • number
    The height of the widget in pixels

  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

  • function
    A function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

maxHeight

Specifies the upper height boundary for resizing.

Type: Number
Default Value: Infinity

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div class="borders">
        <div class="max">
            <div class="min"></div>
        </div>
    </div>
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function () { });
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}
<div class="borders">
    <div class="max">
        <div class="min"></div>
    </div>
</div>
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
}">
    <p><b>Resize this element</b></p>
</div>
var myViewModel = {}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}
<div class="borders">
    <div class="max">
        <div class="min"></div>
    </div>
</div>
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}

maxWidth

Specifies the upper width boundary for resizing.

Type: Number
Default Value: Infinity

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div class="borders">
        <div class="max">
            <div class="min"></div>
        </div>
    </div>
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function () { });
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}
<div class="borders">
    <div class="max">
        <div class="min"></div>
    </div>
</div>
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
}">
    <p><b>Resize this element</b></p>
</div>
var myViewModel = {}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}
<div class="borders">
    <div class="max">
        <div class="min"></div>
    </div>
</div>
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}

minHeight

Specifies the lower height boundary for resizing.

Type: Number
Default Value: 30

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div class="borders">
        <div class="max">
            <div class="min"></div>
        </div>
    </div>
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function () { });
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}
<div class="borders">
    <div class="max">
        <div class="min"></div>
    </div>
</div>
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
}">
    <p><b>Resize this element</b></p>
</div>
var myViewModel = {}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}
<div class="borders">
    <div class="max">
        <div class="min"></div>
    </div>
</div>
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}

minWidth

Specifies the lower width boundary for resizing.

Type: Number
Default Value: 30

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div class="borders">
        <div class="max">
            <div class="min"></div>
        </div>
    </div>
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function () { });
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}
<div class="borders">
    <div class="max">
        <div class="min"></div>
    </div>
</div>
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
}">
    <p><b>Resize this element</b></p>
</div>
var myViewModel = {}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}
<div class="borders">
    <div class="max">
        <div class="min"></div>
    </div>
</div>
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100
});
body{
    text-align: center;
}
.dx-resizable{
    display:inline-block;
    margin-top: 21px;
    border: solid 2px red;
    background-color: rgba(200,200,200,0.3);
}
.dx-resizable p{
    color: #333;
    font-size: larger;
    margin-top: 20px;
}
.borders{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.min{
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 100px;
    border: dotted red 1px;
}
.max{
    display:inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: dotted red 1px;
}

onDisposing

A handler for the disposing event.

Type: function
Function parameters:
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 and AngularJS approaches.
Default Value: null

onInitialized

A handler for the initialized event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
Default Value: null

Assign a function to perform a custom action when the widget is initialized.

onOptionChanged

A handler for the optionChanged event.

Type: function
Function parameters:
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 and AngularJS approaches.
Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

onResize

A handler for the resize event.

Type: function
Function parameters:
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 and AngularJS approaches.
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
<div ng-controller="demoController" style="height: 100%;">
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100,
        onResize: resized
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.resized = function () {
        DevExpress.ui.notify("The widget is resized", "success", 1500);
    };
});
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;
}
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onResize: resized
}">
    <p><b>Resize this element</b></p>
</div>
var myViewModel = {
    resized: function () {
        DevExpress.ui.notify("The widget is resized", "success", 1500);
    }
}
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;
}
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onResize: function () {
        DevExpress.ui.notify("The widget is resized", "success", 1500);
    }
});
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;
}

onResizeEnd

A handler for the resizeEnd event.

Type: function
Function parameters:
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 and AngularJS approaches.
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
<div ng-controller="demoController" style="height: 100%;">
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100,
        onResizeStart: resizeStarted,
        onResizeEnd: resizeFinished
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.resizeStarted = function () {
        DevExpress.ui.notify("Resizing started", "info", 1500);
    };
    $scope.resizeFinished = function () {
        DevExpress.ui.notify("Resizing finished", "success", 1500);
    };
});
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;
}
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onResizeStart: resizeStarted,
    onResizeEnd: resizeFinished
}">
    <p><b>Resize this element</b></p>
</div>
var myViewModel = {
    resizeStarted: function () {
        DevExpress.ui.notify("Resizing started", "info", 1500);
    },
    resizeFinished: function () {
        DevExpress.ui.notify("Resizing finished", "success", 1500);
    }
}
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;
}
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onResizeStart: function () {
        DevExpress.ui.notify("Resizing started", "info", 1500);
    },
    onResizeEnd: function () {
        DevExpress.ui.notify("Resizing finished", "success", 1500);
    }
});
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;
}

onResizeStart

A handler for the resizeStart event.

Type: function
Function parameters:
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 and AngularJS approaches.
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
<div ng-controller="demoController" style="height: 100%;">
    <div dx-resizable="{
        direction: 'right bottom',
        minHeight: 100,
        minWidth: 200,
        maxHeight: 400,
        maxWidth: 300,
        width: 200,
        height: 100,
        onResizeStart: resizeStarted,
        onResizeEnd: resizeFinished
    }">
        <p><b>Resize this element</b></p>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.resizeStarted = function () {
        DevExpress.ui.notify("Resizing started", "info", 1500);
    };
    $scope.resizeFinished = function () {
        DevExpress.ui.notify("Resizing finished", "success", 1500);
    };
});
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;
}
<div data-bind="dxResizable: {
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onResizeStart: resizeStarted,
    onResizeEnd: resizeFinished
}">
    <p><b>Resize this element</b></p>
</div>
var myViewModel = {
    resizeStarted: function () {
        DevExpress.ui.notify("Resizing started", "info", 1500);
    },
    resizeFinished: function () {
        DevExpress.ui.notify("Resizing finished", "success", 1500);
    }
}
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;
}
<div id="myResizable">
    <p><b>Resize this element</b></p>
</div>
$("#myResizable").dxResizable({
    direction: 'right bottom',
    minHeight: 100,
    minWidth: 200,
    maxHeight: 400,
    maxWidth: 300,
    width: 200,
    height: 100,
    onResizeStart: function () {
        DevExpress.ui.notify("Resizing started", "info", 1500);
    },
    onResizeEnd: function () {
        DevExpress.ui.notify("Resizing finished", "success", 1500);
    }
});
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;
}

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

width

Specifies the width of the widget.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }