DxTreeListBandColumn Class

A band column that joins regular DxTreeList columns into a group with a common header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxTreeListBandColumn :
    DxTreeListColumn,
    ITreeListBandColumn,
    ITreeListColumn,
    IGridColumnsOwner,
    IGridBandColumn,
    IGridColumn,
    IParameterTrackerSettingsOwner

Remarks

The DevExpress Blazor TreeList can combine columns into logical groups called bands. Each band has its own header. Users can move columns within a band but cannot drag them outside of the band.

Read Tutorial: Columns in Blazor TreeList

The TreeList component supports endless nesting levels of bands. The following code snippet declares child columns for Sales and Year-Over-Year Comparison bands:

<DxTreeList Data="TreeListData" KeyFieldName="ID" ParentKeyFieldName="RegionID">
    <Columns>
        <DxTreeListBandColumn Caption="Sales">
            <Columns>
                <DxTreeListDataColumn FieldName="Region" />
                <DxTreeListDataColumn FieldName="MarchSales" Caption="March" DisplayFormat="c0" />
                <DxTreeListDataColumn FieldName="SeptemberSales" Caption="September" DisplayFormat="c0" />
            </Columns>
        </DxTreeListBandColumn>
        <DxTreeListBandColumn Caption="Year-Over-Year Comparison">
            <Columns>
                <DxTreeListDataColumn FieldName="MarchChange" Caption="March" DisplayFormat="p2" />
                <DxTreeListDataColumn FieldName="SeptemberChange" Caption="September" DisplayFormat="p2" />
            </Columns>
        </DxTreeListBandColumn>
        <DxTreeListDataColumn FieldName="MarketShare" DisplayFormat="p0" />
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }
    protected override void OnInitialized() {
        TreeListData = SalesByRegionDataProvider.GenerateData();
    }
}

Run Demo: TreeList - Header Bands

Empty Bands

The band is empty in the following cases:

• You do not specify nested columns in the markup.
• All nested columns become invisible.

The following properties are in effect only when the band is empty:

• FooterTemplate
• MinWidth
• TextAlignment
• Width

If you need to use these properties for a non-empty band, specify them on the nested column’s level. The following example specifies the FooterTemplate for a band and its nested columns:

<DxTreeList @ref="TreeList" Data="TreeListData" KeyFieldName="ID" ParentKeyFieldName="RegionID">
    <Columns>
        <DxTreeListBandColumn Caption="Sales">
            <Columns>
                <DxTreeListDataColumn FieldName="Region" />
                <DxTreeListDataColumn FieldName="MarchSales" Caption="March" DisplayFormat="c0" />
                <DxTreeListDataColumn FieldName="SeptemberSales" Caption="September" DisplayFormat="c0" />
            </Columns>
        </DxTreeListBandColumn>
        <DxTreeListBandColumn Caption="Year-Over-Year Comparison">
            <Columns>
                <DxTreeListDataColumn FieldName="MarchChange" Caption="March" DisplayFormat="p2" >
                    <FooterTemplate>
                        The March column's footer
                    </FooterTemplate>
                </DxTreeListDataColumn>
                <DxTreeListDataColumn FieldName="SeptemberChange" Caption="September" DisplayFormat="p2" >
                    <FooterTemplate>
                        The September column's footer
                    </FooterTemplate>
                </DxTreeListDataColumn>
            </Columns>
            <FooterTemplate>
                The band's footer
            </FooterTemplate>
        </DxTreeListBandColumn>
        <DxTreeListDataColumn FieldName="MarketShare" DisplayFormat="p0" />
    </Columns>
    <ToolbarTemplate>
        <DxToolbar>
            <DxToolbarItem Click="Grid_ShowColumnChooser" 
                           Text="Show Column Chooser"
                           Alignment="ToolbarItemAlignment.Right" />
        </DxToolbar>
    </ToolbarTemplate>
</DxTreeList>

@code {
    ITreeList TreeList { get; set; }
    object TreeListData { get; set; }
    protected override void OnInitialized() {
        TreeListData = SalesByRegionDataProvider.GenerateData();
    }
    void TreeList_ShowColumnChooser() {
        TreeList.ShowColumnChooser();
    }
}

Band Width

A band with nested columns ignores Width and MinWidth properties. The band width is the total of all nested column widths.

The following example sets the Width property of March and September columns in the Year-Over-Year Comparison band to 20%. As a result, the parent band width is 40%:

<style>
    .treelist {
        width: 950px;
    }
</style>
<DxTreeList Data="TreeListData" KeyFieldName="ID" ParentKeyFieldName="RegionID" CssClass="treelist">
    <Columns>
        <DxTreeListBandColumn Caption="Sales">
            <Columns>
                <DxTreeListDataColumn FieldName="Region" />
                <DxTreeListDataColumn FieldName="MarchSales" Caption="March" DisplayFormat="c0" />
                <DxTreeListDataColumn FieldName="SeptemberSales" Caption="September" DisplayFormat="c0" />
            </Columns>
        </DxTreeListBandColumn>
        <DxTreeListBandColumn Caption="Year-Over-Year Comparison">
            <Columns>
                <DxTreeListDataColumn FieldName="MarchChange" Caption="March" Width="20%" DisplayFormat="p2"/>
                <DxTreeListDataColumn FieldName="SeptemberChange" Caption="September" Width="20%" DisplayFormat="p2" />
            </Columns>
        </DxTreeListBandColumn>
        <DxTreeListDataColumn FieldName="MarketShare" DisplayFormat="p0" Width="100px"/>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }
    protected override void OnInitialized() {
        TreeListData = SalesByRegionDataProvider.GenerateData();
    }
}

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

ITreeListBandColumn

ITreeListColumn

IGridBandColumn

IGridColumn

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.BranchedRenderComponent

DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent

DevExpress.Blazor.Internal.GridColumnBase

DxTreeListColumn

DxTreeListBandColumn