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

Can't sum, when doing group by column on grid

7 Answers 728 Views

Grid

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

Pramod asked on 08 May 2012, 07:23 PM

Hi,
I have a grid with two columns ie Type & Size. I want to sum of all sizes on group header when I want to do group by type. Please see my sample code below.

Type                  size
gif                        10
gif                        20
PNG                   30
PNG                 15

Result after doing group by Type :

Gif   (Sum of sizes) --30
PNG (Sum of sizes) --45
Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
       <script src="Scripts/jquery.min.js" type="text/javascript"></script>

             <script src="Scripts/kendo.web.min.js" type="text/javascript"></script>
                <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
      <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="grid"></div>

    var dataSource = new kendo.data.DataSource({
        data: pictures
    });

    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: dataSource,
            columns: [
            {
                field: "type",
                aggregates: "count",
                groupHeaderTemplate: "Type: #= value # Count: #= count #"
            },
        {
            field: "size",
            aggregates: ["count", "sum"],
            groupHeaderTemplate: "Grouped by size: #= value # Count: #= count #, Sum: #= sum#"
        }
        ],
            groupable: true
        });
    });

    </script>
</body>
</html>

7 Answers, 1 is accepted

answered on 09 May 2012, 11:40 AM

grid-summing.zip

Hello Pramod,

I have already replied to your support ticket on the same subject. For convenience I am pasting my reply here as well. In that way the other users who have similar questions would be able to read it.

At present this functionality is not supported out of the box - in the group header template you can display only the aggregate result of the "group by" field. As a workaround I suggest to retrieve the sum of sizes through the dataSource. Please check the following example:

columns: [

{

field: "type",

aggregates: "count",

groupHeaderTemplate: "Sum size of #= value #: #= getSum(value) #"

}

//the template function

function getSum(value) {

var datasource = $("#grid").data("kendoGrid").dataSource;

var result;

//loops through the dataSource view

$(datasource.view()).each(function(index, element){

//compares view value with the current template value

if(element.value === value) {

result = element.aggregates.size.sum; //gets the aggregate value

}

});

return result;

}

For convenience I attached a sample project that uses the aforementioned approach in action.
I hope this information helps.

Kind regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 13 Feb 2014, 08:43 AM

Hello,

Is it possible to do this when you have two groups ? Starting from the previous example if we have

Category Type                  size
A gif                        10
B gif                        20
A PNG 30
B PNG 15

Result after doing group by Category and Type :

A (Sum of sizes) -- 40
Gif   (Sum of sizes) --10
PNG (Sum of sizes) --30
B (sum of sizes) -- 35
Gif   (Sum of sizes) --20
PNG (Sum of sizes) --15