Skip to main content
All docs
V25.1
  • DxTreeListColumn.Visible Property

    Specifies whether the column is visible.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [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");
        }
    }
    

    Visible Changed

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

    Implements

    See Also