This demo illustrates the Card View control's vertical scrolling capability.
By default, the grid height is determined by the number of rows displayed within a page. To reduce the grid's height, display the vertical scrollbar using the Settings.VerticalScrollBarMode property, and specify the height of the scrollable area (in pixels) using the Settings.VerticalScrollableHeight property.
The Settings.VerticalScrollBarMode property accepts the following values:
- Auto - The scrollbar is automatically shown when the size of the control content exceeds the size of the control itself.
- Hidden - The scrollbar is hidden.
- Visible - The scrollbar is visible.
<dx:BootstrapCardView runat="server" Width="100%"
DataSourceID="ProductsDataSource">
<Columns>
<dx:BootstrapCardViewTextColumn FieldName="ProductName" />
<dx:BootstrapCardViewTextColumn FieldName="Category.CategoryName" />
<dx:BootstrapCardViewTextColumn FieldName="UnitPrice">
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewTextColumn FieldName="QuantityPerUnit" />
<dx:BootstrapCardViewCheckColumn FieldName="Discontinued" />
</Columns>
<Settings VerticalScrollBarMode="Visible" VerticalScrollableHeight="368" />
<SettingsPager NumericButtonCount="6" ItemsPerPage="4"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
Endless Paging
The Card View control supports the endless paging mode. This mode allows cards to load on demand. To enable this functionality, set the SettingsPager.Mode property to EndlessPaging.
When the SettingsPager.EndlessPagingMode property is set to OnClick, the cards are loaded when the Show more cards button is clicked.
<dx:BootstrapCardView runat="server" Width="100%"
DataSourceID="ProductsDataSource" KeyFieldName="ProductID">
<Columns>
<dx:BootstrapCardViewTextColumn FieldName="ProductName" />
<dx:BootstrapCardViewTextColumn FieldName="Category.CategoryName" />
<dx:BootstrapCardViewTextColumn FieldName="UnitPrice">
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewTextColumn FieldName="QuantityPerUnit" />
<dx:BootstrapCardViewCheckColumn FieldName="Discontinued" />
</Columns>
<SettingsPager ItemsPerPage="2" Mode="EndlessPaging" />
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
Endless Paging on Page Scroll
The Card View control supports the endless paging mode. This mode allows cards to load on demand. To enable this functionality, set the SettingsPager.Mode property to EndlessPaging.
When the SettingsPager.EndlessPagingMode property is set to OnScroll, the cards are automatically loaded when a page or the control is scrolled.
<dx:BootstrapCardView runat="server" Width="100%"
DataSourceID="ProductsDataSource" KeyFieldName="ProductID">
<Columns>
<dx:BootstrapCardViewTextColumn FieldName="ProductName" />
<dx:BootstrapCardViewTextColumn FieldName="Category.CategoryName" />
<dx:BootstrapCardViewTextColumn FieldName="UnitPrice">
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewTextColumn FieldName="QuantityPerUnit" />
<dx:BootstrapCardViewCheckColumn FieldName="Discontinued" />
</Columns>
<SettingsPager ItemsPerPage="2" Mode="EndlessPaging" EndlessPagingMode="OnScroll" />
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>