# Tab Order

Managing the tab order of complex screens can become very time consuming. If you add a control in the middle of a set of fields you have to renumber the following fields. Do that for a form with 100+ fields and you'll appreciate what we have added to Wisej.NET.

## Designer

At design time use "Tab Order" button ![Tab Order button](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-c74f1f111ee861580132d78ac0ce9c5ef1654eab%2Fimage.png?alt=media) in the designer toolbar to enter "tabbing mode". It will give you three options: Manual, Horizontal and Vertical.

Press **Manual** and the designer enters "tabbing mode" - you must click every single control from the start to set the correct sequence. Miss one and you'll have to start again.

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-4bca6d6cbbb8964e9e51954328230d744d41164f%2Fimage.png?alt=media" alt="Manual tab order mode"></div>

Press **Horizontal** or **Vertical** and Wisej.NET automatically renumbers all the tab indexes using a horizontal or vertical navigation algorithm and enters "tabbing mode".

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-dfbeffcf06adf3bd4869ff0553134ac3de56f5b2%2Fimage.png?alt=media" alt="Horizontal/Vertical tab order mode"></div>

### TabOrderManager Extender

Sometimes you may want to use horizontal tabbing in one container and vertical tabbing in another, or disable renumbering altogether. The Wisej.NET `TabOrderManager` component allows you to do that at design time.

Drop the [`TabOrderManager`](https://docs.wisej.com/api/wisej.web/extenders/wisej.web.tabordermanager) on the designer and all containers in the design surface will expose a new extender property named [`TabOrder`](https://docs.wisej.com/api/wisej.web/extenders/wisej.web.tabordermanager#settaborder-container-value) allowing you to set the order [direction](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.tabordermanagerdirection) for each container.

## Change Programmatically

The same design-time issue is present at runtime when the Wisej.NET application adds or removes controls dynamically. In code you can go through the controls collection and assign new tab indexes. However, the assignment becomes more complicated when there are containers and nested containers.

In code you can create an instance of the Wisej.NET [`TabOrderManager`](https://docs.wisej.com/api/wisej.web/extenders/wisej.web.tabordermanager) component or use an existing instance already created at design time. This component exposes a number of methods that will help your code update the tabbing order.