DxDataGridComboBoxColumn<T> Class

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

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

Type Parameters

Remarks

The DxDataGridComboBoxColumn column displays values that can be modified in a combobox editor. The following image shows the Cloud Cover 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:

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:

Group, Sort, and Filter Data

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