Bootstrap CardView Column Types Demo | DevExpress Bootstrap Controls for ASP.NET

Data Column

A BootstrapCardViewColumn is a type of a grid column that automatically determines the actual column type (and, consequently, the control used for both displaying and editing cell data) based on the type of a data field to which a column is bound:

A Date Edit column is created for the DateTime data type.
A Check Box column is created for the Bool data type.
A Text column is created for any other data type.

Name:

PrintingSystem

Start Date:

6/19/2004

End Date:

7/9/2004

Done:

Name:

Start Date:

June 2004

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
23	30	31	1	2	3	4	5
24	6	7	8	9	10	11	12
25	13	14	15	16	17	18	19
26	20	21	22	23	24	25	26
27	27	28	29	30	1	2	3
28	4	5	6	7	8	9	10

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

End Date:

July 2004

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
27	27	28	29	30	1	2	3
28	4	5	6	7	8	9	10
29	11	12	13	14	15	16	17
30	18	19	20	21	22	23	24
31	25	26	27	28	29	30	31
32	1	2	3	4	5	6	7

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

Done:

ASPX Copy

<dx:BootstrapCardView runat="server" DataSourceID="TasksDataSource" KeyFieldName="ID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="Name" />
        <dx:BootstrapCardViewColumn FieldName="StartDate" />
        <dx:BootstrapCardViewColumn FieldName="EndDate" />
        <dx:BootstrapCardViewColumn FieldName="Done" />
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Binary Image Column

A BootstrapCardViewBinaryImageColumn column used to display images for columns that contain binary data. You can access the Binary Image settings using a column's PropertiesBinaryImage property.

Editing settings of the Binary Image control are available via the PropertiesBinaryImage.EditingSettings property.

PropertiesBinaryImage.ImageWidth - Specifies the width of the image displayed within a column.
PropertiesBinaryImage.ImageHeight - Specifies the height of the image displayed within a column.

First Name:

Nancy

Last Name:

Davolio

Title:

Sales Representative

Photo:

First Name:

Last Name:

Title:

Photo:

ASPX Copy

<dx:BootstrapCardView ID="CardViewBinaryImageColumn" runat="server" DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <SettingsDataSecurity AllowEdit="true" />
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="FirstName" ReadOnly="true">
        </dx:BootstrapCardViewTextColumn>
        <dx:BootstrapCardViewTextColumn FieldName="LastName" ReadOnly="true">
        </dx:BootstrapCardViewTextColumn>
        <dx:BootstrapCardViewTextColumn FieldName="Title" ReadOnly="true">
        </dx:BootstrapCardViewTextColumn>
        <dx:BootstrapCardViewBinaryImageColumn FieldName="Photo" Width="120px">
            <PropertiesBinaryImage ImageHeight="100px">
                <EditingSettings Enabled="true"></EditingSettings>
            </PropertiesBinaryImage>
        </dx:BootstrapCardViewBinaryImageColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Button Edit Column

A BootstrapCardViewButtonEditColumn column displays the Button Edit control as its cell editor. You can access the cell editor's settings using the column's PropertiesButtonEdit property.

PropertiesButtonEdit.Buttons - a collection property that allows you to specify buttons that should be displayed within the cell editor.

First Name:

Nancy

Last Name:

Davolio

Title:

Sales Representative

First Name:

Last Name:

Title:

ASPX Copy

<dx:BootstrapCardView ID="CardViewButtonEditColumn" runat="server" DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapCardViewButtonEditColumn FieldName="FirstName">
            <PropertiesButtonEdit>
                <ClearButton DisplayMode="Always" />
            </PropertiesButtonEdit>
        </dx:BootstrapCardViewButtonEditColumn>
        <dx:BootstrapCardViewButtonEditColumn FieldName="LastName">
            <PropertiesButtonEdit>
                <Buttons>
                    <dx:BootstrapEditButton Text="Button" />
                    <dx:BootstrapEditButton IconCssClass="fa fa-sync" />
                </Buttons>
            </PropertiesButtonEdit>
        </dx:BootstrapCardViewButtonEditColumn>
        <dx:BootstrapCardViewButtonEditColumn FieldName="Title">
            <PropertiesButtonEdit>
                <Buttons>
                    <dx:BootstrapEditButton IconCssClass="fa fa-download" />
                </Buttons>
            </PropertiesButtonEdit>
        </dx:BootstrapCardViewButtonEditColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Check Column

A BootstrapCardViewCheckColumn is a column using a check box to display and edit data from Boolean data fields. You can access the cell editor's settings using the column's PropertiesCheckEdit property.

PropertiesCheckEdit.UseDisplayImages - Specifies whether the editor's check state is represented by icons or specific texts in browse mode.
PropertiesCheckEdit.DisplayTextChecked / DisplayTextUnchecked - Specifies the text that represents the checked/unchecked state of a column editor in browse mode.
CssClassesEditor.IconCheckColumnChecked / IconCheckColumnUnchecked - Specifies the icons that represent the checked/unchecked state of a column editor in browse mode.

Product Name:

Chai

Discontinued:

Product Name:

Discontinued:

ASPX Copy

<dx:BootstrapCardView ID="CardViewCheckColumn" runat="server" DataSourceID="ProductsDataSource" KeyFieldName="ProductID">
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="ProductName" ReadOnly="true" />
        <dx:BootstrapCardViewCheckColumn FieldName="Discontinued" />
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Combo Box Column

A BootstrapCardViewComboBoxColumn is a column whose values are edited using the Combo Box editor. You can access the cell editor's settings using the column's PropertiesComboBox property.

PropertiesComboBox.Items - specifies collection of Combo Box items.
PropertiesComboBox.DataSourceID - allows to bind Combo Box item collection to a data source.

Contact Name:

Maria Anders

Country:

Germany

Contact Name:

Country:

ASPX Copy

<dx:BootstrapCardView ID="CardViewComboBoxColumn" runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="ContactName" ReadOnly="true"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewComboBoxColumn FieldName="Country">
            <PropertiesComboBox TextField="CountryName" ValueField="CountryName" EnableSynchronization="False"
                IncrementalFilteringMode="StartsWith" DataSourceID="CountriesDataSource">
            </PropertiesComboBox>
        </dx:BootstrapCardViewComboBoxColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Date Edit Column

A BootstrapCardViewDateColumn is a column using the Date Edit control to display and edit data from a DateTime data field. You can access the cell editor's settings using the column's PropertiesDateEdit property.

PropertiesDateEdit.EditFormat - Specifies possible formats of the date column: Time, DateTime, Date, Custom.

Employee:

Nancy Davolio

Birth Date:

12/8/1978

Hire Date:

5/1/2005

Employee:

Andrew Fuller

Birth Date:

February 1965

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
05	31	1	2	3	4	5	6
06	7	8	9	10	11	12	13
07	14	15	16	17	18	19	20
08	21	22	23	24	25	26	27
09	28	1	2	3	4	5	6
10	7	8	9	10	11	12	13

Hire Date:

August 1992

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	26	27	28	29	30	31	1
32	2	3	4	5	6	7	8
33	9	10	11	12	13	14	15
34	16	17	18	19	20	21	22
35	23	24	25	26	27	28	29
36	30	31	1	2	3	4	5

ASPX Copy

<dx:BootstrapCardView runat="server" DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapCardViewColumn Caption="Employee">
            <DataItemTemplate>
                <%# Eval("FirstName") %> <%# Eval("LastName") %>
            </DataItemTemplate>
            <EditItemTemplate>
                <div class="form-control-static">
                    <%# Eval("FirstName") %> <%# Eval("LastName") %>
                </div>
            </EditItemTemplate>
        </dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewDateColumn FieldName="BirthDate">
        </dx:BootstrapCardViewDateColumn>
        <dx:BootstrapCardViewDateColumn FieldName="HireDate">
        </dx:BootstrapCardViewDateColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Drop-Down Edit Column

A BootstrapCardViewDropDownEditColumn column provides a cell editor containing a customizable drop-down window. You can access the cell editor's settings using the column's PropertiesDropDownEdit property.

PropertiesDropDownEdit.DropDownWindowTemplate - Specifies a template used to display the editor's drop-down window content.

Order ID:

10248

Employee ID:

Order ID:

Employee ID:

Last Name	First Name	Title
Davolio	Nancy	Sales Representative
Fuller	Andrew	Vice President, Sales
Leverling	Janet	Sales Representative
Peacock	Margaret	Sales Representative
Buchanan	Steven	Sales Manager
Suyama	Michael	Sales Representative
King	Robert	Sales Representative
Callahan	Laura	Inside Sales Coordinator
Dodsworth	Anne	Sales Representative

ASPX JS Copy

<dx:BootstrapCardView ID="CardViewDropDownEditColumn" runat="server" DataSourceID="OrdersDataSource" KeyFieldName="OrderID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="OrderID" ReadOnly="true"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewDropDownEditColumn FieldName="EmployeeID">
            <PropertiesDropDownEdit ClientInstanceName="dropDownEdit">
                <DropDownWindowTemplate>
                    <dx:BootstrapGridView runat="server" ClientInstanceName="employeesGridView"
                        DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
                        <ClientSideEvents SelectionChanged="selectionChanged" />
                        <SettingsBehavior AllowSelectByRowClick="true" AllowSelectSingleRowOnly="true" />
                        <Columns>
                            <dx:BootstrapGridViewDataColumn FieldName="LastName" />
                            <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
                            <dx:BootstrapGridViewDataColumn FieldName="Title" />
                        </Columns>
                    </dx:BootstrapGridView>
                </DropDownWindowTemplate>
            </PropertiesDropDownEdit>
        </dx:BootstrapCardViewDropDownEditColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

function selectionChanged(s, e) {
    dropDownEdit.SetValue(employeesGridView.GetSelectedKeysOnPage()[0]);
    dropDownEdit.HideDropDown();
}

Hyperlink Column

A BootstrapCardViewHyperLinkColumn column represents a data column with hyperlink functionality. You can access settings of a displayed hyperlink using the PropertiesHyperLinkEdit property.

By default, if no display text is provided for a hyperlink through the corresponding settings (HyperLinkProperties.Text, HyperLinkProperties.TextField), the hyperlink displays the URL obtained from the column's data field. You can disable this behavior by setting the BootstrapCardViewHyperLinkColumn.ShowUrlAsDisplayText property to false.

HyperLinkProperties.NavigateUrlFormatString - Specifies the pattern used to format the hyperlink location url in display mode.

First Name:

Paul

Last Name:

Bailey

Email:

paulb@westchestercounty.com

First Name:

Last Name:

Email:

ASPX Copy

<dx:BootstrapCardView ID="CardViewHyperLinkColumn" runat="server" DataSourceID="UsersDataSource" KeyFieldName="ID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="FirstName" ReadOnly="true"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="LastName" ReadOnly="true"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewHyperLinkColumn FieldName="Email">
            <PropertiesHyperLinkEdit NavigateUrlFormatString="mailto:{0}">
            </PropertiesHyperLinkEdit>
        </dx:BootstrapCardViewHyperLinkColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Image Column

A BootstrapCardViewImageColumn is a column used to display images from specified URLs. You can access the cell editor's settings using the column's PropertiesImage property.

PropertiesImage.ImageUrlFormatString - specifies the pattern used to format the URL that points to the image displayed in the cell

First Name:

Andrew

Last Name:

Fuller

Email:

andrew.fuller@devexpress.com

Photo:

First Name:

Margaret

Last Name:

Peackop

Email:

margaret.peackop.devexpress.com

Photo:

ASPX Copy

<dx:BootstrapCardView ID="CardViewImageColumn" runat="server" DataSourceID="PersonsDataSource" KeyFieldName="ID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="FirstName"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="LastName"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="Email"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewImageColumn FieldName="Photo" Width="120px">
            <PropertiesImage ImageUrlFormatString="~/images/persons/{0}" ImageHeight="100px" />
        </dx:BootstrapCardViewImageColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Memo Column

A BootstrapCardiewMemoColumn is a data column used to display and edit multiline text data. You can access the cell editor's settings using the column's PropertiesMemoEdit property.

PropertiesMemoEdit.Columns - Gets or sets the textarea's width in characters.
PropertiesMemoEdit.Rows - Gets or sets the textarea's height in characters.

Category Name:

Beverages

Description:

Soft drinks, coffees, teas, beers, and ales

Category Name:

Description:

ASPX Copy

<dx:BootstrapCardView ID="CardViewMemoColumn" runat="server" DataSourceID="CategoriesDataSource" KeyFieldName="CategoryID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="CategoryName" ReadOnly="true" />
        <dx:BootstrapCardViewMemoColumn FieldName="Description" />
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Progress Bar Column

A BootstrapCardViewProgressBarColumn column presents numeric data as a progress bar. You can access settings of a displayed progress bar using the column's PropertiesProgressBar property.

PropertiesProgressBar.Minimum - Specifies the minimum range value of a progress bar column (when the progress bar is empty).
PropertiesProgressBar.Maximum - Specifies the maximum range value of a progress bar column (when the progress bar is completely filled).

Name:

Complete:

Name:

Testing and writing examples

Complete:

ASPX Copy

<dx:BootstrapCardView ID="CardViewProgressBarColumn" runat="server" DataSourceID="TasksDataSource" KeyFieldName="ID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="Name" ReadOnly="true"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewProgressBarColumn FieldName="Complete">
            <PropertiesProgressBar Minimum="0" Maximum="1"></PropertiesProgressBar>
        </dx:BootstrapCardViewProgressBarColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Spin Edit Column

A BootstrapCardViewSpinEditColumn is a column used to display and edit numeric data. The column data is edited using the Spin Edit control. You can access the Spin Edit settings using the column's PropertiesSpinEdit property.

PropertiesSpinEdit.Increment - Specifies the value by which the spin editor's value is changed when clicking a small increment/decrement spin button.
PropertiesSpinEdit.NumberFormat - Specifies possible display formats for a spin editor's value: Number, Currency, Percent, Custom.
PropertiesSpinEdit.MinValue / MaxValue - Specify the minimum and maximum values of the column editor.

Product Name:

Chai

Unit Price:

$18.00

Product Name:

Unit Price:

ASPX Copy

<dx:BootstrapCardView ID="CardViewSpinEditColumn" runat="server" DataSourceID="ProductsDataSource" KeyFieldName="ProductID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="ProductName" ReadOnly="true"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewSpinEditColumn FieldName="UnitPrice">
            <PropertiesSpinEdit LargeIncrement="1" Increment="0.1" NumberType="Float" NumberFormat="Currency">
                <SpinButtons ShowLargeIncrementButtons="true" />
            </PropertiesSpinEdit>
        </dx:BootstrapCardViewSpinEditColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Tag Box Column

A BootstrapCardViewTagBoxColumn is a column used to display and edit values with the Tag Box editor. You can access the cell editor's settings using the column's PropertiesTagBox property.

PropertiesTagBox.Tags - Provides access a collection of editor tags.
PropertiesTagBox.DataSourceID - Allows to bind the tags collection to a data source.
PropertiesTagBox.AllowCustomTags - Specifies whether end-users can input tokens that are not contained in the Tags collection.

Full Name:

Andrew Fuller

Roles:

Administrator, Marketing Manager

Full Name:

Roles:

ASPX Copy

<dx:BootstrapCardView ID="CardViewTagBoxColumn" runat="server" DataSourceID="CompanyEmployeesDataSource" KeyFieldName="ID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="FullName" ReadOnly="true"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewTagBoxColumn FieldName="Roles">
            <PropertiesTagBox TextField="Name" ValueField="ID" DataSourceID="CompanyEmployeeRolesDataSource" />
        </dx:BootstrapCardViewTagBoxColumn>
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Text Column

A BootstrapCardViewTextColumn is a data column used to display and edit text. You can access the cell editor's settings using the column's PropertiesTextEdit property.

First Name:

Nancy

Last Name:

Davolio

Title:

Sales Representative

First Name:

Last Name:

Title:

ASPX Copy

<dx:BootstrapCardView ID="CardViewTextColumn" runat="server" DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="FirstName" />
        <dx:BootstrapCardViewTextColumn FieldName="LastName" />
        <dx:BootstrapCardViewTextColumn FieldName="Title" />
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Time Edit Column

A BootstrapCardViewTimeEditColumn is a column using the Time Edit control to display and edit data from a DateTime data field. You can access the cell editor's settings using the column's PropertiesTimeEdit property.

PropertiesTimeEdit.EditFormat - specifies possible formats of the date column: Time, DateTime, Date, Custom

Name:

Planned Date:

November 2024

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
44	27	28	29	30	31	1	2
45	3	4	5	6	7	8	9
46	10	11	12	13	14	15	16
47	17	18	19	20	21	22	23
48	24	25	26	27	28	29	30
49	1	2	3	4	5	6	7

Start Time:

End Time:

Name:

Daily Standup

Planned Date:

11/6/2024

Start Time:

9:15 AM

End Time:

9:30 AM

ASPX Copy

<dx:BootstrapCardView ID="CardViewTimeEditColumn" runat="server" DataSourceID="MeetingsDataSource" KeyFieldName="ID">
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="Name" ReadOnly="true" />
        <dx:BootstrapCardViewDateColumn FieldName="PlannedDate" ReadOnly="true">
            <PropertiesDateEdit DropDownButton-Visible="false" />
        </dx:BootstrapCardViewDateColumn>
        <dx:BootstrapCardViewTimeEditColumn FieldName="StartTime" />
        <dx:BootstrapCardViewTimeEditColumn FieldName="EndTime" />
    </Columns>
    <SettingsPager NumericButtonCount="6" ItemsPerPage="2" Visible="false"></SettingsPager>
</dx:BootstrapCardView>

Data Column

Binary Image Column

Button Edit Column

Check Column

Combo Box Column

Date Edit Column

Drop-Down Edit Column

Hyperlink Column

Image Column

Memo Column

Progress Bar Column

Spin Edit Column

Tag Box Column

Text Column

Time Edit Column

Screen Size

Color Themes

Demo QR Code