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 621 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pramod
Top achievements
Rank 1
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>

    <script>
        var pictures = [
    {
        type: "JPG",
        size: 10
    }, {
        type: "JPG",
        size: 20
    }, {
        type: "JPG",
        size: 12
    }, {
        type: "JPG",
        size: 10
    }, {
        type: "JPG",
        size: 10
    }, {
        type: "JPG",
        size: 20
    }, {
        type: "JPG",
        size: 20
    }, {
        type: "JPG",
        size: 10
    }, {
        type: "JPG",
        size: 12
    }, {
        type: "JPG",
        size: 10
    }, {
        type: "JPG",
        size: 1
    }, {
        type: "JPG",
        size: 10
    }, {
        type: "JPG",
        size: 12
    }, {
        type: "JPG",
        size: 20
    }, {
        type: "JPG",
        size: 20
    }, {
        type: "PNG",
        size: 10
    }, {
        type: "PNG",
        size: 10
    }, {
        type: "PNG",
        size: 10
    }, {
        type: "PNG",
        size: 20
    }, {
        type: "PNG",
        size: 20
    }, {
        type: "PNG",
        size: 12
    }, {
        type: "PNG",
        size: 10
    }, {
        type: "PNG",
        size: 20
    }, {
        type: "PNG",
        size: 20
    }, {
        type: "PNG",
        size: 12
    }, {
        type: "PNG",
        size: 12
    }, {
        type: "PNG",
        size: 10
    },
    {
        type: "GIF",
        size: 25
    },
     {
         type: "GIF",
         size: 35
     },
    ];

    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

Sort by
0
Alexander Valchev
Telerik team
answered on 09 May 2012, 11:40 AM
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!
0
Chris
Top achievements
Rank 2
answered on 03 Apr 2013, 10:31 PM
I am trying to run your example "grid-summing.zip" but I can't drag anything to the header.  Any idea what I might be doing wrong?  I just threw the file on our server and ran it.

http://dev.quantumgroup.com/chris/grid-summing.html

Chris
0
Alexander Valchev
Telerik team
answered on 05 Apr 2013, 11:49 AM
Hello Pramod,

What browser you use? I tested the page in all major browsers but did not manage to reproduce the problem.
Could you please check the screen cast and let me know what I am missing?

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!
0
REIMANN
Top achievements
Rank 1
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


0
Alexander Valchev
Telerik team
answered on 18 Feb 2014, 09:43 AM
Hi REIMANN,

The functionality is not supported out of the box. In my previous reply I suggested a possible workaround which uses a custom function to calculate the aggregates based on the Grid's data.
groupHeaderTemplate: "Sum size of #= value #: #= getSum(value) #"

The getSum function is used to calculate sum value. Please feel free to change its logic according to the requirements of your project.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 05 Jan 2016, 07:20 PM

Hello, 

 This solution works perfectly if I only have one level of grouping... If I group by a second column, the sum is undefined... is there a workaround for this?

0
Alexander Valchev
Telerik team
answered on 08 Jan 2016, 04:06 PM
Hi Daniel,

The getSum function is an example. You have to customize it according to your specific scenario.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Pramod
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Chris
Top achievements
Rank 2
REIMANN
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Share this question
or