WjMultiSelect - adding custom filter code

WjMultiSelect - adding custom filter code

Posted by: seaninglis on 22 December 2021, 6:27 pm EST

• 

  seaninglis

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 December 2021, 6:27 pm EST

  Hi,

  I’m using the WjMultiSelect filter in an Angular app, bound to an array of objects and using the built-in filter box - nice default behaviour out of the box.

  However, I’d like to be able to extend the filtering logic applied with something more specific.

  For instance, if the filter term entered is “red kettle”, I’d like to include any items that have the words “red” and “kettle” anywhere in the list entry - or some more complex filter behaviour.

  It there an event or callback function I can hook into that would let me do this?

  My fallback position is to use a separate input box and filter the source data array itself - easy enough - but I want to make sure I’m not missing an event or property? The built-in filter box is also very neatly aligned, so I’d like to use that if possible.

  Thanks.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 24 December 2021, 2:05 am EST

  Hello,

  You may handle the input event on MultiSelect filter and perform your custom filtering by overriding the multiselect collectionView’s filter function. Please refer to the code snippet and sample link below demonstrating the same:

  
    theMultiSelect.isDroppedDownChanged.addHandler((s, e) => {
      if (s.isDroppedDown && s.showFilterInput) {
        let filterEle = s.dropDown.querySelector("[wj-part='filter']");
        filterEle.addEventListener(
          'input',
          (e) => {
            let filterText = e.target.value;
            theMultiSelect.collectionView.filter = null;
            // add your custom filtering logic below
            theMultiSelect.collectionView.filter = (item) => {
              if (!item.country.toLowerCase().includes(filterText)) {
                return;
              }
              return item;
            };
            e.stopImmediatePropagation(); // stop the default filtering
          },
          true
        );
      }
    });
  }
  
  

  Sample link: https://stackblitz.com/edit/js-enuxsv?file=index.js

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 26 December 2021, 3:33 pm EST

  Hi Sonu

  Great, I’ve adapted this and it was exactly the start I was after, thanks.

  Is this something I could have discovered myself if my searching had been better, or did it need a bit of inside knowledge?

  Ta

  Sean

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 27 December 2021, 11:55 pm EST

  Hello,

  You can refer to the following links below to get more information about the controls:

  Wijmo controls API:
  
  https://www.grapecity.com/wijmo/api/

  Wijmo controls Doc:
  
  https://www.grapecity.com/wijmo/docs/Topics/Input/MultiSelect/MultiSelect

  You can also refer to our Wijmo forum which is publically available to find a related issue.

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 29 December 2021, 9:44 am EST

  Ok, thanks.

  As an aside, we’ve just sprung for a developers license, and the quality of support on here really helps in the decision

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 30 December 2021, 3:42 am EST

  Hello,

  We are glad that we were able to help you. Let us know if you have any further queries.

  Regards