DxGrid.ShowColumnChooser(String) Method

Shows the Column Chooser.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public void ShowColumnChooser(
    string positionTarget
)

Parameters

Name	Type	Description
positionTarget	String	Specifies the target UI element that invokes the Column Chooser.

Remarks

The Column Chooser displays a list of data, command, and selection columns in the grid.

The Column Chooser allows users do the following:

• Show or hide columns. To do this, a user should enable or disable corresponding checkboxes in the Chooser. This operation changes the column’s Visible property value.
• Reorder columns. To change a column’s position, a user should drag and drop the column with the drag icon in the Chooser. This operation changes the column’s VisibleIndex property value.

Use the ShowColumnChooser method to display the Column Chooser. The code below adds a DxButton that invokes the Column Chooser.

Razor

@inject WeatherForecastService ForecastService

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

<p />

<DxGrid Data="@Data" @ref="Grid">
    <Columns>
        <DxGridCommandColumn Caption="Command Column" Width="150px" />
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Width="150px" />
        <DxGridDataColumn FieldName="TemperatureF" Width="150px" Visible="false" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    DxGrid Grid { get; set; }
    object Data { get; set; }

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

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

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }
}

WeatherForecastService

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Threading.Tasks;

    public class WeatherForecastService {
        private List<WeatherForecast> Forecast { get; set; }

        private static string[] CloudCover = new[] {
            "Sunny", "Partly cloudy", "Cloudy", "Storm"
        };

        Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
            Tuple.Create( 22 , "Hot"),
            Tuple.Create( 13 , "Warm"),
            Tuple.Create( 0 , "Cold"),
            Tuple.Create( -10 , "Freezing")
        };

        public WeatherForecastService() {
            Forecast = CreateForecast();
        }

        private List<WeatherForecast> CreateForecast() {
            var rng = new Random();
            DateTime startDate = DateTime.Now;
            return Enumerable.Range(1, 15).Select(index => {
                var temperatureC = rng.Next(-10, 30);
                return new WeatherForecast {
                    Date = startDate.AddDays(index),               
                    TemperatureC = temperatureC,
                    CloudCover = CloudCover[rng.Next(0, 4)],
                    Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                    Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
                };
            }).ToList();
        }

        public IEnumerable<WeatherForecast> GetForecast() {
            return Forecast.ToArray();
        }
        // ...
}

Startup.cs (.NET 5.0)

public class Startup {
// ...
    public void ConfigureServices(IServiceCollection services) {
    // ...
        services.AddSingleton<WeatherForecastService>();
        // ...
    }
    // ...
}

Program.cs (.NET 6.0)

// ...
builder.Services.AddSingleton<WeatherForecastService>();

Note

You can exclude a column from the Column Chooser (use the DxGridColumn.ShowInColumnChooser property).

Run Demo: Grid - Column Chooser

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

Implements

ShowColumnChooser(String)