Skip to main content
Tab

SpanRule.BreakpointName Property

Gets or sets a unique breakpoint identifier.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

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

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).

<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

See Also