Is it possible to change the visibility of individual DataGrid columns using the SelectBar?
Example diagram below.
Diagram:
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
@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);
}
Nice, thanks for the help.