Orientation

23 Nov 20172 minutes to read

The Toolbar control supports both vertical and horizontal orientations, allowing it to fit into any scenario. The orientation property of Toolbar defines the orientation in which the control is rendered. Set the value to this property as enum or string type. It accepts the following values.

• ej.Orientation.Horizontal or “Horizontal”
• ej.Orientation.Vertical or “Vertical”

The following section explains you on how to set orientation for the toolbar.

Horizontal

Orientation property sets the Toolbar in horizontal orientation. You can refer the following steps to set horizontal orientation for Toolbar control.

In View, create UL-LI list of toolbar items and invoke the toolbar helper.

Add the following script in your HTML page.

JS

$(function () {
        // declaration
        $("#toolbar").ejToolbar({ width: "290px", orientation: ej.Orientation.Horizontal });
    });

OR

JS

$(function () {
        // declaration            
        $("#toolbar").ejToolbar({ width: "290px", orientation: "Horizontal" });
    });

Build and run the application.

The following screenshot illustrates a Toolbar with horizontal orientation.

Vertical

Orientation property sets the Toolbar in vertical orientation. You can refer the following steps to set vertical orientation for Toolbar control.

Create UL-LI list of toolbar items and invoke the toolbar helper.

Add the following script in your HTML page.

JS

$(function () {
        // declaration
        $("#toolbar").ejToolbar({ orientation: ej.Orientation.Vertical });
    });

OR

JS

$(function () {
        // declaration
        $("#toolbar").ejToolbar({ orientation: "Vertical" });
    });

Build and run the application.

The following screenshot illustrates a Toolbar with vertical orientation.