We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Summary Not Working On Reload & Summary on Multiple Columns

Hi

I have a grid that reads displays hours worked on projects over each day of the week. I want a summary row at the end with a summary for each day in the one row but can only seem to find examples for summing one row. Is this possible?

Here is my code:

                $("#Grid").ejGrid({
                            dataSource: data,
                            showSummary: true,
                            summaryRows: [
                                { title: "monday", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "monday", dataMember: "monday" }] }],                           
                            columns: [
                                { 
                                    field: "prjCode", headerText: 'Project Code', textAlign: ej.TextAlign.Left, width: 15,allowAdding:true, allowEditing: true, editType: "dropdownedit",
                                    editParams: { dataSource: $scope.projectList, fields: { value: "prjKey", text: "prjCode" } }
                                    },
                                {
                                    field: "activDesc", headerText: 'Activity', textAlign: ej.TextAlign.Left, width: 20,allowAdding:true,  allowEditing: true,  editType: "dropdownedit",
                                    editParams: { dataSource: $scope.activityList, fields: { value: "activityKey", text: "activDesc" }, text:'' }
                                },
                                { field: "description", headerText: 'Description', textAlign: ej.TextAlign.Left, width: 20 },
                                { field: "monday", headerText: 'M', textAlign: ej.TextAlign.Center, width: 7 },
                                { 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 }

                            ]                           
                            
                        });



Also an issue Im having is, while the summary displays on the first load of the page, any  time I recall the grid it displays the data but the summary disappears and I get the following error:

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

Any help would be great :-)

5 Replies

JK Jayaprakash Kamaraj Syncfusion Team March 7, 2016 09:10 AM UTC

Hi Dee,
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.



DS Dee Sheehan March 15, 2016 03:28 PM UTC

Hello,

Thank you for the reply. Would it help if I provided an example of the JSON?

[

  {

    "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 }

 

                                    ]

 

                                });



JK Jayaprakash Kamaraj Syncfusion Team March 16, 2016 06:39 AM UTC

Hi Dee,

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.



BV Bruce Van Horn July 10, 2017 09:46 PM UTC

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.



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 12, 2017 04:43 PM UTC

Hi Bruce, 

Thanks for contacting Syncfusion support. 

We need some additional information to find the cause of the issue. Could you please share us the following details with us. 

1. Grid code example(both in client and server side). 

2. Screenshot/Video to replicate the issue. 

3. How you bind data Source for the Grid. Have you used any Adaptors for binding the data Source? 

4.  An issue reproducing sample if possible or sample hosted link or replicate the issue on previously attached sample. 
 
5. Essential studio version and browser details. 

The provided information will help us to analyze and provide you the solution as early as possible. 
 
Regards, 
 
Farveen sulthana T 



Loader.
Up arrow icon