Layout
In addition the default layout, the Form offers an option to use Grid layout. It can be set through the Layout option.
Grid layout is supported only on modern browsers. Even so, not all browsers that support grid layout support all features.
Grid Layout
To use this layout set the Layout option to grid, specify the number of columns and the gutter between them. The Form supports up to 12 columns.
.Layout("grid")
.Grid(g => g.Cols(2).Gutter(20))
The following example shows the Form with grid layout set.
@(Html.Kendo().Form<MyApplication.Models.FormOrderViewModel>()
.Name("exampleForm")
.HtmlAttributes(new { action = "Layout", method = "POST" })
.Layout("grid")
.Grid(g => g.Cols(2).Gutter(20))
.Items(items =>
{
items.AddGroup()
.Label("Personal Information")
.Layout("grid")
.Grid(g => g.Cols(1).Gutter(10))
.Items(i =>
{
i.Add()
.Field(f => f.FirstName)
.Label(l => l.Text("First Name:"));
i.Add()
.Field(f => f.LastName)
.Label(l => l.Text("Last Name:"));
i.Add()
.Field(f => f.Email)
.Label(l => l.Text("Email:"));
});
items.AddGroup()
.Label("Shipping Address")
.Layout("grid")
.Grid(g => g.Cols(2).Gutter(10))
.Items(i =>
{
i.Add()
.Field(f => f.ShipCountry)
.Label(l => l.Text("Country:"))
.ColSpan(1)
.Editor(e =>
{
e.ComboBox()
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "France", Value = "1"
},
new SelectListItem() {
Text = "Germany", Value = "2"
},
new SelectListItem() {
Text = "Italy", Value = "3"
},
new SelectListItem() {
Text = "Spain", Value = "4"
}
});
});
i.Add()
.Field(f => f.City)
.Label(l => l.Text("City:"))
.ColSpan(1);
i.Add()
.Field(f => f.Address)
.Label(l => l.Text("Address Line:"))
.ColSpan(2);
});
})
)