Column Layout Specifics in Blazor TreeList

• Sep 09, 2024
• 9 minutes to read

The column layout in the TreeList depends on the component’s total width, column widths, borders, and cell spacing. The following code snippets demonstrate how the component is rendered in different scenarios:

All Column Widths Are Unspecified

If you do not specify column widths, the TreeList component renders columns with equal widths (but not less than the MinWidth value) and wraps content if needed. If a column’s MinWidth value is greater than the calculated column width, the TreeList applies the specified minimum width to this column and splits the remaining space between the rest of the columns.

In the following example, all column widths are 700 px / 4 = 175 px, which is greater than the default MinWidth value (50 px):

Razor

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<style>
    .my-class {
        width: 700px;
    }
</style>

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" CssClass="my-class">
    <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"/>
    </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 double MeanRadiusInKM { 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,
        double meanRadiusInKM,
        double volume10pow9KM3,
        double mass10pow21kg,
        double density,
        double surfaceGravity,
        string typeOfObject,
        List<SpaceObject> satellites = null
    ) {
        Name = name;
        MeanRadiusInKM = meanRadiusInKM;
        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", 696000, 1412000000, 1989100000, 1.409, 274.0, "Star", new List<SpaceObject>() {
                new SpaceObject("Mercury", 2439.7, 60.83, 330.2, 5.43, 3.7, "Planet"),
                new SpaceObject("Venus", 6051.8, 928.43, 4868.5, 5.24, 8.872, "Planet"),
                new SpaceObject("Earth", 6371.0, 1083.21, 5973.6, 5.515, 9.78033, "Planet", new List<SpaceObject> () {
                    new SpaceObject("Moon", 1737.1, 21.958, 73.5, 3.3464, 1.625, "Satellite")
                }),
                new SpaceObject("Mars", 3390.0, 163.18, 641.85, 3.94, 3.7, "Planet"),
                new SpaceObject("Jupiter", 69911, 1431280, 1898600, 1.33, 24.79, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Ganymede", 2631.2, 76.30, 148.2, 1.936, 1.428, "Satellite"),
                    new SpaceObject("Callisto", 2410.3, 58.65, 107.6, 1.83, 1.23603, "Satellite"),
                    new SpaceObject("Io", 1821.5, 25.32, 89.3, 3.528, 1.797, "Satellite"),
                    new SpaceObject("Europa", 1561, 15.93, 48, 3.01, 1.316, "Satellite"),
                }),
                new SpaceObject("Saturn", 58232, 827130, 568460, 0.70, 10.445, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Titan", 2576, 71.52, 134.5, 1.88, 1.354, "Satellite"),
                    new SpaceObject("Rhea", 764.4, 1.87, 2.3166, 1.23, 0.26, "Satellite"),
                    new SpaceObject("Iapetus", 736, 1.55, 1.9739, 1.08, 0.223, "Satellite"),
                    new SpaceObject("Dione", 561.6, 0.73, 1.096, 1.48, 0.232, "Satellite"),
                    new SpaceObject("Tethys", 533, 0.624, 0.6173, 1.15, 0.145, "Satellite"),
                    new SpaceObject("Enceladus", 252.1, 0.067, 0.108, 1.61, 0.111, "Satellite"),
                    new SpaceObject("Mimas", 198.3, 0.033, 0.03749, 1.15, 0.06363, "Satellite")
                }),
                new SpaceObject("Uranus", 25362, 68340, 86832, 1.30, 8.87, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Titania", 788.9, 2.06, 3.526, 1.72, 0.378, "Satellite"),
                    new SpaceObject("Oberon", 761.4, 1.85, 3.014, 1.63, 0.347, "Satellite"),
                    new SpaceObject("Umbriel", 584.7, 0.84, 1.2, 1.4, 0.234, "Satellite"),
                    new SpaceObject("Ariel", 578.9, 0.81, 1.35, 1.67, 0.269, "Satellite"),
                    new SpaceObject("Miranda", 235.8, 0.055, 0.0659, 1.20, 0.07910375, "Satellite"),
                }),
                new SpaceObject("Neptune", 24622, 62540, 102430, 1.76, 11.15, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Triton", 1353.4, 10.38, 21.5, 2.061, 0.782, "Satellite"),
                    new SpaceObject("Proteus", 210, 0.038, 0.050, 1.3, 0.0666, "Satellite"),
                }),
                new SpaceObject("Eris", 1170, 7, 16.7, 2.25, 0.662, "Dwarf planet"),
                new SpaceObject("Pluto", 1153, 7.15, 13.105, 2.0, 0.61, "Dwarf planet"),
                new SpaceObject("Makemake", 710, 1.8, 3, 2.0, 0.4,  "Dwarf planet"),
                new SpaceObject("Haumea", 575, 1.3, 4.006, 3, 0.44, "Dwarf planet"),
                new SpaceObject("Ceres", 475, 0.437, 0.95, 2.08, 0.27, "Dwarf planet"),
                new SpaceObject("Pallas", 266, 0.078, 0.211, 2.8, 0.2, "Asteroid"),
                new SpaceObject("Vesta", 264.6, 0.078, 0.262, 3.42, 0.251, "Asteroid")
            })
        };
    }
}

Program.cs

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

Several Column Widths Are Unspecified

If the TreeList component contains both columns with unspecified and specified widths, the web browser applies specified column widths first. Columns without specified widths occupy the remaining width in equal shares (but not less than the MinWidth value).

In the following code snippet, the web browser applies Name and Type column widths first. The remaining 700 px - 225 px - 125 px = 350 px are divided between Mass and Radius columns equally (350 px / 2 = 175 px).

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<style>
    .my-class {
        width: 700px;
    }
</style>

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" CssClass="my-class">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="225" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="125" />
        <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"/>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

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

Column Widths Are Specified in Different Units

The TreeList component can contain columns whose widths are specified in absolute units, while other column widths are specified in percentages. In this case, the web browser applies column widths specified in absolute units first. Then the TreeList component calculates remaining column widths as specified percentages of the TreeList’s total width (but not less than the MinWidth value).

In the following code snippet, the web browser applies Name and Type column widths first (225 px and 125 px). Then the component calculates remaining column widths (700 px * 0.25 = 175 px).

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<style>
    .my-class {
        width: 700px;
    }
</style>

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" CssClass="my-class">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="225" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="125" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2" Width="25%">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" Width="25%"/>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

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

After calculations, if the total column width is less than the TreeList’s width, an empty space remains to the right. If the total column width exceeds the TreeList’s width, the TreeList recalculates column widths specified in percentages relative to the remaining space as follows: SpecifiedColumnWidthInPercentages / SumOfAllPercentages * TreeListRemainingWidthInPixels.

In the following example, the sum of all column widths in percentages is 100%. The TreeList calculates column widths relative to this value. For instance, the Mass column’s width is 25% / 100% * (700 px - 120 px) = 145 px.

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<style>
    .my-class {
        width: 700px;
    }
</style>

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" CssClass="my-class">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="50%" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="120" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2" Width="25%">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" Width="25%"/>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

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

A column’s width cannot be less than the MinWidth property value. Set this property to 0 for a column whose width is specified in percentages to collapse this column when there is not enough space to display it.

The Total Column Width in Pixels Exceeds the TreeList’s Width

The default width of the TreeList component is 100% of its container width. You can assign a CSS class to the component to change its width value. The component displays the horizontal scrollbar if the sum of all column widths in pixels (considering the MinWidth value) is greater than the TreeList’s total width.

In the following example, the sum of column widths is 750 px, which is greater than the TreeList’s total width of 700 px:

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<style>
    .my-class {
        width: 700px;
    }
</style>

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" CssClass="my-class">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="300" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="200" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2" Width="200">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        @* The following column's width equals MinWidth (50px) *@
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" />
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

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

If you clear the TreeList’s width attribute value (for example, set it to unset), the component fills the container to display all columns:

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<style>
    .my-class {
        width: unset;
    }
</style>

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" CssClass="my-class">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="300" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="200" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2" Width="200">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        @* The following column's width is based on the container's width but not less than the MinWidth *@
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" />
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

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

The Total Column Width in Pixels is Less Than the TreeList’s Width

If the sum of all specified column widths is less than the TreeList’s width, an empty space remains to the right. In the following example, the sum of column widths is 650px, which is less than the TreeList’s total width of 950px:

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<style>
    .my-class {
        width: 950px;
    }
</style>

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" CssClass="my-class">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="200" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="150" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2" Width="150">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" Width="150"/>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

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

The Total Column Width in Percentages Exceeds 100%

If the sum of all relative widths is greater than 100%, the component reduces these values proportionally so that the sum of percentages equals 100%.

In the following example, the sum of all column widths is 150%. The TreeList component reduces column widths relative to this value. For instance, the Name column’s width is 60% of the 150%, but it would be 40% of the TreeList’s total width.

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="60%" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="30%" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2" Width="30%">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" Width="30%"/>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

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

The Total Column Width in Percentages is Less Than 100%

If the sum of all column widths in percentages is less than 100%, an empty space remains to the right. The following example sets the total column width to 85%:

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="40%" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="15%" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2" Width="15%">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" Width="15%"/>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

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