JS Error on Grid - Grouping

Question

AngularJs JQ 3.2.1SF 15.0.3.33I've set up 4 grids nearly identical to this setup:

Venkatesh Ayothi Raman · Answer

Hi Brian, 

Thanks for using Syncfusion products. 

We have analyzed the reported issues. We suspect the issues may be due to one of the following reasons. 
1.       usage of special characters(like hyphen,asterisk etc.,) in the Grid ID 
2.       When grouping a column(not present in the dataSource) initially 
3.       missed out to refer any script file in the sample 
4.       maybe due to the values present in the dataSource. 
So, please ensure the above cases in your sample. 
If you are still facing the issues, we request you to share your view code corresponding to rendering grid. Also, please share the first array values from the JSON Object that you have assigned as the grid dataSource .   
We went through your code example that you have shared for us and found that you are using custom adaptor (KTAdaptor) in your sample. So, could you please provide code example of that. 
The provided information will be very helpful for us to analyze the issue and provide you response accordingly. 
For your convenience, we have created a simple grid sample in AngularJS with wepAPiAdaptor and the same can be downloaded from the below location. 
Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/AngularJS-458959531 

Regards, 
Venkatesh Ayothiraman.

BK · Answer

> usage of special characters(like hyphen,asterisk etc.,) in the Grid ID

That's disenheartening - we use GUIDs for a lot of pkeys, but not in this data set.

> missed out to refer any script file in the sample

Fairly sure I've got them all:

The KTAdaptor is as follows:

        var KTAdaptor = new ej.ODataAdaptor().extend({
            processQuery: ej.ODataAdaptor.prototype.processQuery,
            processResponse: function (data, ds, query, xhr, request) {
                return { result: data.Items, count: data.Count };
            }
        });

Column configuration:

        $scope.columnsLoc = [
            { field: "Id", isPrimaryKey: true },
            { field: 'Number', headerText: 'Room Number' },
            { field: 'Name' },
            { field: 'Department' },
            { field: 'Volume' },
            { field: 'Perimeter' },
            { field: 'Area' },
            { field: 'CeilingHeight', headerText: 'Ceiling Height' },
            { field: 'Occupancy' },
            { field: 'BaseFinish', headerText: 'Base Finish' },
            { field: 'CeilingFinish', headerText: 'Ceiling Finish' },
            { field: 'WallFinish', headerText: 'Wall Finish' },
            { field: 'FloorFinish', headerText: 'Floor Finish' },
        ];

Example data:

{"Items":[{"PhaseID":0,"Volume":0.0,"Perimeter":121.59187753447458,"LevelId":311,"Area":439.13144792628009,"Number":"101","Name":"Vest. 101","Id":177056},{"PhaseID":0,"Volume":0.0,"Perimeter":334.97326813903868,"LevelId":311,"Area":3521.8363031346776,"Number":"102","Name":"Lobby 102","Id":177304},{"PhaseID":0,"Volume":0.0,"Perimeter":172.4698162581862,"LevelId":311,"Area":1581.8705043568209,"Number":"121","Name":"Cafeteria 121","Id":177305},{"PhaseID":0,"Volume":0.0,"Perimeter":63.208661417322489,"LevelId":311,"Area":239.05188947530473,"Number":"122","Name":"Prep/Dish 122","Id":177306},{"PhaseID":0,"Volume":0.0,"Perimeter":39.60629921259828,"LevelId":311,"Area":91.091871159435883,"Number":"124","Name":"Dry Storage 124","Id":177307},{"PhaseID":0,"Volume":0.0,"Perimeter":31.601049868766253,"LevelId":311,"Area":61.250266033212483,"Number":"125","Name":"Electrical 125","Id":177308},{"PhaseID":0,"Volume":0.0,"Perimeter":92.1653543307083,"LevelId":311,"Area":446.71951440226246,"Number":"123","Name":"Conference 123","Id":177309},{"PhaseID":0,"Volume":0.0,"Perimeter":56.612856635501075,"LevelId":311,"Area":165.32744042574981,"Number":"127","Name":"Office 127","Id":177310},{"PhaseID":0,"Volume":0.0,"Perimeter":54.899934383201881,"LevelId":311,"Area":169.08945649457897,"Number":"126","Name":"Admin 126","Id":177311},{"PhaseID":0,"Volume":0.0,"Perimeter":40.874667659123133,"LevelId":311,"Area":104.41295380610218,"Number":"128","Name":"Storage 128","Id":177312},{"PhaseID":0,"Volume":0.0,"Perimeter":31.051833013453717,"LevelId":311,"Area":60.015976477668346,"Number":"129","Name":"Toilet 129","Id":177313},{"PhaseID":0,"Volume":0.0,"Perimeter":64.342191601049862,"LevelId":311,"Area":203.62713642093991,"Number":"130","Name":"Stair 130","Id":177314}],"Count":91}

Venkatesh Ayothi Raman · Answer

Hi Brian, 

Thanks for the update. 

We went through your code example that you have shared for us and found that you are referring the Field’s which is not mentioned in the Data source. So, if we grouping that column then reported issue occurs. For example, If you are grouping the column “Occupancy” which is not in data source initially then the reported issue occurs. This is the cause of this issue. 
Could you please confirm whether corresponding field is occurred or not in the data source while Grouping?  

Please let us know if you have any further assistance on this. 

Regards, 
Venkatesh Ayothiraman.

BK · Answer

I am grouping on columns with data and this error still occurs.

Venkatesh Ayothi Raman · Answer

Hi Brian, 

Thanks for the update. 

We were unable to reproduce the reported issue at our end and reported issue will occur only on following scenario, 
1.      usage of special characters(like hyphen,asterisk etc.,) in the Grid ID  
2.       When grouping a column(not present in the dataSource) initially  
3.       missed out to refer any script file in the sample  
4.       maybe due to the values present in the dataSource.  
We have also prepared a sample for your convenience which can be download from following link, 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Odata1841274609 


If you still face the same issue, then could you please provide following details? 
1)      Share the issue reproducing scenario. 
2)      Essential Studio version details. 
3)      Share the First array values from your JSON object which you have assigned as grid data source. 
4)      Share issue video. 
5)      Please confirm whether you are facing this issue in above mentioned scenario’s. 
6)      A sample if possible or modified the given sample as issue reproducible. 
 


Regards, 
Venkatesh Ayothiraman.

BK · Answer

PFA a reduced case. Would love to know what i'm doing wrong.Attachment: SyncFusionReproduction_24c7faa5.7z

Mani Sankar Durai · Answer

Hi Brian, 

We have checked your sample and we are able to reproduce the reported issue. We found that you have used custom adaptor and not processed the data in processResponse correctly to bind the data in grid.  
So please refer the below code example which helps to solve your issue.  




var KTAdaptor = new ej.ODataAdaptor().extend({ 
            processQuery: ej.ODataAdaptor.prototype.processQuery, // reused process query from json adaptor 
            processResponse: function (data, ds, query, xhr, request) { //used to process the response from server 
                  data = { d : {results: data.Items, __count: data.Count} }; 
                  return  this.base.processResponse.apply(this, [data, ds, query, xhr, request]);  //return as this.base.processResponse.apply which helps to bind athe data based on grouping etc.., 
             } 
        }); 
 
  
We have also modified your sample and that can be downloaded from the below link 
Link: http://www.syncfusion.com/downloads/support/forum/133515/ze/ASyncFusionReproduction_24c7faa5-1545325939 

Please let us know if you need further assistance. 
Regards, 
Manisankar Durai.

BK · Answer

This solves the issue. Thank you.

Venkatesh Ayothi Raman · Answer

Hi Brian, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

 Regards,  
Venkatesh Ayothiraman.