How to implement the options do expand/collapse grouping records

[Waldemar Barilli Precipito]

Hey guys!

How to implement the options do expand/collapse grouping records?

[Balamurugan Lakshmanan]

Hi Waldemar,

Greeting from Syncfusion Support.

From your query, we understood that you need to expand/collapse grouping records. We have prepared the simple sample as per your requirement. Kindly refer the attached code snippet and sample file to resolve your issues.

 @page "/"

 

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.Buttons

 

<SfButton Content="Expand/Collapse" OnClick="Expand"></SfButton>

 

<SfGrid @ref="Grid" DataSource="@Employees" TValue="EmployeeData" Height="315px" AllowGrouping="true">

    <GridTemplates>

        <DetailTemplate>

            @{

                var employee = (context as EmployeeData);

                <SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))">

                    <GridColumns>

                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn>

                        <GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn>

                        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn>

                    </GridColumns>

                </SfGrid>

            }

        </DetailTemplate>

    </GridTemplates>

    <GridColumns>

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn>

        <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    public SfGrid<EmployeeData> Grid;

 

    List<EmployeeData> Employees = new List<EmployeeData>

{

        new EmployeeData() {EmployeeID = 1001, FirstName="Nancy", LastName="Fuller", Title="Sales Representative", Country="USA"},

        new EmployeeData() {EmployeeID = 1002, FirstName="Andrew", LastName="Davolio", Title="Vice President", Country="UK"},

        new EmployeeData() {EmployeeID = 1003, FirstName="Janet", LastName="Leverling", Title="Sales", Country="UK"},

        new EmployeeData() {EmployeeID = 1004, FirstName="Margaret", LastName="Peacock", Title="Sales Manager", Country="UAE"},

        new EmployeeData() {EmployeeID = 1005, FirstName="Steven", LastName="Buchanan", Title="Inside Sales Coordinator", Country="USA"},

        new EmployeeData() {EmployeeID = 1006, FirstName="Smith", LastName="Steven", Title="HR Manager", Country="UAE"},

    };

 

    List<Order> Orders = new List<Order> {

        new Order() {EmployeeID = 1001, OrderID=001, CustomerName="Nancy", ShipCountry="USA"},

        new Order() {EmployeeID = 1001, OrderID=002, CustomerName="Steven", ShipCountry="UR"},

        new Order() {EmployeeID = 1002, OrderID=003, CustomerName="Smith", ShipCountry="UK"},

        new Order() {EmployeeID = 1002, OrderID=004, CustomerName="Smith", ShipCountry="USA"},

        new Order() {EmployeeID = 1003, OrderID=005, CustomerName="Nancy", ShipCountry="ITA"},

        new Order() {EmployeeID = 1003, OrderID=006, CustomerName="Nancy", ShipCountry="UK"},

        new Order() {EmployeeID = 1003, OrderID=007, CustomerName="Steven", ShipCountry="GER"},

        new Order() {EmployeeID = 1004, OrderID=008, CustomerName="Andrew", ShipCountry="GER"},

        new Order() {EmployeeID = 1005, OrderID=009, CustomerName="Fuller", ShipCountry="USA"},

        new Order() {EmployeeID = 1006, OrderID=010, CustomerName="Leverling", ShipCountry="UAE"},

        new Order() {EmployeeID = 1006, OrderID=011, CustomerName="Margaret", ShipCountry="KEN"},

        new Order() {EmployeeID = 1007, OrderID=012, CustomerName="Buchanan", ShipCountry="GER"},

        new Order() {EmployeeID = 1008, OrderID=013, CustomerName="Nancy", ShipCountry="USA"},

        new Order() {EmployeeID = 1006, OrderID=014, CustomerName="Andrew", ShipCountry="UAE"},

    };

 

    public class EmployeeData

    {

        public int? EmployeeID { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Title { get; set; }

        public string Country { get; set; }

    }

 

    public class Order

    {

        public int? EmployeeID { get; set; }

        public int? OrderID { get; set; }

        public string CustomerName { get; set; }

        public string ShipCountry { get; set; }

    }

 

    public async Task Expand()

    {

        await this.Grid.ExpandCollapseDetailRowAsync(Employees[1]);

    }

}

And also we would like to explain you that once the AllowGrouping property is enabled in Grid. Columns can be grouped by dragging the column header to group drop area or programmatic grouping.

Reference : https://blazor.syncfusion.com/demos/datagrid/grouping?theme=fluent

Please get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorApp1_6cfb1bb.zip