Skip to main content

DxGridColumn.Visible Property

Specifies whether the grid column is visible.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

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

Property Value

Type Default Description
Boolean

true

true if the column is visible; otherwise, false.

Remarks

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

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" />
        <DxGridDataColumn FieldName="TemperatureF" Visible="false" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}

Users can employ 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 code below demonstrates this case.

@inject WeatherForecastService ForecastService

<DxButton Text="Column Chooser"
          RenderStyle="ButtonRenderStyle.Secondary"
          CssClass="column-chooser-button"
          Click="OnClick" />

<p />   

<DxGrid Data="@Data" @ref="Grid">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Width="150px" />
        <DxGridDataColumn FieldName="TemperatureF" Width="150px" @bind-Visible=Visible />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

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

@code {
    DxGrid Grid { get; set; }
    bool Visible { get; set; } = false;
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }

    void OnClick() {
        Grid.ShowColumnChooser(".column-chooser-button");
    }
}

Visible Changed

Implements

See Also