Popup Editor not working with AutoComplete

Popup Editor not working with AutoComplete

Posted by: muhammad.f.mehboob on 4 April 2020, 5:36 pm EST

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy

  Posted 4 April 2020, 5:36 pm EST

  Hi Team,

  I am trying to implement the following demo in my application. Everything works fine except when I try to bind the value to wj-auto-complete input element it doesn’t work.

  https://www.grapecity.com/wijmo/demos/Grid/Editing/PopupEditors/angular

  Here is my wijmo AutoComplete code.

  <wj-auto-complete #cboName
  
  [itemsSourceFunction]=“itemsSourceFunction”
  
  [displayMemberPath]=“‘Name’”
  
  [selectedValuePath]=“‘email’”
  
  [isRequired]=“true”
  
  [isEditable]=“false”
  
  [placeholder]=“”
  
  (initialized)=“initGrid(s,e)”
  
  [minLength]=1
  
  ngModel>
  
  

  In my popup editor code, I am trying to assign the selected email value to wj-auto-complete input element. I want that when I click on pencil icon on my flexGrid it should display the value from the grid to the popup editor.

  // prepare form
  
  this.editingItem = flex.rows[ht.row].dataItem;
  
  this.cboCountry.selectedItem = this.editingItem.country;
  
  this.numberSales.value = this.editingItem.sales;
  
  this.numberExpenses.value = this.editingItem.expenses;
  
  this.cboName.selectedValue = this.editingItem.email;

  It works fine when I first time click on the pencil icon. It displays everything correctly. But when I try to edit some other row, it just keep displaying the old data (i.e. it displays the old email id from the previous selected row).

  Any help would be highly appreciated.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 April 2020, 4:38 pm EST

  Hi,

  Can you please confirm whether you have updated the selected cell’s value in the result callback of the Popup:

  this.popup.show(true, (s: wjcInput.Popup) => {
            if (s.dialogResult == "wj-hide-ok") {
              // commit changes if the user pressed the OK button
              (<wjcCore.CollectionView>flex.collectionView).editItem(
                this.editingItem
              );
              this.editingItem.country = this.cboCountry.selectedValue;
              this.editingItem.sales = this.numberSales.value;
              this.editingItem.expenses = this.numberExpenses.value;
  	    this.editingItem.email = this.cboName.selectedValue;
              (<wjcCore.CollectionView>flex.collectionView).commitEdit();
            }
            // return focus to the grid
            flex.focus();
  });
  

  Refer to the sample link below for reference:

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

  In this sample, the country column uses AutoComplete.

  Regards,
  
  Ashwin

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy

  Posted 9 April 2020, 6:44 am EST

  Hi Ashwin,

  Thanks for your response. Also, how do I do the same with wj-multi-auto-complete ?

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 April 2020, 6:23 pm EST

  Hi,

  If you wish to use MultiAutoComplete, you can use the selectedItems property to bind the values of MultiAutoComplete to the column in FlexGrid:

  this.editingItem.email = this.cboEmail.selectedItems; // email should be bound to an array
  

  ~regards