DxComboBox<TData, TValue>.ColumnCellDisplayTemplate Property

Specifies a template used to display column cells in the ComboBox.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment<ComboBoxColumnCellDisplayTemplateContext<TData>>	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:

• Column
• DataItem
• DisplayText
• HighlightedDisplayText
• Value
• VisibleIndex

The code below customizes the appearance of different columns.

Razor

@inject NwindDataService NwindDataService

<DxComboBox Data="@Products"
            @bind-Value="@SelectedProduct"
            TextFieldName="@nameof(Product.ProductName)"
            ListRenderMode="@ListRenderMode.Virtual"
            CssClass="cw-480"
            InputId="cbItemTemplate">
    <Columns>
        <DxListEditorColumn FieldName="@nameof(Product.ProductName)" Caption="Product" Width="30%" />
        <DxListEditorColumn FieldName="@nameof(Product.UnitPrice)" Caption="Unit Price" />
        <DxListEditorColumn FieldName="@nameof(Product.Quantity)" />
        <DxListEditorColumn FieldName="@nameof(Product.Discount)" />
        <DxListEditorColumn FieldName="@nameof(Product.Total)" />
    </Columns>
    <ColumnCellDisplayTemplate>
        @GetColumnCellTemplateRenderFragment(context)
    </ColumnCellDisplayTemplate>
</DxComboBox>

@code {
    const int SelectedProductsCount = 3;
    const int TotalPriceCeiling = 100;
    IEnumerable<Product> Products { get; set; }
    Product SelectedProduct { get; set; }
    const string AlignRightCssClass = "align-right";
    const string TextGreenCssClass = "text-green";
    const string TextRedCssClass = "text-red";

    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        var products = await NwindDataService.GetProductsAsync();
        Products = invoices.Join(products, i => i.ProductId, p => p.ProductId, (i, p) =>
        new Product {
                ProductName = i.ProductName,
                UnitPrice = i.UnitPrice,
                Quantity = i.Quantity,
                Discount = i.Discount
        });
        SelectedProduct = Products.FirstOrDefault();
    }

    RenderFragment GetColumnCellTemplateRenderFragment(ComboBoxColumnCellDisplayTemplateContext<Product> context) {
        object displayValue;
        string cssClass = string.Empty;
        switch(context.Column.FieldName) {
            case nameof(Product.UnitPrice):
            cssClass = AlignRightCssClass;
                displayValue = $"{context.Value:c}";
                break;
            case nameof(Product.Quantity):
                cssClass = AlignRightCssClass;
                displayValue = context.DisplayText;
                break;
            case nameof(Product.Discount):
                displayValue = $"{context.Value:p}";
                break;
            case nameof(Product.Total):
                var value = context.DataItem.UnitPrice * context.DataItem.Quantity;
                var valueCssClass = value >= TotalPriceCeiling ? TextGreenCssClass : TextRedCssClass;
                cssClass = $"{AlignRightCssClass} {valueCssClass}";
                displayValue = $"{value:c}";
                break;
            default:
                displayValue = context.DisplayText;
                break;
        }
        return @<text><div class="@cssClass">@displayValue</div></text>;
    }

    public class Product {
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public int Quantity { get; set; }
        public float Discount { get; set; }
        public int Total { get; set; }
        public override bool Equals(object obj) {
            return obj is Product product && string.Equals(product.ProductName, ProductName) && product.Quantity == Quantity;
        }
        public override int GetHashCode() {
            return HashCode.Combine(ProductName, Quantity);
        }
    }
}

Employee.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

public partial class Employee {
    public Employee() {
        this.Orders = new List<Order>();
    }
    public int EmployeeId { get; set; }
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string Title { get; set; }
    public string TitleOfCourtesy { get; set; }
    public Nullable<System.DateTime> BirthDate { get; set; }
    public Nullable<System.DateTime> HireDate { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
    public string HomePhone { get; set; }
    public string Extension { get; set; }
    public byte[] Photo { get; set; }
    public string Notes { get; set; }
    public Nullable<int> ReportsTo { get; set; }
    public string PhotoPath { get; set; }
    public string GroupName { get; set; }
    public virtual ICollection<Order> Orders { get; set; }
    public string Text => $"{FirstName} {LastName} ({Title})";
    public string FullName => $"{FirstName} {LastName}";
    public string ImageFileName => $"employees/{EmployeeId}.jpg";
}

NwindDataService.cs

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Employee>> GetEmployeesAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}

CSS

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

Startup.cs

public class Startup {
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddScoped<NwindDataService>();
    }
}

Run Demo: ComboBox - Column Cell Display Template

Implements

DevExpress.Blazor.IComboBox<TData, TValue>.ColumnCellDisplayTemplate