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

ITreeListCommandColumn Interface

An interface that defines a TreeList command column‘s API members (properties and methods).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public interface ITreeListCommandColumn :
    ITreeListColumn

#Remarks

Use the ITreeListCommandColumn interface when you access a TreeList command column’s API members as follows:

  • You use the @ref attribute to reference a TreeList command column.
  • You access a CommandColumn object from templates or event handlers.
  • You access elements of the TreeList column collection (for instance, the collection that the GetColumns() method returns).

In other cases, bind your data to column parameters.

Note

To change values of a TreeList command column’s parameters outside the component’s markup, enclose your code between BeginUpdate() and EndUpdate() method calls. Otherwise, an exception occurs.

The following code snippet displays a button that changes the command column’s visibility:

@inject EmployeeTaskService EmployeeTaskService

<style>
    .my-button {
        width: 300px;
    }
</style>

<DxTreeList @ref="MyTreeList"
            Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            EditModelSaving="TreeList_EditModelSaving"
            DataItemDeleting="TreeList_DataItemDeleting"
            CustomizeEditModel="TreeList_CustomizeEditModel">
    <Columns>
        <DxTreeListCommandColumn @ref="CommandColumn" Width="200px" />
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>

<DxButton Text="Show/Hide the Command Column" Click="OnButtonClick" CssClass="my-button" />

@code {
    ITreeList MyTreeList { get; set; }
    ITreeListCommandColumn CommandColumn { get; set; }
    List<EmployeeTask> TreeListData { get; set; }

    void OnButtonClick() {
        MyTreeList.BeginUpdate();
        CommandColumn.Visible = !CommandColumn.Visible;
        MyTreeList.EndUpdate();
    }
    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
    void TreeList_CustomizeEditModel(TreeListCustomizeEditModelEventArgs e) {
        if(e.IsNew) {
            var newTask = (EmployeeTask)e.EditModel;
            newTask.Id = TreeListData.Max(x => x.Id) + 1;
            if(e.ParentDataItem != null)
                newTask.ParentId = ((EmployeeTask)e.ParentDataItem).Id;
        }
    }
    async Task TreeList_EditModelSaving(TreeListEditModelSavingEventArgs e) {
        if(e.IsNew)
            TreeListData.Add((EmployeeTask)e.EditModel);
        else
            e.CopyChangesToDataItem();
    }
    async Task TreeList_DataItemDeleting(TreeListDataItemDeletingEventArgs e) {
        TreeListData.Remove((EmployeeTask)e.DataItem);
    }
}

See Also