How to nested footer base on group "Gender" and "Position"

Radzen.Blazor Components
1

@page "/"
@using Radzen.Blazor

<RadzenDataGrid @ref="empGrid" ColumnWidth="220px" AllowGrouping="false" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Density="Density.Compact"
Data="@data" TItem="EmployeeModel" Render="@OnRender">

@context.GroupDescriptor.GetTitle(): @(context.Data.Key ?? "")

    <RadzenDataGridColumn TItem="EmployeeModel" Property="Id" Title="#">
        <FooterTemplate>
            Displayed employees: <b>@empGrid.View.Count()</b> of <b>@data.Count()</b>
        </FooterTemplate>
    </RadzenDataGridColumn>
    <RadzenDataGridColumn Width="160px" TItem="EmployeeModel" Property="Name" Title="Name"/>
    <RadzenDataGridColumn Width="160px" TItem="EmployeeModel" Property="Gender" Title="Gender" />
    <RadzenDataGridColumn Width="160px" TItem="EmployeeModel" Property="Position" Title="Position" />
    <RadzenDataGridColumn TItem="EmployeeModel" Property="Salary" Title="Salary">
        <Template Context="d">
            @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", d.Salary)

        </Template>
        <FooterTemplate>
            Total Salary: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", data.Sum(e=>e.Salary))</b>
        </FooterTemplate>
        <GroupFooterTemplate>
            Group By Gender: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", context.Data.Items.Cast<EmployeeModel>().Sum(o => o.Salary))</b>
               
        </GroupFooterTemplate>
        <GroupFooterTemplate>
            Group By Position: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", context.Data.Items.Cast<EmployeeModel>().Sum(o => o.Salary))</b>
        </GroupFooterTemplate>

    </RadzenDataGridColumn>
    
</Columns>

@code {
string text = "Hi";

IList<EmployeeModel> data;
RadzenDataGrid<EmployeeModel> empGrid;

protected override async Task OnInitializedAsync()
{
    data = InitData();
}

void OnRender(DataGridRenderEventArgs<EmployeeModel> args)
{
    if (args.FirstRender)
    {
        args.Grid.Groups.Add(new GroupDescriptor() { Property = "Gender", Title = "Gender" });
        args.Grid.Groups.Add(new GroupDescriptor() { Property = "Position", Title = "Position" });
        StateHasChanged();
    }
}


private List<EmployeeModel> InitData()
{
    var data = new List<EmployeeModel>()
    {
        new EmployeeModel()
        {
            Id=1,
            Age=20,
            Gender="Male",
            Name="Mengly",
            Position="Developer",
            Salary=1200
        },
        new EmployeeModel()
        {
            Id=2,
            Age=20,
            Gender="Male",
            Name="Seyha",
            Position="Manager",
            Salary=1800
        },
        new EmployeeModel()
        {
            Id=3,
            Age=25,
            Gender="Female",
            Name="Mina",
            Position="Accountant",
            Salary=800
        },
        new EmployeeModel()
        {
            Id=4,
            Age=25,
            Gender="Female",
            Name="Pisey",
            Position="Accountant",
            Salary=800
        },
    };
    return data;
}


private class EmployeeModel
{
    public int Id { get; set; }
    public string Name { get; set; } = "";
    public int Age { get; set; }
    public string Gender { get; set; } = "";
    public string Position { get; set; } = "";
    public decimal Salary { get; set; }
}

}

This is sample code

2

Hi @Mengly_Pun,

Are you asking something or sharing a solution? I couldn't understand that. By the way you can format your code as shown in the forum FAQ.

3

image
image1875×712 56.3 KB

In my highlight image, I need one more row that is grouped by "Gender " which sum of the group by "Position"

4 
@page "/"
@using Radzen.Blazor


<RadzenDataGrid @ref="empGrid" ColumnWidth="220px" AllowGrouping="false" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Density="Density.Compact"
                Data="@data" TItem="EmployeeModel" Render="@OnRender">
    <GroupHeaderTemplate>
        @context.GroupDescriptor.GetTitle(): @(context.Data.Key ?? "")
    </GroupHeaderTemplate>
    <Columns>
       
        <RadzenDataGridColumn TItem="EmployeeModel" Property="Id" Title="#">
            <FooterTemplate>
                Displayed employees: <b>@empGrid.View.Count()</b> of <b>@data.Count()</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Width="160px" TItem="EmployeeModel" Property="Name" Title="Name"/>
        <RadzenDataGridColumn Width="160px" TItem="EmployeeModel" Property="Gender" Title="Gender" />
        <RadzenDataGridColumn Width="160px" TItem="EmployeeModel" Property="Position" Title="Position" />
        <RadzenDataGridColumn TItem="EmployeeModel" Property="Salary" Title="Salary">
            <Template Context="d">
                @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", d.Salary)

            </Template>
            <FooterTemplate>
                Total Salary: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", data.Sum(e=>e.Salary))</b>
            </FooterTemplate>
            <GroupFooterTemplate>
                Group By Gender: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", context.Data.Items.Cast<EmployeeModel>().Sum(o => o.Salary))</b>
                   
            </GroupFooterTemplate>
            <GroupFooterTemplate>
                Group By Position: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", context.Data.Items.Cast<EmployeeModel>().Sum(o => o.Salary))</b>
            </GroupFooterTemplate>

        </RadzenDataGridColumn>
        
    </Columns>
</RadzenDataGrid>


@code {
    string text = "Hi";
   
    IList<EmployeeModel> data;
    RadzenDataGrid<EmployeeModel> empGrid;

    protected override async Task OnInitializedAsync()
    {
        data = InitData();
    }

    void OnRender(DataGridRenderEventArgs<EmployeeModel> args)
    {
        if (args.FirstRender)
        {
            args.Grid.Groups.Add(new GroupDescriptor() { Property = "Gender", Title = "Gender" });
            args.Grid.Groups.Add(new GroupDescriptor() { Property = "Position", Title = "Position" });
            StateHasChanged();
        }
    }


    private List<EmployeeModel> InitData()
    {
        var data = new List<EmployeeModel>()
        {
            new EmployeeModel()
            {
                Id=1,
                Age=20,
                Gender="Male",
                Name="Mengly",
                Position="Developer",
                Salary=1200
            },
            new EmployeeModel()
            {
                Id=2,
                Age=20,
                Gender="Male",
                Name="Seyha",
                Position="Manager",
                Salary=1800
            },
            new EmployeeModel()
            {
                Id=3,
                Age=25,
                Gender="Female",
                Name="Mina",
                Position="Accountant",
                Salary=800
            },
            new EmployeeModel()
            {
                Id=4,
                Age=25,
                Gender="Female",
                Name="Pisey",
                Position="Accountant",
                Salary=800
            },
        };
        return data;
    }


    private class EmployeeModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";
        public int Age { get; set; }
        public string Gender { get; set; } = "";
        public string Position { get; set; } = "";
        public decimal Salary { get; set; }
    }
}
5

Hi @korchev,
I face an issue that I have attached a new description as above with the image.

6

You have set the GroupFouterTemplate twice. It should be set only once.

7

@korchev

After I remove one, How to write code to get 2 groups are "Group by Gender" and "Group by Position"

8

Just add the markup from the two templates into one.

            <GroupFooterTemplate>
                Group By Gender: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", context.Data.Items.Cast<EmployeeModel>().Sum(o => o.Salary))</b>
                Group By Position: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", context.Data.Items.Cast<EmployeeModel>().Sum(o => o.Salary))</b>
            </GroupFooterTemplate>
9

@korchev

Oh I see, But it is so complex for this solution, Are there other ways?

10

No other ways. Also not complex at all.

11

After markup, when I collapse the "Position" group, it also collapses Gender's footer as well. That's why I said complex.

12

I'm a starter at Radzen library. Thank you

13

The content specified via GroupFooterTemplate is collapsed when the user collapses the group. This cannot be changed.