This is a migrated thread and some comments may be shown as answers.

Display sum of column in grid footer

1 Answer 231 Views
Grid
This is a migrated thread and some comments may be shown as answers.
sandy
Top achievements
Rank 1
Iron
Veteran
sandy asked on 13 Nov 2020, 07:09 AM

Hi,

i have few integer columns in grid.

I want to display sum of column in footer of the grid.

i tried several ways but could not success.

1 Answer, 1 is accepted

Sort by
0
Accepted
Petar
Telerik team
answered on 16 Nov 2020, 12:54 PM

Hi Sandy,

Attached to my reply, you will find a runnable example demonstrating how we can add a footer template that sums the data of a given Grid column. Here is the used Grid definition:

@(Html.Kendo().Grid<GridSum.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight).ClientFooterTemplate("Sum : #=sum#");
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Aggregates(aggregates =>
        {
            aggregates.Add(p => p.Freight).Sum();
        })
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
)

With the code in yellow, we define the FooterTemplate of the "Freight" column. With the code in green, we define the "sum" aggregate for the "Freight" column.

In the attached example, the "sum" displayed in the footer template is the sum of all fields in the "Freight" column. If you want to display only the sum of the fields that are loaded in the current Grid page, you can check this SO thread

I hope the provided example will help you implement the targeted functionality in the application you are working on.

Regards,


Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
sandy
Top achievements
Rank 1
Iron
Veteran
Answers by
Petar
Telerik team
Share this question
or