FormLayoutSettings<ModelType>.ColumnCount Property

Specifies a number of columns the Form Layout uses to organize its content.

Namespace: DevExpress.Web.Mvc

Assembly: DevExpress.Web.Mvc5.v24.1.dll

NuGet Package: DevExpress.Web.Mvc5

Declaration

C#

public int ColumnCount { get; set; }

VB.NET

Public Property ColumnCount As Integer

Property Value

Type	Description
Int32	An integer value specifying the number of columns.

Remarks

Use the ColumnCount property to specify the number of columns the Form Layout uses to organize its content when there are specified breakpoints (LayoutBreakpoint).

Refer to the Adaptivity topic for more information.

Online Demo

Form Layout - Adaptive Grid Layout

Example

The following example illustrates how to implement three different layout scenarios for three different Form Layout sizes (Small, Medium, Large) as shown on the image below.

Razor (View)

@Html.DevExpress().FormLayout(settings => {
...
var groupItem = settings.Items.AddGroupItem(groupSettings => {
    groupSettings.Caption = "Test Group";
    groupSettings.Width = Unit.Percentage(100);
    groupSettings.ColumnCount = 4;
});
groupItem.GridSettings.StretchLastItem = DefaultBoolean.True;
groupItem.GridSettings.ChangeCaptionLocationAtWidth = 1000;
groupItem.GridSettings.Breakpoints.Add(new LayoutBreakpoint() { Name = "Small", ColumnCount = 1, MaxWidth = 300 });
groupItem.GridSettings.Breakpoints.Add(new LayoutBreakpoint() { Name = "Medium", ColumnCount = 2, MaxWidth = 900 });
groupItem.GridSettings.Breakpoints.Add(new LayoutBreakpoint() { Name = "Large", ColumnCount = 3, MaxWidth = 1500 });
groupItem.Items.Add(i => {
    i.Caption = "Item1";
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Small", ColumnSpan = 1, RowSpan = 1 });
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Medium", ColumnSpan = 1, RowSpan = 1 });
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Large", ColumnSpan = 2, RowSpan = 2 });
});
groupItem.Items.Add(i => {
    i.Caption = "Item2";
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Small", ColumnSpan = 1, RowSpan = 1 });
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Medium", ColumnSpan = 1, RowSpan = 1 });
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Large", ColumnSpan = 1, RowSpan = 1 });
});
groupItem.Items.Add(i => {
    i.Caption = "Item3";
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Small", ColumnSpan = 1, RowSpan = 1 });
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Medium", ColumnSpan = 2, RowSpan = 1 });
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Large", ColumnSpan = 1, RowSpan = 1 });
});
groupItem.Items.Add(i => {
    i.Caption = "Item3";
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Small", ColumnSpan = 1, RowSpan = 1 });
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Medium", ColumnSpan = 2, RowSpan = 1 });
    i.SpanRules.Add(new SpanRule() { BreakpointName = "Large", ColumnSpan = 3, RowSpan = 1 });
});
...
}).GetHtml()