Flexgrid Filter new rows

Flexgrid Filter new rows

Posted by: andreas.knuth on 5 September 2018, 9:54 pm EST

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 September 2018, 9:54 pm EST

  Hi,
  
  I’m using the actual version of Flexgrid and Angular6.

  • “I have the following problem:”

  I’m applying a standard wj-flex-grid-filter (e.g. the column ‘name’ begins with ‘a’)
  
  Now I’m typing something into a new row ([allowAddNew]=“true”) into any other column e.g. ‘description’ and hitting Enter lets this row disapear (because name field is empty).

  • "My question: "

  Is there a way to let new rows not being applied to the filter definition ?

  remark:
  
  new rows don’t habe an ID field inside the JSON structure
  
  {‘name’:‘A’,‘description’:‘my A’}
  
  after saving this to the database it contains an id field and now the filter should be applied
  
  {‘name’:‘A’,‘description’:‘my A’,‘id’:‘1’}

  Andreas

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2018, 4:14 pm EST

  Hi,

  As the default behaviour whenever a row edit ends, the filter is reapplied.
  
  However, if you want to exclude some items from filter based on some condition(i.e. availability of id field) then you may overwrite the default filter function assigned to the grid’s collectionView.
  
  Please refer to the following sample which implements the same:-
  
  https://stackblitz.com/edit/angular-8sydv9?file=src%2Fapp%2Fapp.component.ts

  ~Sharad

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 7 September 2018, 2:43 am EST

  Hi Sharad,

  thanks for your response. It’s working as described. Because I need to store the filter before routing to another component I’m saving the filterDefinition inside the localstorage.

  
    filter.filterApplied.addHandler((s,e)=>{
         this.initCustomFilterFunction(filter);
         localStorage['anything'] = this.filter.filterDefinition;
    });
  
  

  The problem now is the filterApplied method will also be called on routing in fact with an empty filterDefinition before the ngOnDestroy Lifecycle hook is called in my component.

  
  <a [routerLink]="/blabla"/>
  
  

  Is there any way to suppress the filterApplied callback on destroy ?

  regards,
  
  Andreas

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 9 September 2018, 5:04 pm EST

  Hi Andreas,

  As you have already noticed that filterApplied is fired before destroying the filter with empty filter definition. It is the result of the filter trying to releasing all resources before destroying.
  
  Please use the filterChanged event to save the filter state and then you may restore it in the initialized event.
  
  Please refer to the following sample which demonstrates the same:-
  
  https://stackblitz.com/edit/angular-g8zqma?file=src%2Fapp%2Fapp.component.ts

  Regards
  
  Sharad

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 9 September 2018, 8:53 pm EST

  Hi Sharad,

  thanks for your reply. I think I’ve to also call this.initCustomFilterFunction(filter); inside the initFilter method:

  
  if(localStorage['gridFil']){
        filter.filterDefinition = localStorage['gridFil'];
        this.initCustomFilterFunction(filter);
  }
  
  

  if not it won’t be taken into account after a reload. This brings me to the more general question what’s the exact difference between these both (filterChanged , filterApplied) callbacks ?

  filterApplied isn’t called if the sourcecollection but only if the filter changes. The only difference I see is the additional call in the onDestroy cycle …

  regards,
  
  Andreas

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 10 September 2018, 4:35 pm EST

  Hi Andreas,

  I think I’ve to also call this.initCustomFilterFunction(filter); inside the initFilter method:
  
  <<<<<<<<<
  
  Thanks for pointing it out.

  This brings me to the more general question what’s the exact difference between these both (filterChanged , filterApplied) callbacks ?
  
  <<<<<<<<
  
  filterChanged event is fired as a result of user interaction with the ColumnFilterEditor whereas filterApplied is fired whenever the filter is applied with new values either as a result of user interaction with the filter editor or as the result of programmatic changes such as changing filterDefinition or calling filter.apply() method.
  
  So instead of calling initCustomFilterFunction() in initFilter() method, we should move the code to assign filterDefinition after we have added the filterApplied handler.
  
  Just for the reference, here is the updated sample:- https://stackblitz.com/edit/angular-amqqe9?file=src/app/app.component.ts

  Hope this clears.
  
  Please let us know for any further queries.

  Regards
  
  Sharad

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 10 September 2018, 10:57 pm EST

  Hi Sharad,

  thanks for the clarification. Now it becomes evident !
  
  I’ve reorganized my code according to your updated sample.

  Thanks a lot - best regards,
  
  Andreas