Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxComboBoxSettings.ColumnCellDisplayTemplate Property

Specifies a template used to display column cells in the combo box editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Property Value

Type Description
RenderFragment<ComboBoxColumnCellDisplayTemplateContext>

The template for column cells.

#Remarks

The ColumnCellDisplayTemplate allows you to specify custom content and change cell appearance in ComboBox columns. The template accepts a ComboBoxColumnCellDisplayTemplateContext object as the context parameter. You can use the parameter’s members to obtain column cell information:

The following code snippet applies different styles to the combo box editor column texts:

Combo box settings - Column Appearance

@implements IDisposable
@using AutoMapper

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@inject IGlobalOptionsService GlobalOptionsService

<DxGrid Data="Products"
        EditMode="GridEditMode.EditRow"
        CustomizeEditModel="Grid_CustomizeEditModel"
        EditModelSaving="Grid_EditModelSaving">
    <Columns>
        <DxGridCommandColumn DeleteButtonVisible="false" Width="15%" />
        <DxGridDataColumn FieldName="ProductName" Width="25%" />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category" Width="10%">
            <EditSettings>
                <DxComboBoxSettings Data="Categories" ValueFieldName="CategoryId" TextFieldName="CategoryName">
                    <Columns>
                        <DxListEditorColumn FieldName="CategoryId" Caption="Id" />
                        <DxListEditorColumn FieldName="CategoryName" Caption="Name" />
                    </Columns>
                    <ColumnCellDisplayTemplate>
                        @{
                            string cssClass = string.Empty;
                            object displayText = context.Value;
                            switch(context.Column.FieldName) {
                                case "CategoryId": cssClass = "green"; break;
                                case "CategoryName": cssClass = "red"; break;
                                default: cssClass = string.Empty; break;
                            }
                        }
                        <div class="@cssClass">@displayText</div>
                    </ColumnCellDisplayTemplate>
                </DxComboBoxSettings>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%">
            <EditSettings>
                <DxSpinEditSettings MinValue="0M" Mask="n3" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitsInStock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" Width="15%" />   
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>

@code {
    NorthwindContext Northwind { get; set; }
    List<Product> Products { get; set; }
    List<Category> Categories { get; set; }

    IMapper ProductMapper { get; set; }
    bool IsLoading { get; set; } = true;

    protected override async Task OnInitializedAsync() {
        var config = new MapperConfiguration(c => c.CreateMap<Product, EditableProduct>().ReverseMap());
        ProductMapper = config.CreateMapper();

        Northwind = NorthwindContextFactory.CreateDbContext();
        Products = await Northwind.Products.ToListAsync();
        Categories = await Northwind.Categories.ToListAsync();

        GlobalOptionsService.GlobalOptions.ShowValidationIcon = true;

        IsLoading = false;
    }

    void Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
        var editableProduct = new EditableProduct();
        if(!e.IsNew)
            ProductMapper.Map((Product)e.DataItem, editableProduct);
        e.EditModel = editableProduct;
    }

    async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
        var editableProduct = (EditableProduct)e.EditModel;
        var product = e.IsNew
            ? new Product()
            : Northwind.Products.Find(e.Grid.GetDataItemValue(e.DataItem, "ProductId"));
        ProductMapper.Map(editableProduct, product);

        if(e.IsNew)
            await Northwind.Products.AddAsync(product);
        await Northwind.SaveChangesAsync();

        Products = await Northwind.Products.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}
See Also