Data Columns

• Feb 02, 2023
• 4 minutes to read

Data columns are used to display and edit data. CardView supports both bound and unbound data columns.

• Bound data columns represent fields in CardView‘s data source. Their CardViewColumn.FieldName properties refer to valid fields in a data source.
• Unbound columns are not bound to any field in a data source. These columns must be populated manually. For information, see Unbound Columns.

There are fifteen types of server data columns.

Class Name	Description
CardViewBinaryImageColumn	Represents a data column used to display images from a binary stream.
CardViewButtonEditColumn	Represents a data column with the button editor.
CardViewCheckColumn	Represents a data column used to display and edit data from a Boolean data field.
CardViewColorEditColumn	Represents a data column used to display and edit color values.
CardViewComboBoxColumn	Represents a data column whose values are edited using the combo box editor.
CardViewDateColumn	Represents a data column used to display and edit data from a DateTime data field.
CardViewDropDownEditColumn	Represents a data column with an editor containing a customizable dropdown window.
CardViewHyperLinkColumn	Represents a data column with a hyperlink functionality.
CardViewImageColumn	Represents a data column used to display images from specified URLs.
CardViewMemoColumn	Represents a data column used to display and edit memo data.
CardViewProgressBarColumn	Represents a data column with the Progress Bar editor.
CardViewSpinEditColumn	Represents a data column used to display and edit numeric data.
CardViewTextColumn	Represents a data column used to display and edit text.
CardViewTimeEditColumn	Represents a data column used to display and edit time portions of DateTime values.
CardViewTokenBoxColumn	A data column with the token box editor.

You can define the column type using the MVCxCardViewColumn.ColumnType property, which receives one of the MVCxCardViewColumnType enumeration values. The table below lists the CardView column types, and the default editors used to edit and display values in these column types.

Enum Field	Description	Values are Edited with	Values are Displayed with
MVCxCardViewColumnType.BinaryImage	Indicates that a binary image editor is used to display column values.	Values are read-only	BinaryImage
MVCxCardViewColumnType.ButtonEdit	Indicates that a button editor is used to edit column values.	ButtonEdit	Plain text
MVCxCardViewColumnType.CheckBox	Indicates that a check box is used to edit and display column values.	CheckBox	CheckBox
MVCxCardViewColumnType.ColorEdit	Indicates that a color editor is used to edit column values.	ColorEdit	Color Indicator with plain text
MVCxCardViewColumnType.ComboBox	Indicates that a combo box is used to edit column values.	ComboBox	Plain text
MVCxCardViewColumnType.DateEdit	Indicates that a date editor is used to edit column values.	DateEdit	Plain text
MVCxCardViewColumnType.DropDownEdit	Indicates that a drop down editor is used to edit column values.	DropDownEdit	Plain text
MVCxCardViewColumnType.HyperLink	Indicates that a hyperlink editor is used to display column values.	TextBox	HyperLink
MVCxCardViewColumnType.Image	Indicates that an image editor is used to display column values.	Values are read-only	Image
MVCxCardViewColumnType.Memo	Indicates that a memo editor is used to edit column values.	Memo	Plain text
MVCxCardViewColumnType.ProgressBar	Indicates that a progress bar is used to visualize column values.	SpinEdit	ProgressBar
MVCxCardViewColumnType.SpinEdit	Indicates that a spin editor is used to edit column values.	SpinEdit	Plain text
MVCxCardViewColumnType.TextBox	Indicates that a text box is used to edit column values.	TextBox	Plain text
MVCxCardViewColumnType.TimeEdit	Indicates that a time editor is used to edit column values.	TimeEdit	Plain text
MVCxCardViewColumnType.TokenBox	Indicates that a token box is used to edit column values.	TokenBox	Plain text

On the client, data columns are represented by ASPxClientCardViewColumn objects.

Behavior

Since different types of data columns present different types of data, they provide their own editors. For example, boolean values are edited using a check box editor, while DateTime values are edited using a DateTime editor. To access and customize the column editor’s settings, use the CardViewColumn.PropertiesEdit property.

Data columns provide a set of boolean properties that enable you to specify which elements of a column’s functionality (sorting, filtering, etc.) are available to end-users. These options can be accessed using the CardViewColumn.Settings property.

To make a column read-only, set its CardViewColumn.ReadOnly property to true.

The code sample below demonstrates how to add a read-only data column, change columns settings, and change the built-in data editor settings.

C#

@Html.DevExpress().CardView(settings => {
    settings.Name = "CardView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "CardViewPartial" };
    // ... 
    // Add a read-only data column. 
    settings.Columns.Add("FullName").ReadOnly = true;
    // Add a data column bound to the "Quantity" field. 
    settings.Columns.Add(c =>
    {
        // Define column settings. 
        // Define the name of the field to which the column is bound. 
        c.FieldName = "Quantity";
        // End-users will be able to edit column values using the SpinEdit extension. 
        c.ColumnType = MVCxCardViewColumnType.SpinEdit;
        // Define SpinEdit settings. 
        var spinSettings = (SpinEditProperties)c.PropertiesEdit;
        spinSettings.LargeIncrement = 10;
        spinSettings.SpinButtons.ShowLargeIncrementButtons = true;
    });
    // ... 
}).Bind(Model).GetHtml();

Visibility

The column’s visibility is specified by its WebColumnBase.Visible property. Its position among other visible columns is specified by its WebColumnBase.VisibleIndex property.