This is a migrated thread and some comments may be shown as answers.

Separate ColumnChooser button

1 Answer 346 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Joeri asked on 05 Nov 2020, 03:33 PM


I was wondering if it is possible to add a column chooser button to the GridToolbar.

Now it's only possible to have a column chooser in the ColumnMenu and then it's in every column.

Example here:

1 Answer, 1 is accepted

Sort by
Svetoslav Dimitrov
Telerik team
answered on 10 Nov 2020, 09:31 AM

Hello Joeri,

Currently, we expose the column chooser only as part of the ColumnMenu. To create a custom column chooser you could:

  1. Setup a custom Telerik Button in the Grid Toolbar
  2. Setup the Visible parameter for the columns of your Grid
  3. On click of that button open a TelerikWindow or an animation container
  4. Use the Telerik Checkbox to toggle their visibility

Below, you could see a short code snippet with a sample implementation of a custom column chooser:

<TelerikGrid Data="@MyData"
        <TelerikButton OnClick="@( _ => isModalVisible = true )">Column Chooser</TelerikButton>
        @foreach (var col in Columns)
            <GridColumn Field="@col.Key" Width="120px" Visible="@col.Value" />

<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
        <strong>Column Chooser</strong>
        @foreach (var col in Columns)
            var id = $"{col.Key}Column";
            <TelerikCheckBox Value="@col.Value" ValueChanged="@((bool value) => ValueChanged(col.Key, value))" Id="@id"></TelerikCheckBox>
            <label for="@id">@col.Key Column</label>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />

@code {
    public bool isModalVisible { get; set; }

    public Dictionary<string, bool> Columns { get; set; } = new Dictionary<string, bool>
        { nameof(SampleData.Id), true },
        { nameof(SampleData.Name), true },
        { nameof(SampleData.Team), true },
        { nameof(SampleData.HireDate), true }

    private void ValueChanged(string key, bool value)
        Columns[key] = value;

    public class SampleData
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date

Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Top achievements
Rank 1
commented on 28 Mar 2022, 07:11 AM | edited

Hello Svetoslav,

 this apporach is close, but i am missing one point:
HOW to iterate grid columns which are created in RAZOR layout.

<TelerikGrid  @ref="GHL"  ...>
<GridColumn Field="@(nameof(TIMVykVykaz.CC))" DisplayFormat="{0:n2}" Title=@(Localize("Total Price"))/>

foreach(var col in GHL.GridColumns){
... will not work, because  "GridColumns" is RenderFragment.

1) - Any idea how to iterate DECLARED columns in grid? (GridState is not enought, there is missing "Title" for end user)
2)- Any alternative how to show colum chooser by code(or somehow)? (Imagine scenario when NO columns are initialy visible in grid to the end user)

Thank you

Marin Bratanov
Telerik team
commented on 28 Mar 2022, 04:40 PM

In Blazor, the typical approach is to define the data in the view-model, and build the component based on that. So, some descriptor class for the columns can be your data source and a foreach loop over it can create your columns, while filtering it can let you loop over them. You can find a basic example at the bottom of this thread:
Asked by
Top achievements
Rank 1
Answers by
Svetoslav Dimitrov
Telerik team
Share this question