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

DxListBox<TData, TValue>.ColumnCellDisplayTemplate Property

Specifies a template used to display column cells in the List Box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment<ListBoxColumnCellDisplayTemplateContext<TData>> ColumnCellDisplayTemplate { get; set; }

#Property Value

Type Description
RenderFragment<ListBoxColumnCellDisplayTemplateContext<TData>>

The template for column cells.

#Remarks

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

The following code snippet customizes the appearance of different columns.

@inject NwindDataService NwindDataService

<DxListBox TData="Product" TValue="Product" Data="@Data"
            @bind-Values="@SelectedProducts"
            SelectionMode="ListBoxSelectionMode.Multiple">
    <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>
        @{
            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;
            }
        }
        <div class="@cssClass">@displayValue</div>
    </ColumnCellDisplayTemplate>
</DxListBox>

@code {
    IEnumerable<Product> Data { get; set; }
    IEnumerable<Product> SelectedProducts { get; set; }
    int totalPriceCeiling = 100;
    string alignRightCssClass = "align-right";
    string textGreenCssClass = "text-green";
    string textRedCssClass = "text-red";
    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        var products = await NwindDataService.GetProductsAsync();
        Data = 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 = Data.Skip(1).Take(3);
    }
    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);
        }
    }
}

ListBox - Column Cell Display Template

Run Demo: List Box - Column Cell Display Template

#Implements

DevExpress.Blazor.IListBox<TData, TValue>.ColumnCellDisplayTemplate
See Also