Chaining Wijmo Column Filters with External Filter

Chaining Wijmo Column Filters with External Filter

Posted by: jaganlal.thoppe on 17 September 2018, 11:49 am EST

• 

  jaganlal.thoppe

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 September 2018, 11:49 am EST

  Hi,

  I have an external filter (say a global filter that searches through the entire row), that i would like to chain its filtered result set with the column filter and vise versa

  For example,

  1. I have total 500 items
  2. I apply global filter and got 100 filtered items
  3. Now i would like to apply column filter on this 100 filtered items (not the entire set - i mean 500 items).

  Same use case should be applied vise versa,

  1. Total 500 items
  2. Perform column filter and say get 50 filtered items
  3. Apply global filter for the 50 filtered items

  Can someone help me to achieve this behavior on both AngularJS and Angular?

  note: BTW wijmo is instantiated from the HTML like below

  
  <wj-flex-grid ... >
      <wj-flex-grid-filter #filter ></wj-flex-grid-filter>
  </wj-flex-grid>
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 18 September 2018, 1:34 am EST

  Hi,

  FlexGridFilter uses collectionView’s filter function to filter item in a grid so if you want to customize the filter then you may handle the filterApplied event and override the grid.collectionView.filter function accordingly.
  
  Please refer to the following samples:
  
  Angular: https://stackblitz.com/edit/angular-5jspon?file=app%2Fapp.component.ts
  
  AngularJs: http://jsfiddle.net/gj603fme/

  ~Sharad

• 

  jaganlal.thoppe

  • Post Options:
  • Link
    Copy

  Posted 18 September 2018, 10:38 am EST

  Thanks a lot for the swift response Sharad.

• 

  aaron.mendez

  • Post Options:
  • Link
    Copy

  Posted 18 September 2018, 1:38 pm EST

  Thanks Sharad and Jaganlal.

• 

  jaganlal.thoppe

  • Post Options:
  • Link
    Copy

  Posted 29 October 2018, 5:44 pm EST

  Hi Sharad,

  Framework: AngularJS

  I’m using global chaining filter for one of my project and as i mentioned earlier the logic works like a charm.

  AngularJs: http://jsfiddle.net/gj603fme/

  But when i wanted to unit test that global filtering logic, i noticed,

  
  initialized="initFilter(s)"
  
  

  is not getting called from my unit test. Or in other words, when i run the unit test, i don’t see

  initFilter

  function being called.
  
  The same

  initFilter

  is getting called when it’s in the browser.
  
  I debugged the code on browser and noted

  initialized

  call back comes from

  setTimeout

  , i tried

  $timeout.flush();

  still not getting called.

  Need some help me on this.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 October 2018, 3:25 am EST

  Hi Jagan,
  
  Please handle initialized event for FlexGrid and see if it works or not so that we may confirm if the unit test is working fine or not.

  Also, please provide the modified sample with the Unit test so that we may investigate and assist you ahead.

  ~Manish

• 

  jaganlal.thoppe

  • Post Options:
  • Link
    Copy

  Posted 30 October 2018, 10:45 am EST

  Hi Manish,

  It got fixed, my bad, i had to include wijmo/controls/wijmo.grid.filter.min.js to karma.js.

  Thanks,
  
  Jagan

• 

  jaganlal.thoppe

  • Post Options:
  • Link
    Copy

  Posted 30 October 2018, 10:45 am EST

  Hi Manish,

  Thanks for the response.
  
  I haven’t modified the fiddle (sample) with the Unit Test, i have used the logic from the fiddle and using it inside our application.
  
  Also, is part of the another custom directive which our devs would use. You can imagine the scenario like this

  
    <my-custom-directive>
      -----
    </my-custom-directive>
  
  

  This boils down to

  
    <div>
       ---
       <input type="text"
                   ng-change="onFilterInput()"
                   ng-model="searchBoxFilter"
                   placeholder="Search">
       <wj-flex-grid initialized="initGrid(s,e)">
         <wj-flex-grid-filter initialized="initFilter(s)" filter-applied="filterApplied(sa)"></wj-flex-grid-filter>
           ---
       </wj-flex-grid>
    </div>
  
  

  I’m testing

  
  1.  var customDirective = createMyCustomDirective();
  2.  angular.element(document.body).append(customDirective);
  3.  scope.$digest();
  4.  $timeout.flush();
  
  5.  // Expecting `initialized="initFilter(s)"` to have been called around this time....
  
  6.  var searchBoxEl = customDirective.find('.custom-search > input');
  7.  angular.element(searchBoxEl).val('99999').trigger('input');
  8.  scope.$apply();
  
  

  Expecting

  initialized="initFilter(s)"

  to have been called after line 4 or sometimes around this time.

  I’m listening for the

  initialized

  event on the flex grid.

  Can you please shed more lights on this?

  Thanks,
  
  Jagan

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 October 2018, 11:39 pm EST

  Thanks Jagan for notifying!!!