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:
Bind a Column to Data
- Add the
<DxDataGridComboBoxColumn/>
tag to a Data Grid component's markup. 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.
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. |