Grouping Not Maintained on Data Refresh

[Dominic]

Hello,

Experiencing a problem with the pivot table. In short, I have set up a table that contains a single column that is a date, I am then setting it to automatically group to Years and Months. This works fine.

However, if I update the data, this grouping is not maintained when the data is refreshed. I have tried two methods:

1. Updating a class property this.pivotData that is bound to the pivot table - in this instance the grouping is removed all together and the raw dates are used instead
2. By updating the dataSourceSettings.dataSource property of the element, accessed via @ViewChild as is suggested in the docs - https://ej2.syncfusion.com/angular/documentation/pivotview/how-to/refresh-the-field-list/ - in this instance, the grouping by month remains, but the year is removed

I have created a StackBlitz demonstrating this - https://stackblitz.com/edit/angular-cjnrw6

You can use the "Update Data" button to test point 1 above (calls the updateData() method) and the "Update data like the docs" which triggers the callback that is set up on that button during ngOnInit().

Any pointers on what I can do to rectify this would be great!

[Sivamathi Natarajan]

Hi Dominic, 

 

Thanks for contacting Syncfusion support. 

 

You need to clear the already created groupingdFields to update the grouping option while refresh the datasource. Meanwhile, we have prepared a sample for your reference. Kindly check the below sample link. 

 

Code Example: 

   this.button.element.onclick = (): void => {  

 

      this.pivotGridObj.dataSourceSettings.dataSource = [ 

        {BranchName:"Miboo",DateCreated:"1/22/2020",Value:100,AgentName:"Jordon Brinsford",ID:11}, 

        {BranchName:"Pixonyx",DateCreated:"5/5/2019",Value:100,AgentName:"Riccardo Lingley",ID:12}, 

        {BranchName:"Jabberstorm",DateCreated:"4/19/2019",Value:100,AgentName:"Kimberley Kelberer",ID:13}, 

        {BranchName:"Gigazoom",DateCreated:"5/5/2019",Value:100,AgentName:"Latia Delagnes",ID:14}, 

        {BranchName:"Babbleblab",DateCreated:"8/13/2019",Value:100,AgentName:"Donna Ferrarello",ID:15}, 

        {BranchName:"Photobug",DateCreated:"7/2/2019",Value:100,AgentName:"Emerson Lettson",ID:16}, 

        {BranchName:"Abata",DateCreated:"4/22/2020",Value:100,AgentName:"Tome Stratten",ID:17}, 

        {BranchName:"Camido",DateCreated:"8/21/2019",Value:100,AgentName:"Allyson Yoskowitz",ID:18}, 

        {BranchName:"Dynazzy",DateCreated:"8/4/2019",Value:100,AgentName:"Lesley Gaskin",ID:19}, 

        {BranchName:"Avavee",DateCreated:"9/25/2020",Value:100,AgentName:"Aurora Eplett",ID:20}, 

      ] 

       this.pivotGridObj.engineModule.groupingFields = {}; 

    }; 

 

 

 

Sample Link: https://stackblitz.com/edit/angular-amekas?file=src%2Fapp%2Fhello.component.ts 

 

We hope the above sample meets your requirements. 

 

Regards, 

Sivamathi.