Angular 4: Loosing focus from flexgrid detail when filtering data

Angular 4: Loosing focus from flexgrid detail when filtering data

Posted by: ofiraf on 19 November 2018, 6:20 am EST

• 

  ofiraf

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 November 2018, 6:20 am EST

  Here is a situation: we have an autocomplete and flexgrid over the same data, obviously autocomplete is used to filter/find/select the specific record within the grid. Grid has a pagination and rows have details with HTML (input field). If I use the autocomplete and search for “test” for example, I’m forwarded to the correct page where the item is located. But, when I’m opening the details mode and try to insert a value within the input, I’m loosing focus over the item and thrown back to the initial state (full list of items and first page). I can work around the issue if I use built in filter (filter in the grid). This workaround available in old wijmo version but not the new one. Anyway, I’d like to upgrade to the new version but this behavior is unacceptable. Can you please advise? Thanks

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 20 November 2018, 2:23 am EST

  The issue is arising because of the way auto-complete and detail-row are designed to work.
  
  Please allow me to explain, auto-complete assigns a filter function on the collectionView to search and filter items in the collections, now when we search something in the auto-complete, items are filtered in the collection and since the same collectionView is shared by the grid here, the effect of filtering is also visible in the grid. Everything is fine up to this point, now the issue arises when we focus on the detail row, then the current item for grid’s collectionView changes to null(since detail row is not an actual row in the source collection), now because our collectionView is shared by both auto-complete and grid, this change is also reflected in the auto-complete and auto-complete clears the filter which ultimately brings us to the starting point.
  
  To resolve the issue to need to assign different collectionView for each and sync the changes(if required) between the two.
  
  Please refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/angular-n3xtsk?file=src%2Fapp%2Fapp.component.ts

  ~Sharad

• 

  ofiraf

  • Post Options:
  • Link
    Copy

  Posted 21 November 2018, 2:40 am EST

  I see… I tried to implement your example on the grid with paging and it doesn’t work, or works only on first page. Can you please help?
  
  Thanks

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2018, 2:35 am EST

  We tried the above approach for a grid with paging and it seems to work fine.
  
  Update sample for paging: https://stackblitz.com/edit/angular-hjowar?file=src%2Fapp%2Fapp.component.ts
  
  Following are the steps we followed to test:
  
  • change grid page to 3.
  
  • Input 8 in the AutoComplete
  
  :
  
  → AutoComplete should show a list of Items whose Id contains ‘8’
  
  → The Same filter should be applied on the grid and only items with ‘8’ in their Id should be visible
  
  :
  
  → AutoComplete shows a list of Items whose Id contains ‘8’
  
  → The Same filter is applied on the grid and only items with ‘8’ in their Id are visible

  Would you please have a look at the above sample and let us know if you are having some different observations or if you expect a different behaviour

  ~Sharad