Resizable
The Resizable widget enables its content to be resizable in the UI.
The Resizable widget is an element that can be resized by an end user. It displays data located inside the HTML element of the widget. You can specify minimum and maximum size using the minHeight, minWidth, maxHeight and maxWidth options. The handles option enables you to specify which element borders are used as a handle for resizing.
You can create the widget using one of the following approaches.
jQuery
$(function() { $("#resizable").dxResizable({ width: 200, height: 200, minWidth: 30, minHeight: 30, maxWidth: 500, maxHeight: 500 }); });
<div id="resizable"> <div id="content"></div> </div>
#content { height: 100%; width: 100% }
Angular
<dx-resizable [width]="200" [height]="200" [minWidth]="30" [minHeight]="30" [maxWidth]="500" [maxHeight]="500"> <div id="content"></div> </dx-resizable>
#content { height: 100%; width: 100% }
AngularJS
<div dx-resizable="{ width: 200, height: 200, minWidth: 30, minHeight: 30, maxWidth: 500, maxHeight: 500 }"> <div id="content"></div> </div>
#content { height: 100%; width: 100% }
Knockout
<div data-bind="dxResizable: { width: 200, height: 200, minWidth: 30, minHeight: 30, maxWidth: 500, maxHeight: 500 }"> <div id="content"></div> </div>
#content { height: 100%; width: 100% }
ASP.NET MVC Controls
@(Html.DevExtreme().Resizable() .ID("resizable") .Width(200) .Height(200) .MinWidth(30) .MinHeight(30) .MaxWidth(500) .MaxHeight(500) .Content(@<text> <div id="content"></div> </text>) )
@Code Html.DevExtreme().Resizable() _ .ID("resizable") _ .Width(200) _ .Height(200) _ .MinWidth(30) _ .MinHeight(30) _ .MaxWidth(500) _ .MaxHeight(500) _ .Content(Sub() @<text> <div id="content"></div> </text> End Sub).Render() End Code
#content { height: 100%; width: 100% }
Note that DevExtreme widgets require linking the jQuery library to your application. The Knockout or AngularJS library is also needed if you use the Knockout or AngularJS approach. For detailed information on linking these libraries to your project, refer to the topics in the Installation section.
See Also
Configuration
An object defining configuration options for the Resizable widget.
Name | Description |
---|---|
elementAttr | Specifies the attributes to be attached to the widget's root element. |
handles | Specifies which borders of the widget element are used as a handle. |
height | Specifies the widget's height. |
maxHeight | Specifies the upper height boundary for resizing. |
maxWidth | Specifies the upper width boundary for resizing. |
minHeight | Specifies the lower height boundary for resizing. |
minWidth | Specifies the lower width boundary for resizing. |
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. |
onInitialized | A handler for the initialized event. Executed only once, after the widget is initialized. |
onOptionChanged | A handler for the optionChanged event. Executed after an option of the widget is changed. |
onResize | A handler for the resize event. |
onResizeEnd | A handler for the resizeEnd event. |
onResizeStart | A handler for the resizeStart event. |
rtlEnabled | Switches the widget to a right-to-left representation. |
width | Specifies the widget's width. |
Methods
Methods of the DomComponent object.
Name | Description |
---|---|
beginUpdate() | Prevents the widget from refreshing until the endUpdate() method is called. |
defaultOptions(rule) | Specifies the device-dependent default configuration options for this component. |
element() | Gets the root element of the widget. |
endUpdate() | Refreshes the widget after a call of the beginUpdate() method. |
instance() | Returns this widget's instance. Use it to access other methods of the widget. |
off(eventName) | Detaches all event handlers from the specified event. |
off(eventName, eventHandler) | Detaches a particular event handler from the specified event. |
on(eventName, eventHandler) | Subscribes to a specified event. |
on(events) | Subscribes to the specified events. |
option() | Gets the widget's options. |
option(optionName) | Gets a specific option value. |
option(optionName, optionValue) | Assigns a new value to a specific option. |
option(options) | Sets one or more options. |
Events
This section describes events fired by this widget.
Name | Description |
---|---|
disposing | Raised when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only. |
initialized | Raised only once, after the widget is initialized. |
optionChanged | Raised after an option of the widget is changed. |
resize | Fires after the widget is resized. |
resizeEnd | Fires when the widget has been resized. |
resizeStart | Fires when an end user started to resize the widget. |
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
If you have technical questions, please create a support ticket in the DevExpress Support Center.
We appreciate your feedback.