DevExpress ASP.NET - Adaptive FormLayout v18.1

With all the varying sizes of screens that your ASP.NET websites may run on these days, we've added a great new feature to help you display your forms on multiple devices.

In the next major release, v18.1, the DevExpress ASP.NET Web Forms and MVC Form Layout control ships with a new mode that allows you to create adaptive layouts with different column counts. So once you enable it, the FormLayout will automatically reflow its layout based on its own size. This allows you to create, for example, a two-column layout for narrow screens and a three-column layout for wider screens:

Custom Layouts

You will be able to customize your grid layout depending on the FormLayout size. Attached is an example that demonstrates three layouts, but the number of possible variants is not limited. You can create different layouts for each of your devices, if necessary. Column and row spans are also fully supported.

Our R&D team worked hard to make this more powerful, fast and flexible. Let me describe how to create a layout required for your application, and show how this mode works.

1. Create General Layouts

Let's say that I want to create three different layouts that would allow me to display all form editors in different columns based on the screen width:

1. 0px to 700px width - two columns
2. 701px to 1100px width - three columns
3. 1101px to 3000px width - four columns

First, encapsulate all the editors in one LayoutGroup and populate the LayoutGroup.GridSettings.Breakpoints collection with LayoutBreakpoint items:

[ASPx]
<dx:ASPxFormLayout runat="server" id="MyFormLayout" width="100%">
<Items>
    <dx:LayoutGroup Width="100%" Caption="Registration form">
         <GridSettings StretchLastItem="false">
            <Breakpoints>
                <dx:LayoutBreakpoint MaxWidth="700" ColumnCount="2" Name="XS" />
                <dx:LayoutBreakpoint MaxWidth="1100" ColumnCount="3" Name="M" />
                <dx:LayoutBreakpoint MaxWidth="3000" ColumnCount="4" Name="XL" />
            </Breakpoints>
        </GridSettings>
...

The LayoutBreakpoint.ColumnCount property sets how many columns the LayoutGroup should display until the FormLayout reaches the LayoutBreakpoint.MaxWidth property value. The Name property is a unique Breakpoint identifier. It will be used later.

2. Customize Column/Row Spans

Now we can customize the column and row spans for every LayoutItem. For the 'First name' item, I want it to occupy two cells in a row when the LayoutGroup aligns items in two columns. Then, I want the item to occupy three cells in a row when the LayoutGroup aligns items in three columns. And finally, I want the item to occupy two cells in a row again when the LayoutGroup aligns items in four columns.

No row span is required: the item is placed only within its own row. Here's the resulting SpanRules:

[ASPx]
 <dx:LayoutItem Caption="First name" VerticalAlign="Middle">
    <SpanRules>
        <dx:SpanRule ColumnSpan="2" RowSpan="1" BreakpointName="XL"></dx:SpanRule>
        <dx:SpanRule ColumnSpan="3" RowSpan="1" BreakpointName="M"></dx:SpanRule>
        <dx:SpanRule ColumnSpan="2" RowSpan="1" BreakpointName="XS"></dx:SpanRule>
    </SpanRules>
 ...

Note that I used the SpanRule.BreakpointName property to bind each SpanRule to a corresponding group layout (use the values that are set in LayoutBreakpoint.Name properties). For brevity, I skipped several items, because they are customized in a similar way. However, you can find the details in the attached project below.

The next one is an item with a RatingControl. I want the item to occupy one cell in a row, but two cells in a column when the LayoutGroup has three or four columns. Then I want the item to occupy one cell in a row and one cell in a column when the LayoutGroup has two columns. Here's the resulting SpanRules:

[ASPx]
 <dx:LayoutItem Caption=" " VerticalAlign="Middle">
     <SpanRules>
         <dx:SpanRule ColumnSpan="1" RowSpan="2" BreakpointName="XL"></dx:SpanRule>
         <dx:SpanRule ColumnSpan="1" RowSpan="2" BreakpointName="M"></dx:SpanRule>
         <dx:SpanRule ColumnSpan="1" RowSpan="1" BreakpointName="XS"></dx:SpanRule>
     </SpanRules>
...

Finally, an item with a Button. I want the Button to occupy one cell when the FormLayout is wide:

[ASPx]
<dx:SpanRule ColumnSpan="1" RowSpan="1" BreakpointName="XL"></dx:SpanRule>
<dx:SpanRule ColumnSpan="1" RowSpan="1" BreakpointName="M"></dx:SpanRule>

However, when the FormLayout becomes narrow, the Button should occupy the entire row. Since the LayoutGroup has only two columns when the FormLayout width is less than 700px:

[ASPx]
<dx:LayoutBreakpoint MaxWidth="700" ColumnCount="2" Name="XS" />

I add the following SpanRule to the LayoutItem settings:

[ASPx]
 <dx:SpanRule ColumnSpan="2" RowSpan="1" BreakpointName="XS"></dx:SpanRule>

The default value of ColumnSpan and RowSpan properties is 1. I explicitly added them to markup to illustrate this.

Now take a look at the GridSettings.StretchLastItem setting. If GridSettings.StretchLastItem is enabled and there is some free space after the last item in a row, the last item will be stretched to the row's end.

IMPORTANT NOTE: If you add custom content inside a LayoutItem then please make sure that it is responsive. Unresponsive content prevents an item from collapsing and the adaptive grid layout may appear to be broken.

3. Wrap Captions

You can also have the caption location wrap around the control when there is not enough space to display it next to the control. You can see this behavior in the top gif animation above. Initially, the captions are located to the left of the control when there is enough space. However, once we resize and reach our breakpoints, the caption move above the control.

The GridSettings.WrapCaptionAtWidth property allows you control this behavior.

4. Default Breakpoint

One last piece of info you should be aware of is the default breakpoint. For example, let's say we have the following breakpoints setup:

[ASPx]
 <Breakpoints>
    <dx:LayoutBreakpoint MaxWidth="500" ColumnCount="1" Name="S" />
    <dx:LayoutBreakpoint MaxWidth="800" ColumnCount="2" Name="M" />
</Breakpoints>

We have an S breakpoint for the 0px - 500px FormLayout width and the M breakpoint for the 501px - 800px width. But if your FormLayout has the width is larger than 800px, the default breakpoint will work. It's possible to set the ColumnCount property for this breakpoint at the LayoutGroup level (or at the FormLayout level):

[ASPx]
 <dx:LayoutGroup Width="100%" Caption="Registration Form" ColumnCount="3">

And specify the ColumnSpan/RowSpan properties at the LayoutItem level:

[ASPx]
 <dx:LayoutItem Caption="City" VerticalAlign="Middle" ColumnSpan="2">

Download Sample

Download and run the attached sample project to evaluate this new responsive mode on your local development machine.

• AdaptiveGridLayout.zip
• AdaptiveGridLayoutMVC.zip

Over the last few years, we've steadily provided many responsive and adaptive features to keep our ASP.NET UI Controls modern and up with latest trends. In fact, in the last release (v17.2), we added adaptive support to our Popup control.

We'd love to hear your feedback about the FormLayout control's new Adaptive features and API. Please leave a comment below or contacting our support team if you've got some longer feedback.

Thanks!

Email: mharry@devexpress.com

Twitter: @mehulharry

Free DevExpress Products - Get Your Copy Today