Wijmo FlexGrid DropDown - Search based on "Contains"

Wijmo FlexGrid DropDown - Search based on "Contains"

Posted by: fernando.passaia on 16 June 2021, 9:04 am EST

• 

  fernando.passaia

  • Post Options:
  • Link
    Copy

  Posted 16 June 2021, 9:04 am EST - Updated 3 October 2022, 1:33 pm EST

  Hello. I’ve tried to research It on Forum, Web, and also on the Examples, but can’t find anything related to what I’m trying to do. In the “auto-complete” component, I have a list of all Countries. When I input a partial keyword (like “nite”) it will bring me all the items that “contain” the keyword on it: United Kingdom, United States, United Arab Emirates…

  But when I have a Dropdown inside the FlexGrid, It will only search using a “StartsWith” strategy, so with the same data source, I have to type “United” If I want to see the same countries. Is there any way to make the search works the same way It is on the auto-complete one? Picture in attachments.

  

  1698×654 59.3 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 June 2021, 9:06 am EST

  Hi Fernando,

  This is expected behavior as the dropdown will only show the items present in the list with starting search text. If you wish to have the same functionality of autoComplete control in your grid dropdown I would recommend you to use AutoComplete instead of dropDown. You can use the editor property of the FlexGrid’s column to add the autoComplete for that column.

  Please refer to the demo demonstrating the same: https://www.grapecity.com/wijmo/demos/Grid/Editing/CustomEditors/angular

  Regards,
  
  Ashwin

• 

  fernando.passaia

  • Post Options:
  • Link
    Copy

  Posted 22 June 2021, 4:52 pm EST

  Ashwin - thank you too much for your answer.
  
  I followed your instructions - to use an AutoComplete, and It works. But I’m facing a strange bug that I can’t find why: the AutoComplete load the items - I could see them in the options, but after filtering It closes the dropdown quickly.

  I had completely checked my source code, to see If I don’t have anything, any event being called, any blur, nothing at all. I also tried to find out some examples on the web using this coding approach - the one you’ve sent me is an HTML one, I need it thought code.

  Do you know what’s happening? I’m adding a video and an image of the code I’m using (I took It from Wijmo docs > editor). Do you have some examples of how to implement It using this coding approach, instead of doing It on the HTML file? Thank you mate. AutoComplete.zip

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 11:23 pm EST

  Hi Fernando,

  I am working on this and will update you as soon as possible.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 24 June 2021, 4:37 am EST

  Hi Fernando,

  The issue has occurred because you have passed the dataMap collectionView into the itemsSource of the AutoComplete control, to resolve the issue you may pass the country data directly into the AutoComplete itemsSource. Please refer to the code snippet:

  products = getProducts();
    productMap = new DataMap(this.products, 'id', 'name');
  
    initializedGrid(grid: FlexGrid) {
      grid.columns.forEach((col: any) => {
        const map = col.dataMap;
        if (map) {
          col.editor = new AutoComplete(document.createElement('div'), {
            itemsSource: this.products,
            displayMemberPath: map.displayMemberPath,
            selectedValuePath: map.selectedValuePath
          });
        }
      });
    }
  
  

  You may refer to the sample demonstrating the same:

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

  Let us know if that’s works for you.

  ~regards