Skip to main content
All docs
V25.1
  • DxTreeListBandColumn Class

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

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.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:

    Multi-level headers

    <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:

    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%:

    Band Widths

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

    Inheritance

    Object
    ComponentBase
    DevExpress.Blazor.Internal.BranchedRenderComponent
    DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
    DevExpress.Blazor.Internal.GridColumnBase
    DxTreeListColumn
    DxTreeListBandColumn
    See Also