Skip to main content

DxGridColumn.Visible Property

Specifies whether the grid column is visible.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

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();
    }
}

Watch Video: Grid - Column Types, Column Resize and Visibility

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 following code snippet 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

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

In the following example, the breakpoint is activated when the screen is extra small. The Grid component hides its Contact Title and City columns:

<DxLayoutBreakpoint DeviceSize="DeviceSize.XSmall" @bind-IsActive="@isXSmallScreen" />

<div class="h-100 grid-wrapper">
    @inject NwindDataService NwindDataService

    @if (isXSmallScreen) {
        <div class="fab-container">
            <DxButton RenderStyle="ButtonRenderStyle.Primary"
                      IconCssClass="grid-icon-column-chooser"
                CssClass="fab"
                aria-label="Column Chooser"
                Click="@ShowColumnChooser" />
        </div>
    } else {
        <div class="align-self-start p-2">
            <DxButton Text="Column Chooser"
                RenderStyle="ButtonRenderStyle.Secondary"
                IconCssClass="grid-icon-column-chooser"
                Click="@ShowColumnChooser" />
        </div>
    }
    <DxGrid @ref="@Grid" CssClass="flexGrid" Data="@Data" VirtualScrollingEnabled="true">
            <Columns>
                <DxGridDataColumn FieldName="ContactName" MinWidth="80" />
                <DxGridDataColumn FieldName="ContactTitle" MinWidth="100" Visible="@GetExtraColumnsVisible()" />
                <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
                <DxGridDataColumn FieldName="City" Width="15%" MinWidth="80" Visible="@GetExtraColumnsVisible()" />
                <DxGridDataColumn FieldName="Country" Width="10%" MinWidth="80" />
            </Columns>
    </DxGrid>
    @* ... *@
@code {
    bool isXSmallScreen;
    IGrid Grid { get; set; }
    IEnumerable<Supplier> Data { get; set; }

    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetSuppliersAsync();
    }

    void ShowColumnChooser() {
        Grid.ShowColumnChooser(new DialogDisplayOptions($".flexGrid", HorizontalAlignment.Center, VerticalAlignment.Center));
    }
    bool GetExtraColumnsVisible() { return !isXSmallScreen; }
}

Responsive Grid

Run Demo: Responsive Grid

Implements

See Also