1. Home
  2. Forum
  3. Angular - EJ 2
  4. Adding items with groupBy add items to the same group

Adding items with groupBy add items to the same group

Hello,

the problem is when I add an item like:
this.listviewInstance.addItem([data]);

When the listview component gets rendered, taking as example: https://ej2.syncfusion.com/angular/documentation/listview/how-to/add-and-remove-list-items-from-listview/

I modified the example adding the groupBy field to the data, which is local, it works showing items grouped as expected. But if I add dynamic data with the addItem method, that data with the groupBy set is added at the bottom of the list regardless of the actual groupBy value.
In the documentation I see that a second optional parameter could be the fields mapping. Even with that set the behaviour adding data is the same.

Am I missing something?
Could you advise please?

Thank you.

4 Replies 1 reply marked as answer
SM Shalini Maragathavel Syncfusion Team April 22, 2021 11:59 AM UTC

Hi Ernesto, 

Thanks for contacting Syncfusion support.

We checked your query and would like to let you know that the reported issue might occur when the added list object does not contain the groupBy field, which is the cause of your issue. To overcome the reported issue,  you need to pass the groupBy field in the added list object as demonstrated in the below code snippet, 
<div class="control-section"> 
  <div id="group-list"> 
   <ejs-listview 
     #list id='sample-list' 
      [sortOrder]="sortOrder" 
      [dataSource]="groupData" 
      [fields]="fields" 
    ></ejs-listview> 
    <button ejs-button id="btn" (click)="addItem()">Add Item</button> 
  </div> 
</div> 
 
------------------------------------------------------- 
 
export class AppComponent { 
  @ViewChild("list") 
  listviewInstance: ListViewComponent; 
  public fields: Object = { groupBy: "category" }; 
 
  constructor() {} 
  addItem() { 
    let data = { 
      text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0), 
      id: (Math.random() * 1000).toFixed(0).toString(), 
      icon: "delete-icon", 
      category: "Audi" 
    }; 
    this.listviewInstance.addItem([data]); 
  } 
}  

Please get back to us if you need further assistance. 
Regards,
Shalini M. 


Marked as answer
EY Ernesto Yoon April 22, 2021 03:02 PM UTC


Thank you for the prompt reply. Your sample works as expected, the thing is, my real scenario starts a little different and I tweak your sample to my needs and I was able to reproduce what I mention in the thread topic.

You can try this changes to reproduce it:

First, my datasource starts empty, so
public groupData: { [key: string]: Object }[] = [];//groupData;

Second, my fields mapping has one more change, comes as "name"
  public fields: Object = { text: "name", groupBy: "category" };

Finally the data object, "name" comes instead of text, I expect that the declaration in fields would work, and I added a random to the category, so I could simulate adding different group data.
    let data = {
      name: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),
      id: (Math.random() * 1000).toFixed(0).toString(),
      icon: "delete-icon",
      category: Math.random() < 0.5? "Audi":"BMW"
    };

When I tried these changes I noticed the following, as it has descending ordering, the first N times the random category results in "BMW", group and items are added as expected, as soon as the result end in an "Audi" the second group creation and the item are ok, but from that point, if you keep adding items, all of them are added in the "Audi" group, no matter what the outcome for "Category" is.

I hope you can reproduce this issue, it is more similar to my needs.

Regards,


SM Shalini Maragathavel Syncfusion Team April 23, 2021 12:28 PM UTC

Hi Ernesto, 
 
We have checked the reported issue in ListView component and considered this as bug from our end. We will include this fix in Volume 1, SP1 release which is expected to be released by mid of May, 2021. You can track the status of your reported problem through the below portal link. 
  
   
Until then we appreciate your patience.  
 
Regards, 
Shalini M. 


SM Shalini Maragathavel Syncfusion Team August 13, 2021 12:42 PM UTC

Hi Ernesto, 
  
Thanks for your patience.
 

We are glad to announce that our Essential Studio 2021 Volume 2 service pack release v19.2.0.55 is rolled out and is available for download under the following link. 
 
 
In this release, we have included the fix for this issue “While grouping is enabled, dynamic items are not added to the proper group field in the list view”. To access this fix, we suggest you to update the package to the latest version (v19.2.55).

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/19.2.48/?type=all#listview

Please, refer to the below sample link. 
  
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
Regards, 
Shalini M. 


Loader.
Up arrow icon