Add footer with summary

Posted by Bert Binnenmarsch on 31-May-2017 10:01

Hello,

How can I add a footer with "sum" (€ - 430,10) and "count" (2) functions to certain columns?

In the screenshot the data is grouped and the footer needs to be added for the grouped data and the total.

Best regards,
Bert

Posted by Bert Binnenmarsch on 02-Jun-2017 02:55

Hello Edsel,

Removing the single quotes made the grouping work.

var columns = $scope.gridRapport.options.columns;
for (var i = 0; i < columns.length; i++) {
	if (columns[i].field == 'aantal') {
		columns[i].aggregates = [ "sum" ];
		columns[i].footerTemplate = '<div>totaal: #= sum #</div>';
		columns[i].groupFooterTemplate = '<div>totaal: #= sum #</div>';
	}
}

Best regards,

Bert

Posted by Bert Binnenmarsch on 02-Jun-2017 03:12

Hello Edsel,

Removing the single quotes makes grouping work.

var columns = $scope.gridRapport.options.columns;
for (var i = 0; i < columns.length; i++) {
	if (columns[i].field == 'aantal') {
		columns[i].aggregates = [ "sum" ];
		columns[i].footerTemplate = '<div>totaal: #= sum #</div>';
		columns[i].groupFooterTemplate = '<div>totaal: #= sum #</div>';
	}
}

Best regards,
Bert

All Replies

Posted by Ricardo Perdigao on 31-May-2017 10:56
Posted by Bert Binnenmarsch on 01-Jun-2017 04:26

Hello,

The code shown in the example works, but there are 2 problems.

1) As soon as I try to group a column (by dragging it to “Drag a column header and drop …”) the grid seems to go in an endless loop by showing the moving dots (which it also does when it is processing data) and the grouping doesn’t happen.

2) The total of a currency column is shown as: 13124.499999999996 but needs to be displayed as the currency in the column: € 13.124,50

Any suggestions?

Bert

Posted by Ricardo Perdigao on 01-Jun-2017 06:07

1)  Any errors on the Browser Console?  

2)  I suggest you investigate this:

docs.telerik.com/.../grid

Posted by Bert Binnenmarsch on 01-Jun-2017 06:39

1) TypeError: functions[functionName.toLowerCase(...)] is not a function

2) Just tell me, I really cannot find the option I need, probably something like:

.aggregate([{} field: "count", aggregate: "sum", format: "c"])

or

.aggregate([{} field: "count", aggregate: "sum", format: "{0:c}"])

, but they both don't work.

Posted by Bert Binnenmarsch on 01-Jun-2017 06:44

Posted by egarcia on 01-Jun-2017 09:00

Hello Bert,

> 1) TypeError: functions[functionName.toLowerCase(...)] is not a function

> .aggregate([{} field: "count", aggregate: "sum", format: "c"])

This error message indicates that the aggregate function specified is not a function.

Is the aggregate line above what you are using?

The value of the aggregate property should be just "sum". A format is not part of the function name.

Also, notice that the curly braces are not enclosing the object.

It should look like:

$scope._$ds['CustomerDS'].aggregate([{ field: "count", aggregate: "sum" } ]);

2) Just tell me, I really cannot find the option I need, probably something like:

Perhaps, what you would need to do to show the value as a currency is to make use of the kendo.toString() function.

this.scope.customerGrid.options.columns[i].footerTemplate = '<div>Sum: #= kendo.toString(sum, "c0") #</div>';

Related links:

docs.telerik.com/.../datasource

docs.telerik.com/.../numberformatting

I hope this helps,

Posted by Bert Binnenmarsch on 01-Jun-2017 09:49

Hello Edsel,

1) The aggregate is working just fine (see screenshot in 2), but the error message appears when I group a column.

The following is the code that I have punt in the onShow event

$scope._$ds["ViewDataSourceRapport"].aggregate([{ field: "aantal", aggregate: "sum" },
                                                { field: "bedrag", aggregate: "sum" }
                                               ]);
for (var i = 0; i < $scope.gridRapport.options.columns.length; i++) {
	if ($scope.gridRapport.options.columns[i].field == 'aantal') {
		$scope.gridRapport.options.columns[i].aggregates = '["sum"]';
		$scope.gridRapport.options.columns[i].footerTemplate = '<div>totaal: #= sum #</div>';
	}
	if ($scope.gridRapport.options.columns[i].field == 'bedrag') {
    	$scope.gridRapport.options.columns[i].aggregates = '["sum"]';
    	$scope.gridRapport.options.columns[i].footerTemplate = '<div>totaal: #= kendo.toString(sum, "c2") #</div>';
    }
}

2) the kendo.toString(sum, "c2") did the trick

It is a partial screenshot to demonstrate the contents of the footer.

Posted by egarcia on 01-Jun-2017 10:51

Hello Bert,

>      $scope.gridRapport.options.columns[i].aggregates = '["sum"]';

I noticed that the sample code uses a string as the parameter for the columns.aggregates property. However, this property is expected to be an array. This caused the calculation of the grouping aggregates to fail.

Please change the code to look like the following:

    $scope.gridRapport.options.columns[i].aggregates = ["sum"];

You can also omit this assignment if you do not need the calculation of grouping aggregates.

You would then set groupFooterTemplate to show the grouping aggregates.

Related link:

- docs.telerik.com/.../grid

- docs.telerik.com/.../grid

Please let me know if you need more information.

Thank you and regards,

Edsel

Posted by Bert Binnenmarsch on 02-Jun-2017 02:55

Hello Edsel,

Removing the single quotes made the grouping work.

var columns = $scope.gridRapport.options.columns;
for (var i = 0; i < columns.length; i++) {
	if (columns[i].field == 'aantal') {
		columns[i].aggregates = [ "sum" ];
		columns[i].footerTemplate = '<div>totaal: #= sum #</div>';
		columns[i].groupFooterTemplate = '<div>totaal: #= sum #</div>';
	}
}

Best regards,

Bert

Posted by Bert Binnenmarsch on 02-Jun-2017 03:12

Hello Edsel,

Removing the single quotes makes grouping work.

var columns = $scope.gridRapport.options.columns;
for (var i = 0; i < columns.length; i++) {
	if (columns[i].field == 'aantal') {
		columns[i].aggregates = [ "sum" ];
		columns[i].footerTemplate = '<div>totaal: #= sum #</div>';
		columns[i].groupFooterTemplate = '<div>totaal: #= sum #</div>';
	}
}

Best regards,
Bert

This thread is closed