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);
});
})
)
Responsive Form
You can use Media Queries to enhance the Form appearance on different form factors. The following example demonstrates how you can use Media Queries to override the default CSS rules in order to change the Form Layout from two columns to a single column on devices with screen width of 600px or less:
<style>
@media screen and (max-width: 600px) { //Resize the screen to less than 600px and check out the styling in action.
.k-form-field{
grid-column-start: 1;
grid-column-end: span 1;
}
fieldset{
grid-column-start: 1;
grid-column-end: span 1;
}
div.k-form-layout.k-d-grid.k-grid-cols-2 {
grid-template-columns:repeat(1, minmax(0px, 1fr));
}
}
</style>
@(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.FormOrderViewModel>()
.Name("responsiveLayoutForm")
.HtmlAttributes(new { action = @Url.Action("MyAction","MyController"), 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:"));
});
items.AddGroup()
.Label("Shipping Address")
.Layout("grid")
.Grid(g => g.Cols(2).Gutter(10))
.Items(i =>
{
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);
});
})
)
For more information on the Grid layout of the Form, refer to the official CSS Grid documentation.