@using System.Reflection

<div style="position: relative;">
    <TelerikAnimationContainer Width="300px" @ref="@ColumnChooser" Class="k-popup">
        <div style="text-align:right">
            <TelerikButton Icon="@IconName.Close" OnClick="@HideColumnChooser"></TelerikButton>
        </div>
        <TelerikGrid Data="@AllGridColumns" @bind-SelectedItems="@SelectedGridColumns" SelectionMode="@GridSelectionMode.Multiple">
            <GridColumns>
                <GridCheckboxColumn />
                <GridColumn Title="Field Name" Field="Title" />
            </GridColumns>
        </TelerikGrid>
    </TelerikAnimationContainer>
</div>

@* disable features that tamper with the columns - resizing, reoredering, grouping *@
<TelerikGrid Data="@MyData" Height="400px" Pageable="true" FilterMode="@GridFilterMode.FilterRow" 
             Resizable="false" Reorderable="false" Groupable="false">
    <GridColumns>
        @foreach (ColumnDescriptor col in SelectedGridColumns)
        {
            <GridColumn Field="@col.Field" Title="@col.Title" Editable="@col.Editable">
                <Template>
                    @* this shows how to handle templates - if you need one template, you msut define a template for all columns
                        and this here is just a small example that extracts the field value through Reflection
                        If you don not need templated at all, simply omit definig the tag*@
                    @if (col.Field == "HireDate")
                    {
                        var item = context as SampleData;
                        <span style="color:red;">@item.HireDate.ToShortDateString()</span>
                    }
                    else
                    {
                        object item = context;
                        string toRender = "";
                        PropertyInfo propertyInfo = item.GetType().GetProperty(col.Field);
                        if (propertyInfo != null)
                        {
                            toRender = propertyInfo.GetValue(item).ToString();
                        }
                        @toRender
                    }
                </Template>
            </GridColumn>
        }
    </GridColumns>
    <GridToolBar>
        <TelerikButton OnClick="@ShowColumnChooser">Choose Columns</TelerikButton>
    </GridToolBar>
</TelerikGrid>



@code {
    TelerikAnimationContainer ColumnChooser { get; set; }
    async void ShowColumnChooser()
    {
        await ColumnChooser.ShowAsync();
    }
    async void HideColumnChooser()
    {
        await ColumnChooser.HideAsync();
    }

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

    //this example has the data hardcoded, you can consider generating it from classes
    List<ColumnDescriptor> AllGridColumns { get; set; } = new List<ColumnDescriptor>()
    {
        new ColumnDescriptor { Field = "Id", Title = "Id", Editable = false},
        new ColumnDescriptor { Field = "Name", Title = "Employee name", Editable = true},
        new ColumnDescriptor { Field = "Team", Title = "Team", Editable = true},
        new ColumnDescriptor { Field = nameof(SampleData.HireDate), Title = "Hire date", Editable = true},
    };

    //you can consider initializing this collection with some pre-selected columns
    IEnumerable<ColumnDescriptor> SelectedGridColumns { get; set; } = Enumerable.Empty<ColumnDescriptor>();

    public class ColumnDescriptor
    {
        public string Field { get; set; }
        public string Title { get; set; }
        public bool Editable { get; set; }
        //feel free to add other settings such as width, this is just an example
    }

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