SpanRule.BreakpointName Property

Gets or sets a unique breakpoint identifier.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue("")]
public string BreakpointName { get; set; }

VB.NET

<DefaultValue("")>
Public Property BreakpointName As String

Property Value

Type	Default	Description
String	String.Empty	A string value specifying the breakpoint identifier.

Remarks

Creating a LayoutBreakpoint object implicitly declares a control’s width between 0 and the LayoutBreakpoint.MaxWidth property value (if there are no breakpoints with a lower MaxWidth property value) where the Form Layout arranges its items in a specified number of columns (LayoutBreakpoint.ColumnCount). The Form Layout item’s SpanRule object specifies the number of columns (SpanRule.ColumnSpan) and rows (SpanRule.RowSpan) the layout item occupies until the control’s width reaches the LayoutBreakpoint.MaxWidth property of a given LayoutBreakpoint object. The SpanRule.BreakpointName property specifies the span rule’s breakpoint identifier (BreakpointName).

ASPX

<dx:ASPxFormLayout runat="server" ID="ASPxFormLayout" Width="100%" ClientInstanceName="FormLayout">
    <Items>
        <dx:LayoutGroup Width="100%" Caption="Registration Form" ColumnCount="3">
            <GridSettings StretchLastItem="true" ChangeCaptionLocationAtWidth="660">
                <Breakpoints>
                    <dx:LayoutBreakpoint MaxWidth="500" ColumnCount="1" Name="S" />
                    <dx:LayoutBreakpoint MaxWidth="800" ColumnCount="2" Name="M" />
                </Breakpoints>
            </GridSettings>
            <Items>
                <dx:LayoutItem Caption="Address" Height="100%" RowSpan="2">
                    <SpanRules>
                        <dx:SpanRule ColumnSpan="1" RowSpan="1" BreakpointName="S"></dx:SpanRule>
                        <dx:SpanRule ColumnSpan="1" RowSpan="2" BreakpointName="M"></dx:SpanRule>
                    </SpanRules>              
                </dx:LayoutItem>
            ...
            </Items>
        </dx:LayoutGroup>
    </Items>
</dx:ASPxFormLayout>

Concept

Adaptivity

Online Demo

Form Layout - Adaptive Grid Layout