Selected Item gets removed on page reload/refresh for wj-auto-complete control

Selected Item gets removed on page reload/refresh for wj-auto-complete control

Posted by: dmunjal on 26 February 2021, 7:17 am EST

• 

  dmunjal

  • Post Options:
  • Link
    Copy

  Posted 26 February 2021, 7:17 am EST

  Hi Team

  Wijmo : v5.20173.409
  
  Angular : v7.2.0

  I am using a flex grid that has

  wj-auto-complete

  control in its rows. This control is binded to a list of countries using the [(selectedValue)] directive on a row cell.
  
  Issue 1 : On page load/refresh, the selected country gets removed by clicking on the cell which has autoComplete control.

  Our Diagnosis : We observed that this might be happening because of the two-way binding with the cell property. Since control is set to null on page load, that same null value gets binded to the property as well and hence, the previously selected country is removed.

  Workaround: To tackle this problem, we used [(ngModel)] directive to bind the property after going through the https://www.grapecity.com/wijmo/api/classes/wijmo_angular2_input.wjautocomplete.html#wjmodelpropertywjModelProperty docs. The previous issue was resolved due to this change but we found another issue using this.

  Issue 1

  • [(ngModel)] is working fine till there is a value in the selectedItem of the countries list.

  • Once the selectedItem is set to null (by removing the selection), the property to which ngModel is set to, is also assigned null value because of two-way binding.

  • Now if selectedIndex is changed to some other value, [(ngModel)] doesn’t work and remains null.

  Attaching some code snippets -

  HTML FILE

  Using [(selectedValue)]

  <wj-auto-complete
  
  [(selectedValue)]=“cell.item.Country”
  
  [itemsSource]=“countries”
  
  [displayMemberPath]=“‘Code’”
  
  [searchMemberPath]=“‘Code,Description’”
  
  [maxItems]=“countries?.length”
  
  [placeholder]=“‘Select or Type’”
  
  (gotFocus)=“wjAutoComplete.isDropdown = true”>
  
  

  Using [(ngModel)]

  <wj-auto-complete
  
  [(ngModel)]=“cell.item.Country”
  
  [itemsSource]=“countries”
  
  [displayMemberPath]=“‘Code’”
  
  [searchMemberPath]=“‘Code,Description’”
  
  [maxItems]=“countries?.length”
  
  [placeholder]=“‘Select or Type’”>
  
  

  Code Description :

  Models:

  • Country { Code: '', Description: ''}

    //Row item property

  • countries

    : List of objects with same properties as

    Country

  • I am populating this

    countries

    list from an external API call.

  Queries in a nutshell :

  1. What was the issue with [(selectedValue)] not working as expected?
  2. Why [(ngModel)] is not binding the value of the selectedItem in the control with the rowItem after it is set to null?
  3. Do we have any other workaround to solve this issue?

  Regards,
  
  Dipanshu

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 March 2021, 4:41 am EST

  Hi Dipanshu,

  We have posted the response on your support ticket(CAS-20025-V6J1G8), please refer to the same.
  
  I’m pasting the same response here too for reference:
  
  [i]I tried using the same in latest wijmo version(5.20203.766) and the issue is not replicable. Since it is already fixed in the latest version I would recommend you use the latest version and let us know if you come across any issue.
  
  You may use the following sample for reference:
  
  https://codesandbox.io/s/wijmo-angular-forked-wylsv?file=/src/app/app.component.html[/i]

  Moving forward I would request you to not create duplicate cases for the same issue.

  Regards
  
  Sharad