FlexGrid Multi Filter

FlexGrid Multi Filter

Posted by: jason.brandt on 11 July 2018, 3:09 am EST

• 

  jason.brandt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 July 2018, 3:09 am EST

  I need to have a user enter in the column filter textbox (NOT the advanced filter popup) multiple string entries delimited by a semicolon.

  I can get this to work, but then the other columns are no longer able to work for filtering.

  In the this.cvPaging.filter = (item:any) => {} … method, I have the following code as an example of a filter that will accept a “;” separated list from EntityID, and filter on multiple values correctly, but will never filter on EntityName…

  How can I solve this?

  
  var filterValEntityIDList = this.gridColumnFilterList.EntityID.split(';');
  
  if(filterValEntityID){   
  	for(var x = 0; x < filterValEntityIDList.length; x++){
              if (item.EntityID.toLowerCase().indexOf(filterValEntityID.toLowerCase()[x]) > -1) {
                  return true;
              }                                           
          } 
  
  	return false;
  }
  
          var filterValEntityName = this.gridColumnFilterList.EntityName;
  
          if(filterValEntityName){   
              if (item.EntityName.toLowerCase().indexOf(filterValEntityName.toLowerCase()) < 0) {
                  return false;
              }                                              
          }
  
  

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 11 July 2018, 3:11 am EST - Updated 3 October 2022, 11:26 am EST

  Also note, I am using the wjcInput.AutoComplete as the column filter…

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 11 July 2018, 10:36 pm EST

  Hi,
  
  Please refer to the following sample which implements custom filters along with FlexGridFilter:-
  
  https://stackblitz.com/edit/angular-s8uzyr?file=app%2Fapp.component.ts

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 12 July 2018, 2:49 am EST

  Thank you, I am taking a look at this sample now…

  NOTE: When using the example above the textbox that contains the user entered text clears when the Advanced Filters “clear” button is clicked - however, the grid does not clear and update its filtered set until you click into the textbox again.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 12 July 2018, 8:14 pm EST

  Hi,
  
  We are indeed sorry for the issue in the last sample.
  
  It was due to the fact that FlexGridFilter does not refresh the collection when no filter is active so to fix this you may call refresh on collectionView manually.
  
  //add this line of code

  filter.grid.collectionView.refresh();
  

  after this

  this.resetCustomFilter(filter.grid.columns[args.col].binding);
  
  in filterChanging() method.

  You may also refer to following updated sample:-
  
  https://stackblitz.com/edit/angular-opvrzh?file=app/app.component.ts

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 13 July 2018, 5:30 am EST

  Adding that line of code allows the grid to refresh now.

  However, it may have introduced a new problem (or perhaps it uncovered an existing problem)

  = the function ```
  
  filterChanging(filter,args){
  
  var ed=filter.activeEditor;

  
  filter.activeEditor  is always undefined (does not exist on the filter object) .  This prevents the rest of the code from working = 
  

  if(ed){
  
  ed.hostElement.addEventListener(“mousedown”,(e)=>{

              if(e.target.getAttribute('wj-part')=="btn-clear"){   
                      
                  this.resetCustomFilter(filter.grid.columns[args.col].binding);
                  filter.grid.collectionView.refresh();
              }
          });
      }
  

  
  
  Why would activeEditor not be defined?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 15 July 2018, 10:28 pm EST

  Hi,
  
  filter.activeEditor is not always defined, it’s value is updated with the correct ColumnFilterEditor when the user opens a filterEditor by clicking on filter icon.
  
  You may confirm that activeEditor is not always undefined by opening the above sample and clearing the filter by clicking on the clear button and check the console to get a ‘clear’ message(defined in if() condition to check if activeEditor exists).
  
  More info on ColumnFilterEditor:-
  
  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.filter.ColumnFilterEditor.Class.html

  Regards

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 16 July 2018, 5:06 am EST

  In this case line 81 of the example = https://stackblitz.com/edit/angular-opvrzh?file=app/app.component.ts

  In my own code is always null = even when there is text in the inputbox to be cleared.

  Therefor ```
  
  ed.hostElement.addEventListener(“mousedown”,(e)=>{

  
  
  the HTML appears to be the same as the example = 
  

  <wj-flex-grid-filter #filter (filterApplied)=“filterApplied(filter)” (filterChanging)=“filterChanging(filter,$event)” (initialized)=“initFilter(filter)”>

  
  And the filterChanging method appears to be the same = 
  
  

  filterChanging(filter,args){

      var ed=filter.activeEditor;
      
      if(ed){
          ed.hostElement.addEventListener("mousedown",(e)=>{
          
              if(e.target.getAttribute('wj-part')=="btn-clear"){   
                      
                  this.resetCustomFilter(filter.grid.columns[args.col].binding);
                  filter.grid.collectionView.refresh();
              }
          });
      }
      
  }
  

  
  So I am not sure why filter.activeEditor is always null...

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 16 July 2018, 11:16 pm EST

  Hi,
  
  We are sorry but we are unable to replicate the issue at our end.
  
  Everything seems fine in the code snippet provided, something else might be causing this issue.

  Can you please share a small sample or edit the one provided above to reflect your problem so that we can investigate it further.

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 18 July 2018, 10:13 am EST

  This is as close as I can get (but the stackblitz does not work)

  https://stackblitz.com/edit/angular-uczapb?file=app%2Fgridconfigmenu.component.ts

  (note: i changed the data source and know it will not provide the correct data as I am unable to create a dataset / api for this example at this time)

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 18 July 2018, 9:09 pm EST

  Hi,
  
  After resolving the errors and getting the provided sample to work, we are still unable to replicate the issue.

  Here is the link to updated sample:-https://stackblitz.com/edit/angular-ezjcmk?file=app%2Fapp.component.ts
  
  In the above sample, check line 171, it has a console message that will be printed when clear button is clicked.
  
  Click on the clear button of FlexGridFilter and check the console, you should be able to get the message which shows that activeEditor is not null in all cases.

  Please confirm this behaviour.

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 19 July 2018, 6:17 am EST

  After reviewing the latest example you posted I can see no functional difference in the code. And the example works as you say it does. So I am at a loss as to why our page is not clearing the column input filter. I will try a new fresh page (outside of angularJS wrapper) and see if that helps.

  We are serving this set of controls inside a tab which is a angularJS tab, so maybe there is a conflict happening there.

  Either way, you are rockstars and were incredibly helpful.

  Thank you so much for the help, this will aid us in our growing use of wijmo

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 July 2018, 4:05 am EST

  Hi,
  
  We are glad to hear that we were able to help you and our users.
  
  Please let us know if trying with a fresh page outside angularjs wrapper works for you to resolve the issue.

  Also feel free to ask for any further queries if you have!!!

  Happy Coding!!!

  ~Manish