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.
PrintingSystem
6/19/2004
7/9/2004
<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>
</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.

Nancy
Davolio
Sales Representative
<dx:BootstrapCardView ID="CardViewBinaryImageColumn" runat="server" DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <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>
</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.

Nancy
Davolio
Sales Representative
<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>
</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.

Chai
<dx:BootstrapCardView ID="CardViewCheckColumn" runat="server" DataSourceID="ProductsDataSource" KeyFieldName="ProductID">
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="ProductName" ReadOnly="true" />
        <dx:BootstrapCardViewCheckColumn FieldName="Discontinued" />
    </Columns>
</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.

Maria Anders
Germany
<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>
</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.

Nancy Davolio
12/8/1978
5/1/2005
Andrew Fuller
<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>
</dx:BootstrapCardView>

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.

10248
5
<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>
</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.

Paul
Bailey
<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>
</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.

Andrew
Fuller
andrew.fuller@devexpress.com
Margaret
Peackop
margaret.peackop.devexpress.com
<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>
</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.

Beverages
Soft drinks, coffees, teas, beers, and ales
<dx:BootstrapCardView ID="CardViewMemoColumn" runat="server" DataSourceID="CategoriesDataSource" KeyFieldName="CategoryID">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="CategoryName" ReadOnly="true" />
        <dx:BootstrapCardViewMemoColumn FieldName="Description" />
    </Columns>
</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.

Testing and writing examples
0%
<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>
</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.

Chai
$18.00
<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>
</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.

Andrew Fuller
Administrator, Marketing Manager
HR Manager
<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>
</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.

Nancy
Davolio
Sales Representative
<dx:BootstrapCardView ID="CardViewTextColumn" runat="server" DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapCardViewTextColumn FieldName="FirstName" />
        <dx:BootstrapCardViewTextColumn FieldName="LastName" />
        <dx:BootstrapCardViewTextColumn FieldName="Title" />
    </Columns>
</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.

Daily Standup
12/10/2019
9:15 AM
9:30 AM
<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>
</dx:BootstrapCardView>
Screen Size
Color Themes
Demo QR Code