WjAutoComplete stop defaulting to first value on collectionView refresh

WjAutoComplete stop defaulting to first value on collectionView refresh

Posted by: robert.p.webb94 on 8 January 2020, 11:34 am EST

• 

  robert.p.webb94

  • Post Options:
  • Link
    Copy

  Posted 8 January 2020, 11:34 am EST

  I have a scenario where the collection view will be updated depending on what data is loaded and if the WjAutoComplete is already initialized it will default to the first index of the CollectionView.

  This is not the functionality I want, I have looked at other “solutions” and all I see is unneeded workarounds that required referencing the WjAutoComplete in the .ts file. this would be fine if I did not need to repeat this several times which will just become a pain.

  Is there any way to stop it indexing to the first element when the collection view gets refreshed, I do not want to reference it in the typescript and manually do it, should I just use another solution?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 2:31 am EST

  Hi Robert,

  Could you please share the code snippet that shows how the data is updated? If you are directly assigning a CollectionView as the itemsSource, then you may simply set the text property to null when the itemsSourceChanged event is fired:

  <wj-auto-complete (itemsSourceChanged)="ac.text = null" #ac [itemsSource]="source" [displayMemberPath]="'country'"></wj-auto-complete>
  

  https://stackblitz.com/edit/ckkyne-u5r7he

  Regards,
  
  Ashwin

• 

  robert.p.webb94

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 4:17 am EST

  So I have an endpoint that returns ids, and I have a original list of these ids but I want to filter them down.

            this.codes= this.originalCodes.filter(o => data.map(c => c.id).includes(o.id));
  
  

  This works fine, but I also want to set the value to the “default” id, which is whatever the endpoint returns, using formControls.

  
            this.idControl.setValue(data.defaultId);
              this.idControl.updateValueAndValidity();
  
  

  This, does not work and makes the AutoComplete default to the first index, I want to default it to whatever value the endpoint is telling it to be. It seems like this cannot be done. This also fires off an event when subscribing to the value changes setting the idControl value to null.

  
              <wj-auto-complete class="form-control form-control-wijmo" #idac [itemsSource]="codes"
                [ngClass]="validateControl('id')" [displayMemberPath]="'code'"
                [selectedValuePath]="'id'" [delay]="0" [minLength]="1" [placeholder]="'Select....'"
                [selectedIndex]="-1" [maxItems]="50" [isRequired]="false" formControlName="id"
                (selectedIndexChanged)="onAutoCompleteChange(idac ,'id')" >
              </wj-auto-complete>
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 10 January 2020, 3:09 am EST

  Hi,

  Simply setting the value of the FormControl object will not update the value in AutoComplete. You will need to explicitly find the whole item with the defaultId and set the value of the AutoCompelete control. This will also update the value of formControl automatically. Please refer to the code snippet below and the sample attached:

  this.dataSvc.getData().subscribe(res => {
        this.source = new wjcCore.CollectionView(res.data);
        var item = this.source.items.find(i => i.id === res.defaultId);
        if(!item) {
          return;
        }
        this.source.currentItem = item;
  });
  

  ~regards

  src.zip