Skip to main content
A newer version of this page is available. .

DxGrid.GetVisibleColumns() Method

Returns a collection of visible columns sorted based on their display order.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public IReadOnlyList<IGridColumn> GetVisibleColumns()

Returns

Type Description
IReadOnlyList<IGridColumn>

The column collection.

Remarks

The Grid layout can include multiple zones with columns. The display order of zones is as follows:

  1. Columns fixed to the left edge.
  2. Regular columns.
  3. Columns fixed to the right edge.

In a zone, the Grid displays columns based on their visible indexes in the following order:

  1. Columns with non-negative visible indexes. The smaller the index, the more to the left the Grid displays the column.

  2. Columns with unset and negative visible indexes. The display order of these columns corresponds to the column order in the grid markup.

Grouped columns are invisible unless you set the Grid’s ShowGroupedColumns property to true.

Call the Grid’s GetVisibleColumns method to get a collection of visible columns sorted based on their display order. To get a collection of all grid columns, call the GetColumns() method.

The example below shows the difference between the results of the GetColumns and GetVisibleColumns methods.

@using Grid.Data
@inject WeatherForecastService ForecastService

<DxGrid Data="@Data" @ref="@MyGrid"
        ShowFilterRow="true"
        @bind-SelectedDataItems="@SelectedDataItems">
    <Columns>
        <DxGridSelectionColumn VisibleIndex="1"/>
        <DxGridCommandColumn NewButtonVisible="false" EditButtonVisible="false"
                             DeleteButtonVisible="false" VisibleIndex="0" />
        <DxGridDataColumn FieldName="TemperatureC" VisibleIndex="3" />
        <DxGridDataColumn FieldName="TemperatureF" VisibleIndex="4" />
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" VisibleIndex="2" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

<DxButton Click="@OnGetColumns">Get Columns</DxButton>
<DxButton Click="@OnGetVisibleColumns">Get Visible Columns</DxButton>

<p/>
<div><b>Columns</b>: @ColumnInfo</div>
<div><b>Visible Columns</b>: @VisibleColumnInfo</div>

@code {
    IGrid MyGrid { get; set; }
    object Data { get; set; }
    string ColumnInfo { get; set; }
    string VisibleColumnInfo { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }

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

    void OnGetColumns() {
        ColumnInfo = GetColumnInfo(MyGrid.GetColumns());
    }

    void OnGetVisibleColumns() {
        VisibleColumnInfo = GetColumnInfo(MyGrid.GetVisibleColumns());
    }

    string GetColumnInfo(IEnumerable<IGridColumn> columns) {
        var columnInfo = columns.Select((column, index) => (1 + index) + " - " + column switch
        {
            IGridDataColumn dataColumn => dataColumn.FieldName,
            IGridSelectionColumn => "Selection Column",
            IGridCommandColumn => "Command Column",
            _ => null
        });
        return string.Join("; ", columnInfo);
    }
}

Blazor Grid Get Columns

Implements

See Also