Last Updated: 27 Oct 2022 14:20 by ADMIN
Created on: 10 Oct 2022 10:30
Category: UI for Blazor
Type: Feature Request
Standalone ColumnChooser component
The desired use case is to have the ColumnChooser as a separate component that is not dependent and opened from the menu of a specific column. I want to have the ability to open the ColumnChooser from a button in the Toolbar, for example.
Posted on: 27 Oct 2022 14:20

@Hao - if you follow this item, you will receive email notifications when the item status changes. Currently there is no set development time frame yet.

In general, our Telerik Blazor releases follow a 6-week cycle.

In the meantime, here is just one of many possible implementations.

<TelerikGrid Data="@GridData"
        <TelerikMultiSelect @ref="@MultiSelectRef"
                            ValueChanged="@( (List<string> newValues) => SetColumnVisibility(newValues) )"
        <GridColumn Field="@nameof(Product.Name)"
                    Visible="@( GetColumnVisibility(nameof(Product.Name)) )" />
        <GridColumn Field="@nameof(Product.Price)"
                    Visible="@( GetColumnVisibility(nameof(Product.Price)) )" />
        <GridColumn Field="@nameof(Product.ReleaseDate)"
                    Visible="@( GetColumnVisibility(nameof(Product.ReleaseDate)) )" />
        <GridColumn Field="@nameof(Product.Active)"
                    Visible="@( GetColumnVisibility(nameof(Product.Active)) )" />

     Single Tag Mode workaround:

    .single-tag-mode .k-input-values {
        float: left;

    .single-tag-mode .k-input-values .k-chip {
        display: none;

    .single-tag-mode .k-input-values:before {
        content: "Visible columns: @GridVisibleColumns.Count";
        display: inline-block;
        line-height: 1.8em;
        padding: 0 7px;
        vertical-align: bottom;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        background: #f5f5f5 linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));

@code {
    List<Product> GridData { get; set; }

    List<ColumnDescriptor> GridColumns { get; set; }
    List<string> GridVisibleColumns { get; set; }
    TelerikMultiSelect<ColumnDescriptor, string> MultiSelectRef { get; set; }

    bool GetColumnVisibility(string id)
        return GridVisibleColumns.Contains(id);

    async Task SetColumnVisibility(List<string> newValues)
        if (newValues.Count >= 1)
            GridVisibleColumns = newValues;

    protected override void OnInitialized()
        GridData = new List<Product>();
        var rnd = new Random();

        for (int i = 1; i <= 3; i++)
            GridData.Add(new Product()
                Id = i,
                Name = "Product " + i,
                Price = (decimal)rnd.Next(1, 100),
                ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                Active = i % 3 == 0

        GridColumns = new List<ColumnDescriptor>();

        GridColumns.Add(new ColumnDescriptor(nameof(Product.Name)));
        GridColumns.Add(new ColumnDescriptor(nameof(Product.Price)));
        GridColumns.Add(new ColumnDescriptor(nameof(Product.ReleaseDate)));
        GridColumns.Add(new ColumnDescriptor(nameof(Product.Active)));

        GridVisibleColumns = GridColumns.Select(x => x.Id).ToList();

    public class ColumnDescriptor
        public string Id { get; set; }
        public string Text { get; set; }

        public ColumnDescriptor(string id)
            Id = Text = id;

    public class Product
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool Active { get; set; }

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Posted on: 27 Oct 2022 13:09
Could some one from Telerik let us know when is avalidable on new Blazor versions?
Posted on: 17 Oct 2022 13:56

Alternative 1 is fine for me.

One other thing you could think about is to make the "internal" lists of columns avalible by code. That way if some one wants to do the second alternative it is possible to implement it by them self. The problem now is that it is not possible for me to create a columns chooser since I can't find all information I need about all columns. I think when I tried that I was able to get it to for except that I was not able to get the title of the columns.

Posted on: 17 Oct 2022 13:47

Hello everyone,

We have confirmed this to be a valid feature request. There are two ways to implement it - the ColumnChooser can be "Grid-aware" (1) or completely independent (2).

  • In the first case, the column chooser must be inside the Grid and the usage will be similar to the SearchBox - put it in the Grid toolbar and it just works.
  • In the second case, the column chooser can reside anywhere inside or outside the Grid. The usage will be similar to the Filter component - you will have a lot more parameters to set.

So far we assume (1), but let us know if anyone needs option (2).

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 https://learn.telerik.com/.

Posted on: 11 Oct 2022 16:34

Having the column chooser embedded in the column is really confusing to users.

It needs to be at the end of the column titles, I think every column chooser I have seen

is done this way.