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.
<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.
<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>
<SettingsPager ItemsPerPage="1" NumericButtonCount="4" EnableAdaptivity="true"></SettingsPager>
<SettingsLayout CardColSpanMd="12" />
</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.
<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>
<SettingsPager ItemsPerPage="1" NumericButtonCount="4" EnableAdaptivity="true"></SettingsPager>
<SettingsLayout CardColSpanMd="12" />
</dx:BootstrapCardView>