Add new Row when filter applied

Add new Row when filter applied

Posted by: frederickmatthew.mozer on 10 September 2020, 4:19 pm EST

• 

  frederickmatthew.mozer

  • Post Options:
  • Link
    Copy

  Posted 10 September 2020, 4:19 pm EST

  I’m using Angular 8 and version 5.20201.664 of wijmo with the flexgrid.

  I have no issue adding a new row to the flexgrid but when i have a filter applied, it will not allow it. Is this a known constraint? Any workarounds?

  I’ve seen in some other posts, people have set refreshOnEdit = false and even canSort to false but neither of these worked.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 September 2020, 3:44 am EST

  Hi frederickmatthew.mozer,

  The refreshOnEdit property should work in your case. You have to set this property in the CollectionView instance of the FlexGrid instead of the FlexGrid’s property. Please refer to the sample link below:

  https://stackblitz.com/edit/angular-9cutm9

  In this sample, apply a filter on the country column, add a new row, and observe that it does not get filtered out automatically.

  Regards,
  
  Ashwin

• 

  frederickmatthew.mozer

  • Post Options:
  • Link
    Copy

  Posted 11 September 2020, 9:18 am EST

  When i add a new row, i am adding to the top of the grid. This does not work.

  (pseudocode)

  addNewRow(…){
  
  wjcCore.CollectionView.refreshOnEdit = false;
  
  wjcCore.CollectionView.sourceCollection.splice(0, 0, flexgridRow);
  
  wjcCore.CollectionView.refresh();
  
  }

• 

  frederickmatthew.mozer

  • Post Options:
  • Link
    Copy

  Posted 11 September 2020, 10:08 am EST

  The only way i was able to get this to work was to…

  (gridFilter: wjcGridFilter.FlexGridFilter;)

  gridFilter.clear();
  

  But this isn’t a good solution since it removes the filter icons from the grid.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 September 2020, 2:04 am EST

  Hi,

  The refreshOnEdit property only works if you are adding the new item using CollectionView. In your scenario, you are directly adding the new item to the sourceCollection and calling the refresh method to update the new item. As soon as you will call the refresh method, the new item will be filtered out.

  If you wish to prevent the filtering then you will need to use the addNew method of the CollectionView but it will only add the item at the last position.

  There is one solution you can try. Use the addNew method to add the item at the last position and when the filter is applied again, move the item to the first position. Please refer to the sample link below and let us know if this fulfills your requirements:

  https://stackblitz.com/edit/angular-xfjkfq

  ~regards

• 

  frederickmatthew.mozer

  • Post Options:
  • Link
    Copy

  Posted 14 September 2020, 2:12 pm EST - Updated 3 October 2022, 1:31 pm EST

  So this is the solution i need - however the code does not move the row to the top of the grid. the rest of it is perfect.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 September 2020, 11:26 pm EST

  Hi,

  It will only move the row to the top when you will apply or clear the filter after adding the row. You can verify the same with the following steps:

  • "

  • “Apply value filter on the Country column.”

  • “Click on the Add new button and observe that the new row is added at the bottom.”

  • “Clear the filter from the country column and the row will move to the top.”

  "

  Let me know if you still have any doubts.

  ~regards