Separate ColumnChooser button

[Joeri]

Hello,

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: https://ibb.co/F3TndK2

[Svetoslav Dimitrov]

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"
             Pageable="true"
             PageSize="10">
    <GridToolBar>
        <TelerikButton OnClick="@( _ => isModalVisible = true )">Column Chooser</TelerikButton>
    </GridToolBar>
    <GridColumns>
        @foreach (var col in Columns)
        {
            <GridColumn Field="@col.Key" Width="120px" Visible="@col.Value" />
        }
    </GridColumns>
</TelerikGrid>

<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
    <WindowTitle>
        <strong>Column Chooser</strong>
    </WindowTitle>
    <WindowContent>
        @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>
        }
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>


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

Regards,
Svetoslav Dimitrov
Progress Telerik

[Michal]

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"  ...>
<GridColumns>
<GridColumn Field="@(nameof(TIMVykVykaz.CC))" DisplayFormat="{0:n2}" Title=@(Localize("Total Price"))/>
....
</<GridColumns>

@code{
foreach(var col in GHL.GridColumns){
col.Title...
... 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]

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: https://feedback.telerik.com/blazor/1450105-column-chooser