How to show columns wise sum of all int or decimal value which are in DB Table

[Muhammad Usman]

I'm new to Blazor and using syncfussion datagrid to show data coming from database. Now there are multiple types of data like string int or decimal. What i want to do is that i want to show columns wise sum of those which have int or decimal type and it has to be dynamic like if i'll add another int or decimal property it has to be going to show sum of that column as well. On each column footer there is sum of all the values of specific columns.

I'm attaching a image as a example 

Please see refference image what i exactly want. In picture it showing sum of debit and credit but in my case there are multiple int or decimal values so i have to show it dynamically.

[Sarveswaran Palani]

Hi Usman,

Greetings from Syncfusion Support.

From your query, we suspect that you want a column footer aggregates for different data types columns dynamically. We have prepared sample based on your requirement. Kindly refer the below sample, screenshot and code snippet for your reference.

<GridAggregates>

    <GridAggregate>

        <GridAggregateColumns>

            <GridAggregateColumn Field=@nameof(Order.LeaveCount) Type="AggregateType.Sum" >

                <FooterTemplate>

                    @{

                        var aggregate = (context as AggregateTemplateContext);

                        <div>

                            <p>Sum: @aggregate.Sum</p>

                        </div>

                    }

                </FooterTemplate>

            </GridAggregateColumn>

            <GridAggregateColumn Field=@nameof(Order.Debit) Type="AggregateType.Sum">

                <FooterTemplate>

                    @{

                        var aggregate = (context as AggregateTemplateContext);

                        <div>

                            <p>Sum: @aggregate.Sum</p>

                        </div>

                    }

                </FooterTemplate>

            </GridAggregateColumn>

            <GridAggregateColumn Field=@nameof(Order.Credit) Type="AggregateType.Sum">

                <FooterTemplate>

                    @{

                        var aggregate = (context as AggregateTemplateContext);

                        <div>

                            <p>Sum: @aggregate.Sum</p>

                        </div>

                    }

                </FooterTemplate>

            </GridAggregateColumn>

            <GridAggregateColumn Field=@nameof(Order.Freight) Type="AggregateType.Sum" Format="C2">

                <FooterTemplate>

                    @{

                        var aggregate = (context as AggregateTemplateContext);

                        <div>

                            <p>Sum: @aggregate.Sum</p>

                        </div>

                    }

                </FooterTemplate>

            </GridAggregateColumn>

        </GridAggregateColumns>

    </GridAggregate>

</GridAggregates>

Sample: https://blazorplayground.syncfusion.com/embed/VZBUCsZPSZivNXMy?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

UG Reference: https://blazor.syncfusion.com/documentation/datagrid/footer-aggregate

Regards,
Sarvesh

[Muhammad Usman]

Thank you for your reply. Sir is there any alternative method to do column wise like making a method which iterate through column names and check if it int or not, if yes then take sum and show.

[Vignesh Natarajan]

Hi Muhammad Usman,

Thanks for contacting Syncfusion support.

Query: “I need to show columns wise sum in my datagrid dynamically like if there are multiple int or decimal types values so each columns sum will show in that column footer.”

We have achieved your requirement of by iterating the integer type columns from the model class and store it ins a variable. While rendering the Grid component, we have looped through the stored value and render the GridAggregate dynamically. Refer to the below code example.

<SfGrid DataSource="@Orders" AllowPaging="true" OverscanCount="5" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowGrouping="true">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

    <GridAggregates>

        <GridAggregate>

            <GridAggregateColumns>

                @foreach (var col in columns)

                {

                    <GridAggregateColumn Field="@col" Type="AggregateType.Sum">

                        <FooterTemplate>

                            @{

                                var aggregate = (context as AggregateTemplateContext);

                                <div>

                                    <p>Sum: @aggregate.Sum</p>

                                </div>

                            }

                        </FooterTemplate>

                    </GridAggregateColumn>

                }

            </GridAggregateColumns>

        </GridAggregate>

    </GridAggregates>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="130" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.LeaveCount) HeaderText="Leave Count" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.Debit) HeaderText="Debit" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.Credit) HeaderText="Credit" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    public List<Order> Orders { get; set; }

    public List<string> columns { get; set; } = new List<string>();

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 10).Select(x => new Order()

            {

                OrderID = 1000 + x,

                CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

                Freight = 2.1 * x,

                LeaveCount = x,

                Debit = x * 1000,

                Credit = x * 1000.0,

                OrderDate = DateTime.Now.AddDays(-x),

            }).ToList();

        PropertyInfo[] props = typeof(Order).GetProperties();

        foreach(var prop in props)

        {

            if (prop.PropertyType == typeof(int) || prop.PropertyType == typeof(Double) || prop.PropertyType == typeof(double?))

            {

                columns.Add(prop.Name);

            }

        }

 

    }

Refer to the below sample for your reference.

https://blazorplayground.syncfusion.com/embed/VXhAMiNkAnFxQyJV?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please get back to us if you have further queries

Regards,

Vignesh Natarajan

[Chang Nguyen Phuong]

I used your method, but I get an error in the excel export. Because some columns I have hidden according to each table condition. Although the hidden columns still work, the Excel export cannot be done because the GridAggregateColumn column does not exist. Is there a way to animate it without affecting the file export function?

[Prathap Senthil]

Based on the reported problem, it appears that the export function is attempting to access or process a GridAggregateColumn that does not exist because it is hidden. To resolve this, we recommend retrieving the visible columns using the grid's public method GetColumnsAsync() and assigning the column details to the Columns property of the ExcelExportProperties class. Kindly refer to the code snippet and sample below for your reference.

 

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname

        {

            ExcelExportProperties ExportProperties = new ExcelExportProperties();

 

 

            var Columns = await DefaultGrid.GetColumnsAsync();

 

            // Filter to only get visible columns

            var visibleColumns = Columns.Where(col => col.Visible).ToList();

            ExportProperties.Columns = visibleColumns;

            await this.DefaultGrid.ExportToExcelAsync(ExportProperties);

        }

    }

Sample:
https://blazorplayground.syncfusion.com/embed/rXLSNsiTpCQJrsTJ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference:
Excel Export in Blazor DataGrid Component | Syncfusion

If the issue still persists could you please share the issue simple reproducible sample or replicate the issue in the attached sample? This information will help us replicate the issue and assist you more effectively.