Summary Not Working On Reload & Summary on Multiple Columns
In Grid SummaryRows and summaryColumns properties are an array type. So, we provide support to more than one summary columns in each summary row and can render more than one summary row for a Grid. Please refer to the following code example, Help documentation and sample.
Code example:
|
$(function () { $("#Grid").ejGrid({ /// the datasource "window.gridData" is referred from jsondata.min.js dataSource: window.gridData, allowPaging: true, showSummary: true, pageSettings: { pageSize: 10 }, summaryRows: [ { title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}" }, { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "EmployeeID", dataMember: "EmployeeID", format: "{0:C2}" }, { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "OrderID", dataMember: "OrderID", format: "{0:C2}" } ] }, ], columns: [ { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 }, { field: "EmployeeID", headerText: "Employee ID", editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 80 }, { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" } ] }); |
Help Documentation : http://help.syncfusion.com/js/api/ejgrid#members:summaryrows
Sample: http://jsplayground.syncfusion.com/mun51owr
Query: Exception was thrown at line 10, column 54961 in http://localhost:14826/scripts/syncfusion/ej.web.all.min.js
0x800a138f - JavaScript runtime error: Unable to get property 'fn' of undefined or null reference
We were unable to reproduce the issue. Please share the following information to find the cause of the issue and provide a solution, 1. A sample or sample hosted link. 2. Full code example. 3. Essential studio version and browser details. Regards, Jayaprakash K.
[
{
"prjCode":
"ACON0001",
"activDesc":
"Archiving",
"description":
"dfdfsf",
"monday": 2.0,
"tuesday": 0.0,
"wednesday":
0.0,
"thursday": 0.0,
"friday": 0.0,
"saturday": 0.0,
"sunday": 0.0
},
{
"prjCode":
"AI0000",
"activDesc":
"Artwork (mocking)",
"description":
"rtrtrte",
"monday": 4.0,
"tuesday": 0.0,
"wednesday":
0.0,
"thursday": 0.0,
"friday": 0.0,
"saturday": 0.0,
"sunday": 0.0
},
{
"prjCode":
"AMER0001",
"activDesc":
"DTP A\u0026P (production)",
"description":
"qwere",
"monday": 3.0,
"tuesday": 0.0,
"wednesday":
0.0,
"thursday": 0.0,
"friday": 0.0,
"saturday": 0.0,
"sunday": 0.0
}
]
$("#Grid").ejGrid({
dataSource: data,
isResponsive: true,
showSummary: true,
summaryRows: [
{
title: "Total:", summaryColumns: [
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "monday",
dataMember: "monday" },
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "tuesday",
dataMember: "tuesday" },
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "wednesday",
dataMember: "wednesday" },
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "thursday",
dataMember: "thursday" },
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "friday",
dataMember: "friday" },
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "saturday",
dataMember: "saturday" },
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "sunday",
dataMember: "sunday" },
]
}],
endAdd: function
(args) {
vm.addTimesheet(args, $scope.dt);
},
endEdit: function
(args) {
vm.updateTimesheet(args, $scope.dt);
},
endDelete:
function (args)
{
vm.deleteTimesheet(args, $scope.dt);
},
toolbarSettings: {
showToolbar:
true,
toolbarItems: ["add", "edit", "update", "delete", "cancel"]
},
editSettings: {
allowEditing:
true,
allowAdding: true,
allowDeleting: true,
editMode: "normal",
rowPosition: "bottom",
showAddNewRow: false
},
allowScrolling: true,
allowFiltering: true,
allowSorting: true,
columns: [
{
field: "prjCode", headerText: 'Project
Code', textAlign: ej.TextAlign.Left, width:
15, editType: ej.Grid.EditingType.Dropdown, dataSource: $scope.projectList
},
{
field: "activDesc", headerText: 'Activity', textAlign: ej.TextAlign.Left, width: 15, editType:
ej.Grid.EditingType.Dropdown, dataSource: $scope.activityList
},
{ field: "description", headerText: 'Description', textAlign: ej.TextAlign.Left, width: 20 },
{ field: "monday", headerText: 'M', width: 7,type: "number", format: "{0:n}" },
{ field: "tuesday", headerText: 'T', textAlign: ej.TextAlign.Center, width: 7 },
{ field: "wednesday", headerText: 'W', textAlign: ej.TextAlign.Center, width: 7 },
{ field: "thursday", headerText: 'T', textAlign: ej.TextAlign.Center, width: 7 },
{ field: "friday", headerText: 'F', textAlign: ej.TextAlign.Center, width: 7 },
{ field: "saturday", headerText: 'S', textAlign: ej.TextAlign.Center, width: 7 },
{ field: "sunday", headerText: 'S', textAlign: ej.TextAlign.Center, width: 7 }
]
});
We have created sample with your code example and we are not using client side events(endAdd/endEdit/endDelete). Because we don’t know what you have done in clientside events. But we were unable to reproduce the issue. Please share the following information to find the cause of the issue and provide a solution,
1. An issue reproducing sample if possible or sample hosted link or replicate the issue in the following sample.
Sample: http://jsplayground.syncfusion.com/2gqf1nsy
2. Essential studio version and browser details
Regards,
Jayaprakash K.
Did anyone ever find a solution to this? I'm having the same problem.
I can get the fn error to go away if I set allowPaging to true, but the summary lines don't appear after a reload where each time I'm re-drawing the whole grid.
- 5 Replies
- 4 Participants
-
DS Dee Sheehan
- Mar 4, 2016 06:22 PM UTC
- Jul 12, 2017 04:43 PM UTC
