DxComboBoxSettings.ColumnCellDisplayTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

[Parameter]
public RenderFragment<ComboBoxColumnCellDisplayTemplateContext> ColumnCellDisplayTemplate { get; set; }

Property Value

Type	Description
RenderFragment<ComboBoxColumnCellDisplayTemplateContext>	The template for column cells.

Remarks

The ColumnCellDisplayTemplate property allows you to customize the appearance of every cell in the ComboBox control. The template accepts a ComboBoxColumnCellDisplayTemplateContext object as the context parameter. You can use the parameter’s members to:

• Fetch the associated data item.
• Get information about a cell.
• Access the current column object.

Note

The ColumnCellDisplayTemplate property can be used alongside the CellDisplayTemplate property. If both templates are defined, the column-specific CellDisplayTemplate overrides the global ColumnCellDisplayTemplate for cells within that particular column.

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

Razor

@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();
    }
}

CSS

.green {
    color: var(--bs-success);
}
.red {
    color: var(--bs-danger);
}

Category.cs

using System;
using System.Collections.Generic;

#nullable disable

namespace EditRow.Data.Northwind {
    public partial class Category {
        public Category() {
            Products = new HashSet<Product>();
        }

        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
        public string Description { get; set; }
        public byte[] Picture { get; set; }

        public virtual ICollection<Product> Products { get; set; }
    }
}

Implements

ColumnCellDisplayTemplate