How to do edit the custom or user value chips in multiselect dropdown?

[Ganesh G M]

I need to edit custom user value chips in multiselect dropdown  like google email to address filed.

[Sevvandhi Nagulan]

Hi Gaetano, 

Greetings from Syncfusion support. 

Using template support in the MultiSelect part you can achieve the requested requirement. You can edit the value by placing the input element in valueTemplate. Refer to the code below, 

[app.component.html] 

       <ejs-multiselect #sample id='sample-list3' (open)='onOpen($event)' [dataSource]='sportsData' [mode]='mode' [fields]='fields' [placeholder]='waterMark' [allowCustomValue]="true" (chipSelection)='chipSelection($event)' > 

              <ng-template #valueTemplate let-data> 

                <div> 

                    <div class='e-input-group'> 

                      <input type="text" value={{data.Game}} class='e-chip-input'> 

                    </div> 

                </div> 

            </ng-template> 

            </ejs-multiselect> 

[app.component.ts] 

onOpen(args){ 

       if (this.isSelected) { 

            args.cancel = true; 

            this.inputEle && this.inputEle.focus(); 

        } 

        this.isSelected = false; 

    } 

    chipSelection(e){ 

      this.inputEle = e.target.closest('.e-chips.e-chip-selected').querySelector('.e-chip-input'); 

        this.isSelected = true; 

    } 

Sample: https://stackblitz.com/edit/angular-tabsgz-tvckqz?file=app.component.ts 

Regards, 

Sevvandhi N 

[Ganesh G M]

I cant editable after selected all values in dropdown .KIndly look into this

[Sevvandhi Nagulan]

Hi Ganesh, 

We resolved the reported issue by calling the source method when all the values are selected. Since when event will be triggered at least one liElement in the popup element. Refer to the code below, 

    onOpen(args){ 

        if (this.isSelected) { 

             args.cancel = true; 

          setTimeout(()=>{ 

             this.inputEle && this.inputEle.focus(); 

           }, 5); 

         } 

         this.isSelected = false; 

     } 

     chipSelection(e){ 

       this.inputEle = e.target.closest('.e-chips.e-chip-selected').querySelector('.e-chip-input'); 

         this.isSelected = true; 

         if((this.multiselectObj.dataSource as any).length == this.multiselectObj.value.length){ 

           (this.multiselectObj as any).onPopupShown(); 

         } 

     } 

Also, you can avoid the hover class background color by using below css code. 

.e-multi-select-wrapper .e-chips.e-chip-selected:hover { 

  background: none; 

} 

Sample: https://stackblitz.com/edit/angular-tabsgz-wmja8s?file=app.component.css 

Regards, 

Sevvandhi N 

[Ganesh G M]

Hi ,

        I facing another issue .if I edit chips value is not updated in this.multiselect.value?.Kindly look into this.

[Sevvandhi Nagulan]

Hi Ganesh, 

We would like to inform you that using valueTemplate support in the MultiSelect component we have met the requested requirement. So, the value edited will not be updated to the component. Hence, we suggest that the edited value to be obtained from the class 'e-chip-input,' as stated in the example below. 

onChange(e){ 

  this.editedValue = []; 

  let chipInput = document.getElementsByClassName('e-chip-input'); 

  for(var i=0;i<chipInput.length;i++){ 

   this.editedValue.push((chipInput[i] as any).value); 

  } 

} 

 

 

Screenshot:  

 

Sample: https://stackblitz.com/edit/angular-tabsgz-xgqcaw?file=app.component.ts 

Regards, 

Sevvandhi N