DxDataGridComboBoxColumn<T> Class

A data column with a combobox editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxDataGridComboBoxColumn<T> :
    DxDataGridColumn,
    IDataSourceSettings<T>

Type Parameters

Name Description
T

The data item type.

Remarks

The DxDataGridComboBoxColumn column displays values that can be modified in a combobox editor. The following image shows the Cloud Cover combobox column:

DataGrid ComboBox Column

Run Demo: Data Grid - Column Types

Watch Video: Data Grid - Column Customization

Bind a Column to Data

  1. Add the <DxDataGridComboBoxColumn/> tag to a Data Grid component's markup.
  2. Use one of the following properties to bind the column to data:

    • Data - to a strongly typed collection.
    • DataAsync - to a strongly typed collection that is loaded asynchronously (for instance, from an HTTP request).
    • CustomData - to a strongly typed collection that is stored on a remote service and is loaded through a Web API.

      If you bind the ComboBox column to a data collection that stores custom objects (IEnumerable<CustomType>), override the object's Equals method.

  3. Use the Field property to assign a data source field to the column.

    You can also use the TextFieldName and ValueFieldName properties to specify data source fields that provide text and values for column items.

@if (DataSource == null) {
    <div>Loading...</div>
} else {
<DxDataGrid Data="@DataSource">
    @*...*@
    <DxDataGridComboBoxColumn Field="@nameof(WeatherForecast.CloudCover)"
                              Data="@CloudCover" />
</DxDataGrid>
}

@code {
    IEnumerable<WeatherForecast> DataSource;
    public class WeatherForecast {
        // ...
        public string CloudCover { get; set; }
    }
    public string[] CloudCover = new[] {
        "Sunny", "Partly cloudy", "Cloudy", "Storm"
    };

    protected override void OnInitialized() {
        DataSource = GetForecast();
    }

    public IEnumerable<WeatherForecast> GetForecast() {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        for (var i = 1; i < 15; i++) {
            yield return new WeatherForecast { Date = startDate.AddDays(i), 
                                               TemperatureC = rng.Next(-15, 20),
                                               CloudCover = CloudCover[rng.Next(0, CloudCover.Length)] };
        }
    }

    public override bool Equals(object obj) {
        if (obj is WeatherForecast)
            return this.ID == ((WeatherForecast)obj).ID;
        return base.Equals(obj);
    }
}

Column Appearance and Visibility

Use the following properties to customize column appearance and visibility:

Property Description
Caption Specifies the column's caption.
DisplayTemplate Specifies a template for column cells.
ShowInColumnChooser Specifies if the column is displayed in the Column Chooser.
TextAlignment Specifies the text alignment in the column.
Visible Specifies if the column is visible in the grid.
VisibleIndex Specifies the column's visible index.
Width Specifies the column's width.

Settings For Edit Mode

When users click the New or Edit button in a command column, the grid displays the Edit Form. The form contains a combobox editor that allows users to modify the combobox column's value. To customize this editor, use the following properties:

Property Description
ClearButtonDisplayMode Specifies if the Clear button is displayed in the non-empty editor.
EditFormVisibleIndex Specifies the editor's visible index.
EditorVisible Specifies if the editor is visible.
EditTemplate Specifies a template used to display the editor.

Group, Sort, and Filter Data

Use the following properties to specify group and sort settings for an individual column:

Property Description
AllowGroup Specifies if users can group grid data by this column.
AllowSort Specifies if users can sort data by the column's values.
FilteringMode Specifies how the column's data is filtered.
GroupIndex Specifies the column's index among group columns. If the property is set to -1, the grid data is not grouped by this column.
SortIndex Specifies the column's index among sorted columns. If the property is set to -1, the grid data is not sorted by this column.
SortOrder Specifies the column's sort order.

Inheritance

Object
ComponentBase
DxSettingsComponent
DxDataColumnBase
DxDataColumnBase<DevExpress.Blazor.Internal.Grid.IDataColumnModel>
DxDataGridColumnBase<DevExpress.Blazor.Internal.Grid.IDataColumnModel>
DxDataGridColumn
DxDataGridComboBoxColumn<T>
See Also