DxListBox<TData, TValue>.ColumnCellDisplayTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

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

Remarks

The ColumnCellDisplayTemplate property allows you to customize the appearance of every cell in the List Box control. The template accepts a ListBoxColumnCellDisplayTemplateContext 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 customizes the appearance of every cell in a List Box control.

Razor

<DxListBox Data="Accounting.Profits"
           @bind-Value="AnnualProfit">
    <Columns>
        <DxListEditorColumn FieldName="Year">
            <CellDisplayTemplate>
                <div style="text-align: left;">
                    @context.Value
                </div>
            </CellDisplayTemplate>
        </DxListEditorColumn>
        <DxListEditorColumn FieldName="Q1" />
        <DxListEditorColumn FieldName="Q2" />
        <DxListEditorColumn FieldName="Q3" />
        <DxListEditorColumn FieldName="Q4" />
        <DxListEditorColumn FieldName="Total" />
    </Columns>
    <ColumnCellDisplayTemplate>
        <div style="text-align: right;">
            @($"{context.Value:C}")
        </div>
    </ColumnCellDisplayTemplate>
</DxListBox>

@code {
    Profit AnnualProfit { get; set; }
}

Model

public class Profit(int year, int q1, int q2, int q3, int q4, int total)
{
    public int Year { get; set; } = year;
    public int Q1 { get; set; } = q1;
    public int Q2 { get; set; } = q2;
    public int Q3 { get; set; } = q3;
    public int Q4 { get; set; } = q4;
    public int Total { get; set; } = total;
}

Data

public static class Accounting
{
    public static List<Profit> Profits { get; } = [
        new Profit(2020, 100, 200, 300, 400, 1000),
        new Profit(2021, 150, 250, 350, 450, 1200),
        new Profit(2022, 200, 300, 400, 500, 1400),
        new Profit(2023, 250, 350, 450, 550, 1600),
        new Profit(2024, 300, 400, 500, 600, 1800)
        ];
}

Run Demo: List Box - Cell Display Template

Implements

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