DxComboBoxSettings.ColumnCellDisplayTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[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

@using DevExpress.Data.Filtering
@inject NwindDataService NwindDataService
<div class="card p-2 gap-2 mb-2">
    <DxFilterBuilder @bind-FilterCriteria="FilterCriteria">
        <Fields>
            <DxFilterBuilderField FieldName="ProductName" Caption="Product Name" Type="@typeof(string)" />
            <DxFilterBuilderField FieldName="CategoryId" Caption="Category" Type="@typeof(int)">
                <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>
            </DxFilterBuilderField>
            <DxFilterBuilderField FieldName="SupplierId" Caption="Supplier" Type="@typeof(int)">
                <Fields>
                    <DxFilterBuilderField FieldName="Supplier.CompanyName" Caption="Company Name" CaptionFullPath="Supplier.Company Name" Type="@typeof(string)" />
                    <DxFilterBuilderField FieldName="Supplier.ContactName" Caption="Contact Name" CaptionFullPath="Supplier.Contact Name" Type="@typeof(string)" />
                </Fields>
            </DxFilterBuilderField>
            <DxFilterBuilderField FieldName="UnitPrice" Caption="Unit Price" Type="@typeof(decimal)" />
            <DxFilterBuilderField FieldName="UnitsInStock" Caption="Units in Stock" Type="@typeof(short)" />
            <DxFilterBuilderField FieldName="QuantityPerUnit" Caption="Quantity per Unit" Type="@typeof(int)" />
            <DxFilterBuilderField FieldName="Discontinued" Type="@typeof(bool)" />
        </Fields>
    </DxFilterBuilder>

    <div class="d-flex gap-2 justify-content-end align-self-end">
        <DxButton Text="Clear"
                  Click="ClearFilterCriteria"
                  RenderStyle="ButtonRenderStyle.Secondary" />
        <DxButton Text="Apply"
                  Click="ApplyFilterCriteria" />
    </div>
</div>

@code {
    object Data { get; set; }
    CriteriaOperator FilterCriteria { get; set; }
    IEnumerable<Product> Products { get; set; }
    IEnumerable<Category> Categories { get; set; }
    IEnumerable<Supplier> Suppliers { get; set; }
    protected override async Task OnInitializedAsync() {
        Suppliers = await NwindDataService.GetSuppliersAsync();
        Categories = await NwindDataService.GetCategoriesAsync();
        Products = await NwindDataService.GetProductsAsync();

        Data = Products.Join(Categories, p => p.CategoryId, c => c.CategoryId, (p, c) => new {
            p.ProductName,
            p.CategoryId,
            Category = new { c.CategoryName },
            p.SupplierId,
            p.UnitPrice,
            p.UnitsInStock,
            p.QuantityPerUnit,
            p.Discontinued,
        }).Join(Suppliers, p => p.SupplierId, s => s.SupplierId, (p, s) => new {
            p.ProductName,
            p.CategoryId,
            p.Category,
            p.SupplierId,
            Supplier = new { s.CompanyName, s.ContactName },
            p.UnitPrice,
            p.UnitsInStock,
            p.QuantityPerUnit,
            p.Discontinued,
        });
    }
    // ...
}

CSS

.green {
    color: var(--dxds-color-content-success-default-rest);
}

.red {
    color: var(--dxds-color-content-danger-default-rest);
}

Category.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;
namespace BlazorDemo.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