DxListBox<TData, TValue>.ColumnCellDisplayTemplate Property

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

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[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
Model
Data
CSS

razor

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

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

csharp

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;
}

csharp

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)
        ];
}

css

.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}

Run Demo: List Box - Cell Display Template

YouTube video

Implements

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