<TelerikGrid Data="@GridData"
             TItem="@Product">
    <GridToolBarTemplate>
        <TelerikMultiSelect @ref="@MultiSelectRef"
                            Data="@GridColumns"
                            Value="@GridVisibleColumns"
                            ValueChanged="@( (List<string> newValues) => SetColumnVisibility(newValues) )"
                            ValueField="@nameof(ColumnDescriptor.Id)"
                            TextField="@nameof(ColumnDescriptor.Text)"
                            AutoClose="false"
                            Width="200px"
                            ClearButton="false"
                            Class="single-tag-mode">
        </TelerikMultiSelect>
    </GridToolBarTemplate>
    <GridColumns>
        <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)) )" />
    </GridColumns>
</TelerikGrid>

<style>
    /*
     Single Tag Mode workaround:
     https://feedback.telerik.com/blazor/1498325-add-a-tag-mode-summary-tag-mode
    */

    .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));
    }
</style>

@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; }
    }
}