Popup Editor not working with AutoComplete

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

  • 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>
    </wj-auto-complete>

    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.
  • Replied 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
  • Replied 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
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels