# Move & Resize

All Wisej.NET controls support moving and resizing. :star: It's an amazing feature unique to Wisej.

Simply set the [**Movable** ](https://docs.wisej.com/api/wisej.web/lists-and-grids/listview/wisej.web.columnheader#movable)property to true and users will be able to grab and drag the control within its parent. Enable the sides to resize using the [**ResizableEdges** ](https://docs.wisej.com/api/wisej.web/general/control#resizableedges)property and users will be able to grab and drag the resizable sides!

![](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-e7cd4cb35a8d7f8f1947374e193e99dd6b10f0b1%2FMoveResize.gif?alt=media)

When a control is resized or moved, it will change the **Size** and **Location** properties on the server and fire the related events.

## Live Resize

Resizable controls can resize in two modes: Live or Frame. By default all the resizable controls, including Forms, use a resize frame and then resize the actual control when the user releases the pointer.

Some controls expose the **LiveResize** property that lets you change the default behavior and update the control as the user resizes it:

* **Form**. The window is resized immediately.
* **DataGridView**. Columns are resized immediately.
* **ListView**. Columns are resized immediately when Detail view.

{% hint style="warning" %}
When **LiveResize** is *true*, every movement of the mouse or the pointer or the touch causes a resize event and it can get heavy on the server.
{% endhint %}

You can enable the live resize mode on any resizable control that doesn't expose the **LiveResize** property by calling JavaScript in the control's [**InitScript** ](https://docs.wisej.com/api/wisej.web/content/widget#initscript)property to set the "**useResizeFrame**" property to *false*:

{% tabs %}
{% tab title="JavaScript" %}

```javascript
this.setUseResizeFrame(false);
```

{% endtab %}
{% endtabs %}

## Movable Property

It's a simple *boolean* property. Set it to **true** to make a control movable.

If you set the **Movable** property to *false* on a Form window then it will be displayed at the specified location and the user will not be able to move it.

## ResizableEdges Property

The **ResizableEdges** property is a flags enumeration that takes the **AnchorStyles** values. You can enable any of the four sides of a control to be resizable, or any combination of the sides.

## Simple Splitters

Combining the **ResizableEdges**, **Dock**, and **Anchor** properties is an easy and flexible way to create a splitter system without adding split containers or other controls.

![](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-44d0afb227931f0298d7761faa68d145391b59ba%2FResizeSplitter.gif?alt=media)

Just putting together a **Button** with **ResizableEdges**=*Right* and **Dock**=Left, a **TreeView** with **Dock**=*Fill*, and a **DataGridView** with **ResizableEdges**=*Bottom* and **Dock**=*Top*, inside a Panel creates a flexible composite control.

## Move, Resize Events

When using the Movable or ResizableEdges properties to allow the user to move or resize a widget on the client, you can use the [StartMove](https://docs.wisej.com/api/wisej.web/general/control#startmove), [EndMove](https://docs.wisej.com/api/wisej.web/general/control#endmove), [StartResize](https://docs.wisej.com/api/wisej.web/general/control#startresize) and [EndResize](https://docs.wisej.com/api/wisej.web/general/control#endresize) events to detect when the user starts and ends the moving or resizing operation.

The Location and Size properties of the control will not change while the user is dragging or resizing the control on the browser.

## Advanced

Wisej.NET provides advanced states and events that allow your application to style a control when it's being moved or resized and to detect when the moving or resizing operations start and end.

* When moving, it adds the state "**move**".
* When resizing, adds the state "**resize**".
* When moving starts, fires the event "**startmove**".
* When moving ends, fires the event "**endmove**".
* When resizing starts, fires the event "**startresize**".
* When resizing ends, fires the event "**endresize**".

These states are not defined in the built-in theme, but you can use them in your theme or in a mixin.

For example, adding a mixin that extends the "**tree**" appearance like this:

```javascript
{
	"appearances": {
		"tree": {
			"inherit": "tree",
			"states": {
				"move": {
					"styles": {
						"width": 5,
						"color": "grey",
						"style": "dotted"
					}
				}
			}
		}
	}
}
```

Results in the **TreeView** control showing the new styled border when it's being moved by the user.

![](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-38e45b444cc680a7b69d9afb3a379559c47fe434%2FMoveResizeState.gif?alt=media)