Vertical Scrolling

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.
Chai
Beverages
$18.00
10 boxes x 20 bags
Chang
Beverages
$19.00
24 - 12 oz bottles
Aniseed Syrup
Condiments
$10.00
12 - 550 ml bottles
Chef Anton's Cajun Seasoning
Condiments
$22.00
48 - 6 oz jars
<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.

Chai
Beverages
$18.00
10 boxes x 20 bags
Chang
Beverages
$19.00
24 - 12 oz bottles
<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.

Chai
Beverages
$18.00
10 boxes x 20 bags
Chang
Beverages
$19.00
24 - 12 oz bottles
<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>
Screen Size
Color Themes
Demo QR Code