Add footer with summary

community.progress.com/.../30385

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

1)  Any errors on the Browser Console?  

2)  I suggest you investigate this:

docs.telerik.com/.../grid

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.

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,

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.

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

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

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