New to Telerik UI for Blazor? Download free 30-day trial

Column Chooser Template

The Column Chooser Template lets you control the rendering of the ColumnChooser. It exposes a context object that contains a List of all columns in the Grid.

When the Template is setup the list of columns, rendered by default, would not be present.

Use the Template to provide custom rendering

@* Use the Template to render the list of columns and add some custom styles *@ 

<TelerikGrid Data="@MyData"
                        var columns = context.Columns;
                        foreach (var column in columns)
                            <div style="border: solid 1px red">
                                <GridColumnMenuChooserItem Title="@column.DisplayTitle" ColumnId="@column.Id" />

        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Title="Id" Id="id-column-id" />
        <GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
        <GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
        <GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />

@code {
    public string TextboxValue { get; set; } = string.Empty;

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
        Id = x,
        FirstName = $"FirstName {x}",
        LastName = $"LastName {x}",
        CompanyName = $"Company {x}",
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date

    public class SampleData
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }

The result from the code snippet above

templated column chooser example

See Also

In this article