DxListEditorColumn.CellDisplayTemplate Property

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public RenderFragment<ListBoxColumnCellDisplayTemplateContext> CellDisplayTemplate { get; set; }

Property Value

Remarks

The CellDisplayTemplate property customizes cell appearance within the column. Specify a custom template to format data, apply styles, or add HTML markup.

This property works with the following DevExpress Blazor components:

• ComboBox
• ListBox
• TagBox

The CellDisplayTemplate property accepts a ListBoxColumnCellDisplayTemplateContext object as the context parameter. Use parameter properties to access the following data:

• The associated data item.
• The parent column.
• Additional information about the cell.

<DxListBox Data="Subscriptions.Plans"
           @bind-Value="SelectedPlan">
    <Columns>
        <DxListEditorColumn FieldName="Name" Caption="Name" />
        <DxListEditorColumn FieldName="PriceMonth" Caption="Price" Width="100px">
            <CellDisplayTemplate>
                <div style="text-align: right;">
                    CHF @($"{context.Value:F2}")
                </div>
            </CellDisplayTemplate>
        </DxListEditorColumn>
    </Columns>
</DxListBox>

@code {
    SubscriptionPlan SelectedPlan { get; set; }
}

public class SubscriptionPlan(
    int id,
    string name,
    int priceMonth,
    int priceQuarter,
    int priceYear
    )
{
    public int Id { get; set; } = id;
    public string Name { get; set; } = name;
    public int PriceMonth { get; set; } = priceMonth;
    public int PriceQuarter { get; set; } = priceQuarter;
    public int PriceYear { get; set; } = priceYear;
}

public static class Subscriptions
{
    public static List<SubscriptionPlan> Plans { get; } = [
        new SubscriptionPlan(1, "Basic", 10, 25, 90),
        new SubscriptionPlan(2, "Standard", 20, 50, 180),
        new SubscriptionPlan(3, "Premium", 30, 75, 270),
        new SubscriptionPlan(4, "Enterprise", 50, 125, 450)
        ];
}

Combine Cell Templates

The CellDisplayTemplate property can be used alongside the ColumnCellDisplayTemplate property. If you define both templates, the column-specific CellDisplayTemplate has precedence over the global ColumnCellDisplayTemplate for cells within that particular column.

This functionality allows you to set a common template for all columns and then override it for individual columns that require different formatting.

<DxListBox Data="Subscriptions.Plans"
           @bind-Value="SelectedPlan">
    <Columns>
        <DxListEditorColumn FieldName="Name" Caption="Name">
            <CellDisplayTemplate>
                <div style="text-align: left;">
                    <b>@context.Value</b>
                </div>
            </CellDisplayTemplate>
        </DxListEditorColumn>
        <DxListEditorColumn FieldName="PriceMonth" Caption="Month" Width="70px" />
        <DxListEditorColumn FieldName="PriceQuarter" Caption="Quarter" Width="70px" />
        <DxListEditorColumn FieldName="PriceYear" Caption="Year" Width="70px" />
    </Columns>
    <ColumnCellDisplayTemplate>
        <div style="text-align: right;">
            @($"{context.Value:C}")
        </div>
    </ColumnCellDisplayTemplate>
</DxListBox>

Access Data Item

Use the context.DataItem property to access the data item object associated with the cell. Once you obtain the data item, you can access all property values that may help you construct the template or calculate the final value.

<DxListBox Data="Subscriptions.Plans"
           @bind-Value="SelectedPlan">
    <Columns>
        <DxListEditorColumn FieldName="Name" Caption="Name">
            <CellDisplayTemplate>
                <a href="/plans?id=@(((SubscriptionPlan)context.DataItem).Id)" target="_blank">
                    @context.Value
                </a>
            </CellDisplayTemplate>
        </DxListEditorColumn>
        <DxListEditorColumn FieldName="PriceMonth" Caption="Price" Width="100px">
            <CellDisplayTemplate>
                @($"{context.Value:C}")
            </CellDisplayTemplate>
        </DxListEditorColumn>
    </Columns>
</DxListBox>

Search and Filter Specifics

Built-in search or data filter operations target the original data source. Any text or markup added by the CellDisplayTemplate property will not be matched.

<DxListBox Data="Subscriptions.Plans"
           @bind-Value="SelectedPlan"
           ShowSearchBox="true">
    <Columns>
        <DxListEditorColumn FieldName="Name" Caption="Name">
            <CellDisplayTemplate>
                @context.Value Subscription Plan
            </CellDisplayTemplate>
        </DxListEditorColumn>
        <DxListEditorColumn FieldName="PriceMonth" Caption="Price" Width="100px">
            <CellDisplayTemplate>
                @($"{context.Value:C}")
            </CellDisplayTemplate>
        </DxListEditorColumn>
    </Columns>
</DxListBox>