How to set default value to wj-auto-complete control?

How to set default value to wj-auto-complete control?

Posted by: ramu on 25 June 2019, 4:04 am EST

• 

  ramu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 June 2019, 4:04 am EST

  Hi,

  I have used Wijmo 5.20171.282 version.

  My application used Angular 2.X version.

  I want select particular item in the auto complete control. Right now its selected first one item at default.

  In html file:
  
  <wj-auto-complete #formAutoComplete class=“form-control pageContentSearch”
  
  [placeholder]=“‘Enter a keyword or select a form’”
  
  [itemsSource]=“autoCompleteFormData”
  
  [displayMemberPath]=“‘FormName’”
  
  [selectedValuePath]=“‘FormDetailID’” (selectedIndexChanged)=“onFormSelectedIndexChanged(formAutoComplete)”>
  
  

  In ts file:

  autoCompleteFormData: wjcCore.CollectionView;
  
  bind()
  
  {
  
  …
  
  …
  
  this.autoCompleteFormData = new wjcCore.CollectionView(result);
  
  }

  Thanks,
  
  Ramu

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 25 June 2019, 7:19 am EST

  ello,

  You may set the selectedIndex property of AutoComplete control to the index which you want to be selected by default. Please refer to the code snippet below:

  <wj-auto-complete #formAutoComplete class="form-control pageContentSearch" 
  [placeholder]="'Enter a keyword or select a form'"
  [itemsSource]="autoCompleteFormData"
  [displayMemberPath]="'FormName'" 
  [selectedValuePath]="'FormDetailID'" (selectedIndexChanged)="onFormSelectedIndexChanged(formAutoComplete)"
  [selectedIndex]="5">
  </wj-auto-complete>
  

  You may also refer to the sample below:

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

• 

  ramu

  • Post Options:
  • Link
    Copy

  Posted 25 June 2019, 8:27 am EST

  Hi Abhishek,

  Thanks for your reply.

  I want to assign dynamically selected index property in type script file.

  How to do it?

  Thanks,
  
  Ramu

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 26 June 2019, 2:22 am EST

  You may use the selectedIndex in the TS file as you did in the HTML file. Please refer to the code snippet below:

  HTML

  <wj-auto-complete #ac [itemsSource]="source" displayMemberPath="country" (initialized)="initAutoComplete(ac)"></wj-auto-complete>
  

  TS

  initAutoComplete(ac: wjcInput.AutoComplete) {
      ac.selectedIndex = 5;
  }
  
  

  You may also refer to the sample below:

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

• 

  ramu

  • Post Options:
  • Link
    Copy

  Posted 26 June 2019, 4:10 am EST

  Thanks Abhishek.

  It works fine. But I want while button click, I’ll open a popup window and invoke the API method and retrieve the forms and bind into autocomplete control then assign the selected index/selected value.

  But it won’t work. Always selected default first item.

  In TS:

  
  @ViewChild('formAutoComplete') formAutoComplete: wjcInput.AutoComplete;
  
  
  this.adminService.getAllForms()
              .subscribe((result: any) => {               
                  this.autoCompleteFormData = new wjcCore.CollectionView(result);
  this.formAutoComplete.selectedIndex = 5;
  //this.formAutoComplete.selectedValue = this.viewFormDetailID;
   },
              errors => {
                 ...
              });
  
  

  Note:
  
  In console window, I got an error. “selectedIndex” is not found

  Thanks,
  
  Ramu

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 27 June 2019, 3:30 am EST

  Hi Ramu,

  The issue is arising because you are assigning the selectedIndex directly after setting the new source. Now the problem is this new source is not assigned to the autoComplete yet, it will be assigned to the autocomplete after the next change detection cycle. So to fix the fix what you could do is instead of setting the selectedIndex property on the autoComplete, set the current item on the collectionView itself and autoComplete will pick up this change when this new source gets assigned to the autoComplete. Please refer to the following code snippet and the sample demonstrating the same:

  @ViewChild('formAutoComplete') formAutoComplete: wjcInput.AutoComplete;
  
  
  this.adminService.getAllForms()
              .subscribe((result: any) => {               
                  this.autoCompleteFormData = new wjcCore.CollectionView(result);
                  this.autoCompleteFormData.currentItem = this.autoCompleteFormData.items[5]; 
  //this.formAutoComplete.selectedIndex = 5;
  //this.formAutoComplete.selectedValue = this.viewFormDetailID;
   },
              errors => {
                 ...
              });
  

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

  Regards