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

DxTreeListColumn.Visible Property

Specifies whether the column is visible.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(true)]
[Parameter]
public bool Visible { get; set; }

#Property Value

Type Default Description
Boolean true

true to display the column; otherwise, false.

#Remarks

Use the Visible property to show or hide the column in the TreeList.

@inject EmployeeTaskService EmployeeTaskService

<DxTreeList Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" Visible="false" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>

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

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
}

Users can utilize the Column Chooser to change column visibility. When a user enables or disables a checkbox next to a column title in the Chooser, the value of the column’s Visible property changes as well. The following code snippet demonstrates this case:

@inject EmployeeTaskService EmployeeTaskService
<style>
    .column-chooser-button{
        width: 200px;
    }
</style>
<DxButton Text="Column Chooser"
          RenderStyle="ButtonRenderStyle.Secondary"
          CssClass="column-chooser-button"
          Click="OnClick" />
<p />
<DxTreeList @ref="TreeList" Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" @bind-Visible="Visible" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>

<p>The TemperartureF column's <b>Visible</b> property value is <b>@Visible</b></p>

@code {
    DxTreeList TreeList { get; set; }
    bool Visible { get; set; } = false;
    List<EmployeeTask> TreeListData { get; set; }

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
    void OnClick() {
        TreeList.ShowColumnChooser(".column-chooser-button");
    }
}

You can also use the DxLayoutBreakpoint component to implement responsiveness and show/hide columns conditionally.

#Implements

See Also