New to Telerik UI for ASP.NET Core? Download free 30-day trial

Orientation

The Form can render labels above or to the left of their respective editors. This behavior is controlled with the Orientation configuration option.

To configure orientation, use either of the following settings:

  • vertical
  • horizontal

Vertical Mode

By default, the Form uses vertical orientation mode and renders the labels above their editors.

    @(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
        .Name("formExample")
        .Orientation("vertical")
        .HtmlAttributes(new { action = "Index", method = "POST" })
        .Items(items =>
        {
            items.Add()
                .Field(f => f.FirstName)
                .Label(l => l.Text("First Name:"));
            items.Add()
                .Field(f => f.LastName)
                .Label(l => l.Text("Last Name:"));
            items.Add()
                .Field(f => f.UserName)
                .Label(l => l.Text("Username:"));
            items.Add()
                .Field(f => f.Password)
                .Label(l => l.Text("Password:"))
                .Hint("Hint: enter alphanumeric characters only.");
        })
    )

Horizontal Mode

Set the Оrientation option to horizontal, if you want to render labels to the left of their editors.

    @(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
        .Name("formExample")
        .Orientation("horizontal")
        .HtmlAttributes(new { action = "Index", method = "POST" })
        .Items(items =>
        {
            items.Add()
                .Field(f => f.FirstName)
                .Label(l => l.Text("First Name:"));
            items.Add()
                .Field(f => f.LastName)
                .Label(l => l.Text("Last Name:"));
            items.Add()
                .Field(f => f.UserName)
                .Label(l => l.Text("Username:"));
            items.Add()
                .Field(f => f.Password)
                .Label(l => l.Text("Password:"))
                .Hint("Hint: enter alphanumeric characters only.");
        })
    )

See Also

In this article
Not finding the help you need? Improve this article