JavaScript/jQuery Resizable Options
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
handles
You can pass several values separated by a space. For example, "right bottom".
Use the ResizeHandle
enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top
, Bottom
, Right
, and Left
.
- @(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
height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"80%"
,"inherit"
.Function
A function returning either of the above. For example:JavaScript- height: function() {
- return window.innerHeight / 1.5;
- }
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
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. |
onInitialized
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
Name | Type | Description |
---|---|---|
model |
Model data. Available only if you use Knockout. |
|
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
|
name |
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. |
The following example shows how to subscribe to component property changes:
- 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
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
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 |
The UI component's current height. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
model |
Model data. Available only if Knockout is used. |
|
width |
The UI component's current width. |
onResizeEnd
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
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 |
The current UI component height. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
model |
Model data. Available only if Knockout is used. |
|
width |
The current UI component width. |
onResizeStart
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
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 |
The UI component's current height. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
model |
Model data. Available only if Knockout is used. |
|
width |
The UI component's current width. |
rtlEnabled
When this property is set to true, the UI component 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.
- DevExpress.config({
- rtlEnabled: true
- });
See Also
- Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors
width
This property accepts a value of one of the following types:
Number
The width 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;
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.