Change Individual DataGrid columns visibility using SelectBar

Is it possible to change the visibility of individual DataGrid columns using the SelectBar?
Example diagram below.

Diagram:

Yes,
for example like this:

<RadzenCard class="m-4">  
    @if (dg != null && dg.ColumnsCollection.Count > 0)
    {
        <RadzenStack Orientation="Orientation.Horizontal" Gap="30px">   
            @foreach (var column in dg.ColumnsCollection)
            {
                <RadzenStack Orientation="Orientation.Horizontal" Gap="2px">
                    <RadzenLabel Text="@column.Title" />
                    <RadzenSwitch @bind-Value=column.Visible />
                </RadzenStack> 
            }
        </RadzenStack>        
    }

    <RadzenDataGrid @ref=@dg Data="@Persons" Style="margin:20px;">
        <Columns>
            <RadzenDataGridColumn TItem="Person" Property="FirstName" Title="First Name" />
            <RadzenDataGridColumn TItem="Person" Property="LastName" Title="Last Name" />
            <RadzenDataGridColumn TItem="Person" Property="Email" Title="Email" />
        </Columns>
    </RadzenDataGrid>
</RadzenCard>

@code {
    RadzenDataGrid<Person>? dg;
    IEnumerable<Person> Persons{ get; set; }

    protected override void OnInitialized() 
    { 
        base.OnInitialized();

        Persons = new List<Person>()
        {
            new Person("Andy", "Smith", "email@em.com"),
            new Person("John", "Doe", "doe@test.com"),
        };
    }

    protected override void OnAfterRender(bool firstRender) 
    { 
        base.OnAfterRender(firstRender);
        StateHasChanged();
    }

    public record Person(string FirstName, string LastName,string Email);
}

and result:

I know that you can achieve this via the use of the Switch component, as I am currently using them; but I wanted to know if it was possible to do it using the SelectBar component as it fits my format better.

SelectBar:

For sure it's not ideal but it's working :wink:

@using System.Linq;

<RadzenCard class="m-4">  
    @if (dg != null && dg.ColumnsCollection.Count > 0)
    {
        <RadzenSelectBar @bind-Value=selected class="mb-5" TValue="IEnumerable<string>" Multiple=true>
            <Items>            
                @foreach (var column in dg.ColumnsCollection)
                {
                    <RadzenSelectBarItem Text="@column.Title" Value="@column.Property" />
                }
           </Items>         
        </RadzenSelectBar>
    }

    <RadzenDataGrid @ref=@dg Data="@Persons" Style="margin:20px;">
        <Columns>
            <RadzenDataGridColumn TItem="Person" Property="@(nameof(Person.FirstName))" Title="First Name" Visible=@(selected.Contains(nameof(Person.FirstName))) />
            <RadzenDataGridColumn TItem="Person" Property="@(nameof(Person.LastName))" Title="Last Name" Visible=@(selected.Contains(nameof(Person.LastName))) />
            <RadzenDataGridColumn TItem="Person" Property="@(nameof(Person.Email))" Title="Email" Visible=@(selected.Contains(nameof(Person.Email))) />
        </Columns>
    </RadzenDataGrid>
</RadzenCard>

@code {
    RadzenDataGrid<Person>? dg;
    IEnumerable<Person> Persons{ get; set; }
    IEnumerable<string> selected = new string[100];

    protected override void OnInitialized() 
    { 
        base.OnInitialized();

        Persons = new List<Person>()
        {
            new Person("Andy", "Smith", "email@em.com"),
            new Person("John", "Doe", "doe@test.com"),
        };
    }

    protected override void OnAfterRender(bool firstRender) 
    { 
        base.OnAfterRender(firstRender);

        if(firstRender)
            selected = dg.ColumnsCollection.Select(c => c.Property).ToArray();

        StateHasChanged();
    }

    public record Person(string FirstName, string LastName,string Email);
}

image

2 Likes

Nice, thanks for the help.