Vue Resizable Props

You can configure this option in an ASP.NET MVC Control as follows:

@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)

@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

You can pass several values separated by a space. For example, "right bottom".

When using the widget as an ASP.NET MVC Control, specify this option with the ResizeHandle enum that accepts the following values: Top, Bottom, Right and Left. You can combine these values by separating them with a comma, for example:

@(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

This option 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%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

You cannot access widget elements in this handler because it is executed before they are ready.

Assign a function to perform a custom action after the widget is resized.

Assign a function to perform a custom action when the widget has been resized.

Assign a function to perform a custom action when an end user started to resize the widget.

When this option is set to true, the widget 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

This option 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;
  }