Error displayed when assigning an existing value

[Toan Bui]

Hi, when I add available values to multidropdown those values show as missing(no longer +n more). Can you help me

StackBlitz: https://stackblitz.com/edit/angular-ygbas4?file=app.component.ts

[Deepak Ramakrishnan]

Hi Toan, 

 

Greetings from Syncfusion support. 

 

We would like to inform you that EJ2 Multiselect component will display the selected items as count when the items exceeds the width of the input. This is the control’s default behavior. We can customize it by overriding the following styles.  

   

[app.component.html]  

 <ejs-multiselect [changeOnBlur]='change' #multiObj width="150px" id='localData' #local [dataSource]='countries'  [mode]='mode' [fields]='localFields' [placeholder]='localWaterMark' (close)="onClose($event)" (created)="onCreate($event)" (change)='onChange($event)' (focus)='onFocus($event)' blur='onBlur($event)'></ejs-multiselect>  

[app.component.ts]  

export class AppComponent {  

  @ViewChild("multiObj")  

  public MultiObj: MultiSelectComponent;  

  public tooltip;  

  // define the JSON of data  

  public countries: { [key: string]: Object; }[] = [  

    { Name: 'Australia', Code: 'AU' },  

    { Name: 'Bermuda', Code: 'BM' },  

    { Name: 'Canada', Code: 'CA' },  

    { Name: 'Cameroon', Code: 'CM' },  

    { Name: 'Denmark', Code: 'DK' },  

    { Name: 'FranceFranceFranceFranceFranceFranceFranceFranceFranceFranceFranceFranceFranceFranceFrance', Code: 'FR' },  

    { Name: 'Finland', Code: 'FI' },  

    { Name: 'Germany', Code: 'DE' },  

    { Name: 'Greenland', Code: 'GL' },  

    { Name: 'Hong Kong', Code: 'HK' },  

    { Name: 'India', Code: 'IN' },  

    { Name: 'Italy', Code: 'IT' },  

    { Name: 'Japan', Code: 'JP' },  

    { Name: 'Mexico', Code: 'MX' },  

    { Name: 'Norway', Code: 'NO' },  

    { Name: 'Poland', Code: 'PL' },  

    { Name: 'Switzerland', Code: 'CH' },  

    { Name: 'United Kingdom', Code: 'GB' },  

    { Name: 'United States', Code: 'US' }  

  ];  

  // maps the local data column to fields property  

  public localFields: Object = { text: 'Name', value: 'Code' };  

  // set the placeholder to MultiSelect input element  

  public localWaterMark: string = 'Select countries';  

  public change: boolean = false;  

  public mode: string;  

   ngOnInit(): void {  

        this.mode = 'CheckBox';  

    }  

  public onCreate() {  

    this.tooltip = new Tooltip({  

      // default content of tooltip  

      content: 'Loading...',  

      // set target element to tooltip  

      target: '.e-list-item,.e-delim-values',  

      // set position of tooltip  

      // bind beforeRender event  

      beforeRender: this.onBeforeRender  

  

    });  

    this.tooltip.appendTo('body');  

  }  

  onBeforeRender(arg) {  

    var result = document.getElementById("localData").ej2_instances[0].dataSource;  

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

      this.content = arg.target.textContent;  

      this.dataBind();  

      break;  

    }  

  }  

  onClose(e) {  

  this.tooltip.close();  

}  

 onChange(args){  

      (this.MultiObj as any).viewWrapper.style.display = "none";  

        (this.MultiObj as any).delimiterWrapper.style.display = "block";  

    }  

    onFocus(args){  

       (this.MultiObj as any).viewWrapper.style.display = "none";  

    }  

    onBlur(args){  

         (this.MultiObj as any).viewWrapper.style.display = "none";  

    }  

}  

[app.component.css]  

.e-multiselect.e-input-group, .e-multiselect.e-float-input {  

  word-wrap: break-word !important;  

}  

 

   

Please find the sample from the below link.  

 

Sample Link: https://stackblitz.com/edit/angular-ajfmqb-x8trhb   

 

Thanks, 

Deepak R.