DxTagBox<TData, TValue>.ColumnCellDisplayTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment<TagBoxColumnCellDisplayTemplateContext<TData>>	The template for column cells.

Remarks

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

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

The following code customizes the appearance of different columns.

Razor

@inject NwindDataService NwindDataService

<DxTagBox TData="Product" TValue="Product" Data="@Products"
            @bind-Values="@SelectedProducts"
            TextFieldName="@nameof(Product.ProductName)"
            ListRenderMode="ListRenderMode.Virtual">
    <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>
</DxTagBox>


@code {
    const int SelectedProductsCount = 3;
    const int TotalPriceCeiling = 100;
    IEnumerable<Product> Products { get; set; }
    IEnumerable<Product> SelectedProducts { 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
            }
        );
        SelectedProducts = Products.Skip(1).Take(SelectedProductsCount);
    }
    RenderFragment GetColumnCellTemplateRenderFragment(TagBoxColumnCellDisplayTemplateContext<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

.empty-data-area-template {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2rem 0;
}

Startup.cs

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

Run Demo: TagBox - Column Cell Display Template

Implements

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