Skip to main content

Data Columns

  • 4 minutes to read

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

  • Bound data columns represent fields in the GridView‘s data source (Data Model). Each column’s GridViewDataColumn.FieldName (via MVCxGridViewColumn.FieldName) property refers to a valid field 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 the Unbound Columns topic.

There are fifteen types of data columns. You can define the column type using the MVCxGridViewColumn.ColumnType property, which receives one of the MVCxGridViewColumnType enumeration values. The table below lists the GridView 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
MVCxGridViewColumnType.BinaryImage Indicates that a binary image editor is used to display column values. Values are read-only BinaryImage
MVCxGridViewColumnType.ButtonEdit Indicates that a button editor is used to edit column values. ButtonEdit Plain text
MVCxGridViewColumnType.CheckBox Indicates that a check box is used to edit and display column values. CheckBox CheckBox
MVCxGridViewColumnType.ColorEdit Indicates that a color editor is used to edit column values. ColorEdit Color Indicator with plain text
MVCxGridViewColumnType.ComboBox Indicates that a combo box is used to edit column values. ComboBox Plain text
MVCxGridViewColumnType.DateEdit Indicates that a date editor is used to edit column values. DateEdit Plain text
MVCxGridViewColumnType.DropDownEdit Indicates that a drop down editor is used to edit column values. DropDownEdit Plain text
MVCxGridViewColumnType.HyperLink Indicates that a hyperlink editor is used to display column values. TextBox HyperLink
MVCxGridViewColumnType.Image Indicates that an image editor is used to display column values. Values are read-only Image
MVCxGridViewColumnType.Memo Indicates that a memo editor is used to edit column values. Memo Plain text
MVCxGridViewColumnType.ProgressBar Indicates that a progress bar is used to visualize column values. SpinEdit ProgressBar
MVCxGridViewColumnType.SpinEdit Indicates that a spin editor is used to edit column values. SpinEdit Plain text
MVCxGridViewColumnType.TextBox Indicates that a text box is used to edit column values. TextBox Plain text
MVCxGridViewColumnType.TimeEdit Indicates that a time editor is used to edit column values. TimeEdit Plain text
MVCxGridViewColumnType.TokenBox Indicates that a token box is used to edit column values. TokenBox Plain text

On the client, data columns are represented by ASPxClientGridViewColumn 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 GridViewEditDataColumn.PropertiesEdit (via MVCxGridViewColumn.PropertiesEdit) property.

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

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

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

@Html.DevExpress().GridView(settings => {
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
    // ...
    // 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 = MVCxGridViewColumnType.SpinEdit;
        // Define SpinEdit settings.
        var spinSettings = (SpinEditProperties)c.PropertiesEdit;
        spinSettings.LargeIncrement = 10;
        spinSettings.SpinButtons.ShowLargeIncrementButtons = true;
    });
    settings.Columns.Add(c => {
        c.FieldName = "Photo";
        c.EditorProperties().BinaryImage(p => {
            p.ImageHeight = 170;
            p.ImageWidth = 160;
            p.EnableServerResize = true;
            p.ImageSizeMode = ImageSizeMode.FitProportional;
            p.CallbackRouteValues = new { Action = "BinaryImageColumnPhotoUpdate", Controller = "Editing" };
            p.EditingSettings.Enabled = true;
            p.EditingSettings.UploadSettings.UploadValidationSettings.MaxFileSize = 4194304;
        });
    });
    // ...
}).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.

End-users can hide and show columns via the Customization Window.

See Also