DxTreeListDataColumn.CellDisplayTemplate Property

Specifies a template used to display column cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<TreeListDataColumnCellDisplayTemplateContext> CellDisplayTemplate { get; set; }

Property Value

Type	Description
RenderFragment<TreeListDataColumnCellDisplayTemplateContext>	The column cell template.

Remarks

The CellDisplayTemplate property allows you to specify custom content and change the appearance of cells in individual columns. To define a common template for cells of all TreeList columns, use the DxTreeList.DataColumnCellDisplayTemplate.

The CellDisplayTemplate property accepts a TreeListDataColumnCellDisplayTemplateContext object as the context parameter. You can use the parameter’s members to get information about a column cell (DataColumn, Value, DisplayText, VisibleIndex). You can also access the TreeList object and use its members to obtain additional information about the TreeList.

The following code snippet displays links to Wikipedia pages:

Razor

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" />
        <DxTreeListDataColumn FieldName="Volume10pow9KM3" DisplayFormat="N2">
            <HeaderCaptionTemplate>Volume, 10<sup>9</sup> &#215; km<sup>3</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="SurfaceGravity" DisplayFormat="N2">
            <HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="WikiPage" AllowSort="false" Width="90px">
            <CellDisplayTemplate><a href="@context.Value">Open Wikipedia</a></CellDisplayTemplate>
        </DxTreeListDataColumn>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

    protected override async Task OnInitializedAsync() {
        TreeListData = SpaceObjectDataProvider.GenerateData();
    }
}

SpaceObject

using System.Collections.Generic;

public class SpaceObject {
    public string Name { get; set; }
    public string WikiPage { get; set; }
    public double MeanRadiusInKM { get; set; }
    public double MeanRadiusByEarth { get; set; }
    public double Volume10pow9KM3 { get; set; }
    public double Mass10pow21kg { get; set; }
    public double Density { get; set; }
    public double SurfaceGravity { get; set; }
    public string TypeOfObject { get; set; }
    public List<SpaceObject> Satellites { get; set; }
    public SpaceObject(
        string name,
        string wikiPage,
        double meanRadiusInKM,
        double meanRadiusByEarth,
        double volume10pow9KM3,
        double mass10pow21kg,
        double density,
        double surfaceGravity,
        string typeOfObject,
        List<SpaceObject> satellites = null
    )
    {
        Name = name;
        WikiPage = wikiPage;
        MeanRadiusInKM = meanRadiusInKM;
        MeanRadiusByEarth = meanRadiusByEarth;
        Volume10pow9KM3 = volume10pow9KM3;
        Mass10pow21kg = mass10pow21kg;
        Density = density;
        SurfaceGravity = surfaceGravity;
        TypeOfObject = typeOfObject;
        Satellites = satellites ?? new List<SpaceObject>();
    }
}

SpaceObjectDataProvider

public class SpaceObjectDataProvider {
    public List<SpaceObject> GenerateData() {
        return new List<SpaceObject>() {
            new SpaceObject("Sun", "https://en.wikipedia.org/wiki/Sun", 696000, 109.25, 1412000000, 1989100000, 1.409, 274.0, "Star", new List<SpaceObject>() {
                new SpaceObject("Mercury", "https://en.wikipedia.org/wiki/Mercury_(planet)", 2439.7, 0.383, 60.83, 330.2, 5.43, 3.7, "Planet"),
                new SpaceObject("Venus", "https://en.wikipedia.org/wiki/Venus", 6051.8, 0.950, 928.43, 4868.5, 5.24, 8.872, "Planet"),
                new SpaceObject("Earth", "https://en.wikipedia.org/wiki/Earth", 6371.0, 1, 1083.21, 5973.6, 5.515, 9.78033, "Planet", new List<SpaceObject> () {
                    new SpaceObject("Moon", "https://en.wikipedia.org/wiki/Moon", 1737.1, 0.273, 21.958, 73.5, 3.3464, 1.625, "Satellite")
                }),
                new SpaceObject("Mars", "https://en.wikipedia.org/wiki/Mars", 3390.0, 0.532, 163.18, 641.85, 3.94, 3.7, "Planet"),
                new SpaceObject("Jupiter", "https://en.wikipedia.org/wiki/Jupiter", 69911, 10.97, 1431280, 1898600, 1.33, 24.79, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Ganymede", "https://en.wikipedia.org/wiki/Ganymede_(moon)", 2631.2, 0.413, 76.30, 148.2, 1.936, 1.428, "Satellite"),
                    new SpaceObject("Callisto", "https://en.wikipedia.org/wiki/Callisto_(moon)", 2410.3, 0.378, 58.65, 107.6, 1.83, 1.23603, "Satellite"),
                    new SpaceObject("Io", "https://en.wikipedia.org/wiki/Io_(moon)", 1821.5, 0.286, 25.32, 89.3, 3.528, 1.797, "Satellite"),
                    new SpaceObject("Europa", "https://en.wikipedia.org/wiki/Europa_(moon)", 1561, 0.245, 15.93, 48, 3.01, 1.316, "Satellite"),
                }),
                new SpaceObject("Saturn", "https://en.wikipedia.org/wiki/Saturn", 58232, 9.14, 827130, 568460, 0.70, 10.445, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Titan", "https://en.wikipedia.org/wiki/Titan_(moon)", 2576, 0.404, 71.52, 134.5, 1.88, 1.354, "Satellite"),
                    new SpaceObject("Rhea", "https://en.wikipedia.org/wiki/Rhea_(moon)", 764.4, 0.12, 1.87, 2.3166, 1.23, 0.26, "Satellite"),
                    new SpaceObject("Iapetus", "https://en.wikipedia.org/wiki/Iapetus_(moon)", 736, 0.113, 1.55, 1.9739, 1.08, 0.223, "Satellite"),
                    new SpaceObject("Dione", "https://en.wikipedia.org/wiki/Dione_(moon)", 561.6, 0.088, 0.73, 1.096, 1.48, 0.232, "Satellite"),
                    new SpaceObject("Tethys", "https://en.wikipedia.org/wiki/Tethys_(moon)", 533, 0.083, 0.624, 0.6173, 1.15, 0.145, "Satellite"),
                    new SpaceObject("Enceladus", "https://en.wikipedia.org/wiki/Enceladus_(moon)", 252.1, 0.039, 0.067, 0.108, 1.61, 0.111, "Satellite"),
                    new SpaceObject("Mimas", "https://en.wikipedia.org/wiki/Mimas_(moon)", 198.3, 0.031, 0.033, 0.03749, 1.15, 0.06363, "Satellite")
                }),
                new SpaceObject("Uranus", "https://en.wikipedia.org/wiki/Uranus", 25362, 3.98, 68340, 86832, 1.30, 8.87, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Titania", "https://en.wikipedia.org/wiki/Titania_(moon)", 788.9, 0.124, 2.06, 3.526, 1.72, 0.378, "Satellite"),
                    new SpaceObject("Oberon", "https://en.wikipedia.org/wiki/Oberon_(moon)", 761.4, 0.12, 1.85, 3.014, 1.63, 0.347, "Satellite"),
                    new SpaceObject("Umbriel", "https://en.wikipedia.org/wiki/Umbriel_(moon)", 584.7, 0.092, 0.84, 1.2, 1.4, 0.234, "Satellite"),
                    new SpaceObject("Ariel", "https://en.wikipedia.org/wiki/Ariel_(moon)", 578.9, 0.091, 0.81, 1.35, 1.67, 0.269, "Satellite"),
                    new SpaceObject("Miranda", "https://en.wikipedia.org/wiki/Miranda_(moon)", 235.8, 0.037, 0.055, 0.0659, 1.20, 0.07910375, "Satellite"),
                }),
                new SpaceObject("Neptune", "https://en.wikipedia.org/wiki/Neptune", 24622, 3.87, 62540, 102430, 1.76, 11.15, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Triton", "https://en.wikipedia.org/wiki/Triton_(moon)", 1353.4, 0.212, 10.38, 21.5, 2.061, 0.782, "Satellite"),
                    new SpaceObject("Proteus", "https://en.wikipedia.org/wiki/Proteus_(moon)", 210, 0.033, 0.038, 0.050, 1.3, 0.0666, "Satellite"),
                }),
                new SpaceObject("Eris", "https://en.wikipedia.org/wiki/Eris_(dwarf_planet)", 1170, 0.182, 7, 16.7, 2.25, 0.662, "Dwarf planet"),
                new SpaceObject("Pluto", "https://en.wikipedia.org/wiki/Pluto", 1153, 0.181, 7.15, 13.105, 2.0, 0.61, "Dwarf planet"),
                new SpaceObject("Makemake", "https://en.wikipedia.org/wiki/Makemake_(dwarf_planet)", 710, 0.126, 1.8, 3, 2.0, 0.4,  "Dwarf planet"),
                new SpaceObject("Haumea", "https://en.wikipedia.org/wiki/Haumea_(dwarf_planet)", 575, 0.117, 1.3, 4.006, 3, 0.44, "Dwarf planet"),
                new SpaceObject("Ceres", "https://en.wikipedia.org/wiki/Ceres_(dwarf_planet)", 475, 0.076, 0.437, 0.95, 2.08, 0.27, "Dwarf planet"),
                new SpaceObject("Pallas", "https://en.wikipedia.org/wiki/2_Pallas", 266, 0.0042, 0.078, 0.211, 2.8, 0.2, "Asteroid"),
                new SpaceObject("Vesta", "https://en.wikipedia.org/wiki/4_Vesta", 264.6, 0.0042, 0.078, 0.262, 3.42, 0.251, "Asteroid")
            })
        };
    }
}

Program.cs

// ...
builder.Services.AddSingleton<SpaceObjectDataProvider>();

For more information about templates in the TreeList component, refer to the following topic: Templates in Blazor TreeList.

Implements

CellDisplayTemplate