Unplanned
Last Updated: 05 Oct 2022 11:08 by ADMIN
Igor
Created on: 28 Jun 2021 15:07
Category: Grid
Type: Feature Request
8
Expand/Collapse a group by clicking on the grouping row (group header), not only the arrow icon
I would like to click on the grouping row and expand the Group. 
2 comments
ADMIN
Dimo
Posted on: 05 Oct 2022 11:08

Hello everyone,

Here is a possible programmatic workaround. It uses a GroupHeaderTemplate and the Grid state.

  1. Wrap the GroupHeaderTemplate content in a <div> with an @onclick handler, which passes the group Value from the template context.
  2. In the onclick handler, retrieve the Grid state via the GetState() method of the Grid instance.
  3. Extract all the state properties, which affect the current data state (sorting, filtering, etc.). Use this information to create a DataSourceRequest object.
  4. Execute ToDataSourceResult() over the Grid Data with the DataSourceRequest object as an argument. In this way, you will obtain the grouped Grid data in its current shape and form.
  5. Find the index of the clicked group header in the grouped data. The grouped data is a List<AggregateFunctionsGroup>.
  6. Check if the group header index is in the CollapsedGroups property (List<int>) of the GridState.
  7. Add or remove the group header index from CollapsedGroups.
  8. Set the new Grid state via the SetState() method.

The following example illustrates the above instructions. You may need to:

  • Adjust the implementation if you are binding the Grid with OnRead. In this case, cache the current data in the OnRead handler and skip steps 3 and 4.
  • Keep in mind that CollapsedGroups of the Grid state works with the top-level groups only.

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Groupable="true"
             OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)">
            <GroupHeaderTemplate>
                <div class="group-header-expand"
                     @onclick="@( () => ToggleGridGroup(context.Value) )">
                    Team: @context.Value
                </div>
            </GroupHeaderTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
    </GridColumns>
</TelerikGrid>

<style>
    .group-header-expand {
        flex-grow: 1;
        cursor: pointer;
    }
</style>

@code {
    List<Employee> GridData { get; set; }
    TelerikGrid<Employee> GridRef { get; set; }

    async Task ToggleGridGroup(object groupValue)
    {
        var gridState = GridRef.GetState();

        var dataState = new DataSourceRequest()
        {
            Filters = (IList<IFilterDescriptor>)gridState.FilterDescriptors,
            Groups = (IList<GroupDescriptor>)gridState.GroupDescriptors,
            Page = gridState.Page.Value,
            PageSize = 10,
            Sorts = (IList<SortDescriptor>)gridState.SortDescriptors
        };

        var groups = (List<AggregateFunctionsGroup>)GridData.ToDataSourceResult(dataState).Data;

        var groupRowIndex = groups.FindIndex(x => x.Key == groupValue);

        if (gridState.CollapsedGroups.IndexOf(groupRowIndex) >= 0)
        {
            gridState.CollapsedGroups.Remove(groupRowIndex);
        }
        else
        {
            gridState.CollapsedGroups.Add(groupRowIndex);
        }

        await GridRef.SetState(gridState);
    }

    async Task OnGridStateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.Team),
            MemberType = typeof(string)
        });
    }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rnd = new Random();

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Employee()
            {
                Id = i,
                Name = "Name " + i,
                Team = "Team " + (i % 4 + 1),
                Salary = (decimal)rnd.Next(1000, 3000),
                OnVacation = i % 3 == 0
            });
        }
    }

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

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

rwingerter
Posted on: 28 Jun 2021 21:28
Yes please!  This makes it consistent with most websites that offer this type of functionality