Expand only current item of the Grid and programmatically collapse all others
Environment
Product | Grid for Blazor |
Description
I have a Grid with hierarchy enabled. When I expand one row, I want to programmatically collapse all other expanded rows.
Solution
- Handle the Grid
OnRowExpand
event. It provides argument of typeGridRowExpandEventArgs
with aItem
field that refers to the currently expanded Grid item. - Set the
ShouldRender
property of theGridRowExpandEventArgs
argument totrue
. - Use the Grid State to programmatically set its
ExpandedItems
property. SetExpandedItems
to aList<T>
that should only contain the currently expanded item. This will result in collapsing all previously expanded items.
<TelerikGrid @ref="@GridRef"
Data="@SalesTeamMembers"
OnRowExpand="@OnExpand">
<DetailTemplate>
@{
var employee = context as MainModel;
<TelerikGrid Data="employee.Orders">
<GridColumns>
<GridColumn Field="OrderId"></GridColumn>
<GridColumn Field="DealSize"></GridColumn>
</GridColumns>
</TelerikGrid>
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="Id"></GridColumn>
<GridColumn Field="Name"></GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public TelerikGrid<MainModel> GridRef { get; set; }
List<MainModel> SalesTeamMembers { get; set; }
async Task OnExpand(GridRowExpandEventArgs args)
{
args.ShouldRender = true;
GridState<MainModel> desiredState = GridRef.GetState();
desiredState.ExpandedItems = new List<MainModel> { args.Item as MainModel };
await GridRef.SetStateAsync(desiredState);
}
//data generation and models
protected override void OnInitialized()
{
SalesTeamMembers = GenerateData();
}
private List<MainModel> GenerateData()
{
List<MainModel> data = new List<MainModel>();
for (int i = 1; i <= 30; i++)
{
MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
mdl.Orders = Enumerable.Range(1, 3).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
data.Add(mdl);
}
return data;
}
public class MainModel
{
public int Id { get; set; }
public string Name { get; set; }
public List<DetailsModel> Orders { get; set; }
}
public class DetailsModel
{
public int OrderId { get; set; }
public double DealSize { get; set; }
}
}