[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Collapse]Card View
    Overview - CardView
    Main Features - Card View
   [Collapse]Concepts
    [Expand]Binding to Data
    [Collapse]Data Representation Basics
      Data Columns
      Unbound Columns
    [Expand]Focus and Navigation
    [Expand]Data Editing and Validation
     Adaptivity
    [Expand]Export
   [Expand]Member Tables
  [Expand]Reporting
  [Expand]Charting
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]SpellChecker
  [Expand]Query Builder
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Data Columns

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.

Expanded 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.

Expanded 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.

Is this topic helpful?​​​​​​​