Adaptive Cards Layout

The Card View control relies on the Bootstrap grid system to align cards. It can display a different number of cards in a row for different display resolutions. For this purpose, the BootstrapCardView class exposes SettingsLayout.CardColSpanXX properties. The number of cards rendered per page can be specified using the SettingsPager.ItemsPerPage property.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
<dx:BootstrapCardView runat="server" DataSourceID="DataSourceEditingEditForm" KeyFieldName="EmployeeID">
    <SettingsLayout CardColSpanMd="4" CardColSpanSm="6" />
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="FirstName" />
        <dx:BootstrapCardViewTextColumn FieldName="LastName" />
        <dx:BootstrapCardViewTextColumn FieldName="Title" />
        <dx:BootstrapCardViewDateColumn FieldName="BirthDate" />
    </Columns>
    <SettingsPager ItemsPerPage="6" NumericButtonCount="4" EnableAdaptivity="true"></SettingsPager>
</dx:BootstrapCardView>

Adaptive Card Layout

The layout of a card can be customized using the CardLayoutProperties.Items collection property. This collection allows items of the following types:

All these classes expose ColSpanXX properties that allow you to use the Bootstrap grid system functionality to align layout elements based on the display resolution.

If the CardLayoutProperties.Items collection is empty, the default layout is generated automatically.

Use the BootstrapCardViewColumnLayoutItem.ColumnName property to associate a layout item with a data column.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
<dx:BootstrapCardView runat="server" DataSourceID="DataSourceEditingEditForm" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="FirstName" />
        <dx:BootstrapCardViewTextColumn FieldName="LastName" />
        <dx:BootstrapCardViewTextColumn FieldName="Title" />
        <dx:BootstrapCardViewDateColumn FieldName="BirthDate" />
        <dx:BootstrapCardViewMemoColumn FieldName="Notes" />
    </Columns>
    <CardLayoutProperties>
        <Items>
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="FirstName" ColSpanSm="6" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="LastName" ColSpanSm="6" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="Title" ColSpanSm="6" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="BirthDate" ColSpanSm="6" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="Notes" ColSpanSm="12" />
        </Items>
    </CardLayoutProperties>
</dx:BootstrapCardView>

Adaptive Edit Card Layout

The layout of an edit card can be customized using the SettingsEditing.FormLayoutProperties.Items collection property. This collection allows items of the following types:

All these classes expose ColSpanXX properties that allow you to use the Bootstrap grid system functionality to align layout elements based on the display resolution.

If the SettingsEditing.FormLayoutProperties.Items collection is empty, items from the CardLayoutProperties.Items collection are used instead. If the CardLayoutProperties.Items collection is also empty, the default layout is generated automatically.

Use the BootstrapCardViewColumnLayoutItem.ColumnName property to associate a layout item with a data column.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
<dx:BootstrapCardView runat="server" DataSourceID="DataSourceEditingEditForm" KeyFieldName="EmployeeID">
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="FirstName" />
        <dx:BootstrapCardViewTextColumn FieldName="LastName" />
        <dx:BootstrapCardViewTextColumn FieldName="Title" />
        <dx:BootstrapCardViewDateColumn FieldName="BirthDate" />
        <dx:BootstrapCardViewMemoColumn FieldName="Notes">
            <PropertiesMemoEdit Rows="4"></PropertiesMemoEdit>
        </dx:BootstrapCardViewMemoColumn>
    </Columns>
    <CardLayoutProperties>
        <Items>
            <dx:BootstrapCardViewCommandLayoutItem ShowEditButton="true" HorizontalAlign="Right" ColSpanSm="12" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="FirstName" ColSpanSm="6" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="LastName" ColSpanSm="6" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="Title" ColSpanSm="6" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="BirthDate" ColSpanSm="6" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="Notes" ColSpanSm="12" />
        </Items>
    </CardLayoutProperties>
    <SettingsEditing>
        <FormLayoutProperties>
            <Items>
                <dx:BootstrapCardViewColumnLayoutItem ColumnName="FirstName" ColSpanSm="6" />
                <dx:BootstrapCardViewColumnLayoutItem ColumnName="LastName" ColSpanSm="6"/>
                <dx:BootstrapCardViewColumnLayoutItem ColumnName="Title" ColSpanSm="6"/>
                <dx:BootstrapCardViewColumnLayoutItem ColumnName="BirthDate" ColSpanSm="6"/>
                <dx:BootstrapCardViewColumnLayoutItem ColumnName="Notes" ColSpanSm="12"/>
                <dx:BootstrapEditModeCommandLayoutItem HorizontalAlign="Right" ColSpanSm="12"/>
            </Items>
        </FormLayoutProperties>
    </SettingsEditing>
</dx:BootstrapCardView>
Screen Size
Color Themes
Demo QR Code