Unplanned
Last Updated: 12 Sep 2024 01:44 by Federico
Igor
Created on: 29 Jun 2021 12:34
Category: Grid
Type: Feature Request
29
Persist Groups Collapsed/Expanded State

In a grouped Grid with editing if I collapse all groups and then expand one to edit an item in it, once I press Enter to complete the editing all groups expand.

Please add option for persisting the Collapsed State of the groups.

---

TELERIK EDIT


The feature applies to the other data operations as well (for example, paging, sorting).

Here is how to maintain the collapsed groups after editing by using the Grid OnStateChanged event and the Grid state as a whole:

@using Telerik.DataSource

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             TItem="@Employee"
             Pageable="true"
             Sortable="true"
             Groupable="true"
             FilterMode="GridFilterMode.FilterRow"
             OnStateInit="@OnGridStateInit"
             OnStateChanged="@OnGridStateChanged"
             EditMode="@GridEditMode.Inline"
             OnUpdate="@OnGridUpdate">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Employee>? GridRef { get; set; }

    private List<Employee> GridData { get; set; } = new();

    private ICollection<int>? GridCollapsedGroups { get; set; }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Employee)args.Item;
        var originalItemIndex = GridData.FindIndex(x => x.Id == updatedItem.Id);

        if (originalItemIndex >= 0)
        {
            GridData[originalItemIndex] = updatedItem;
        }

        GridCollapsedGroups = GridRef!.GetState().CollapsedGroups;
    }

    private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
    {
        if (args.PropertyName == "EditItem" && GridCollapsedGroups != null)
        {
            args.GridState.CollapsedGroups = GridCollapsedGroups;

            await GridRef!.SetStateAsync(args.GridState);

            GridCollapsedGroups = default;
        }
    }

    private void OnGridStateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors = new List<GroupDescriptor>();

        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.Team),
            MemberType = typeof(string)
        });
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 20; i++)
        {
            GridData.Add(new Employee()
            {
                Id = i,
                Name = $"Name {i}",
                Team = $"Team {i % 4 + 1}",
                Salary = (decimal)Random.Shared.Next(1000, 3000),
                OnVacation = i % 3 == 0
            });
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public decimal Salary { get; set; }
        public bool OnVacation { get; set; }
    }
}

3 comments
Federico
Posted on: 12 Sep 2024 01:44

I found a workaround to this issue.

First I have a TelerikGrid reference in my code behind and a property to store the grid state (which includes grouping and collapsed groups):

private TelerikGrid<RiskRegister>? RiskRegisterGridEl { get; set; }

private GridState<RiskRegister>? GridState {  get; set; }

 

When the OnUpdate event callback of the TelerikGrid is fired, I save the grid state:

GridState = RiskRegisterGridEl?.GetState();

 

Then, I added a listener to the OnStateChanged event callback of the TelerikGrid. This event is fired for multiple reasons, so I only target the "EditItem" scenario. At that point, I re-set the grid state using the previously saved one. This is the method fired OnStateChanged:

private async Task OnGridStateChanged(GridStateEventArgs<RiskRegister> args)
{
    if (args.PropertyName == "EditItem" && RiskRegisterGridEl != null)
    {
        await RiskRegisterGridEl.SetStateAsync(GridState);
    }
}

 

There is one downside to this. On saving the row, the grid will quickly expand all groups and then go back to the desired state.

 

Hope this helps

 

Vladimir
Posted on: 13 Aug 2024 05:33

Another example is here

https://blazorrepl.telerik.com/QSOCkMbc32QeyZov07

Group by any column, collapse some groups and click Add or Remove button.

Hien
Posted on: 12 Jan 2022 22:53

I strongly suggest Telerik would look into implementing this on their next release. Without this, Grid functionality is incomplete. 

Hien