Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTreeList.ToolbarTemplate Property

Specifies a template for a toolbar area.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Property Value

Type Description
RenderFragment<TreeListToolbarTemplateContext>

The toolbar template.

#Remarks

The ToolbarTemplate property allows you to add a toolbar at the top edge of a TreeList component. The template context object (TreeListToolbarTemplateContext) allows you to access Blazor TreeList’s API and implement command execution (TreeList).

Blazor TreeList with Toolbar

Run Demo: Auto Fit

The following code snippet implements commands for changing column settings (width, visibility, and order):

@inject EmployeeTaskService EmployeeTaskService

<DxTreeList @ref="TreeList" Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
    <ToolbarTemplate>
        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Contained">
            <Items>
                <DxToolbarItem Alignment="ToolbarItemAlignment.Left" Text="Auto Fit Columns" Click="TreeList_FitWidths" RenderStyle="ButtonRenderStyle.Secondary" />
                <DxToolbarItem Alignment="ToolbarItemAlignment.Right" Text="Column Chooser" Click="ColumnChooserButton_Click" RenderStyle="ButtonRenderStyle.Secondary" />
            </Items>
        </DxToolbar>
    </ToolbarTemplate>
</DxTreeList>

@code {
    ITreeList TreeList { get; set; }
    List<EmployeeTask> TreeListData { get; set; }

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
    void TreeList_FitWidths() {
        TreeList.AutoFitColumnWidths();
    }
    void ColumnChooserButton_Click() {
        TreeList.ShowColumnChooser();
    }
}

#Implements

See Also