how to allow user to enter a custom value as in multiselect option

[Raj Maheshwari]

Hello team

while reviewing the syncfusion multiselect dropdown for angular 

We have requirement to use multiselect with last option where `user can type` in free form text

for example below ->

Can you please suggest how we can achieve this.

[Raj Maheshwari]

Hello team

to clarify more - we want to provide ability to choose last option and user type himself for whatever he want the option value to be.

[Deepak Ramakrishnan]

Hi Mohit, 

 

Greetings from Syncfusion support. 

 

Yes we can achieve your requirement using ‘allowCutomValue’ property , which will adds the custom value (if the typed value not present in the datasource ) to the popup on selection . Kindly refer the below sample and api documentation for your reference. 

 

[app.component.html] 

 

<ejs-multiselect id='custom-list' [dataSource]='gameList' [allowCustomValue]=true [mode]='box' [placeholder]='waterMark' [fields]='fields'></ejs-multiselect> 

 

 

 

 

Sample Link : https://stackblitz.com/edit/angular-wqqp1n?file=app.component.html  

 

Demo Link : https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multi-select/custom-value  

 

API documentation : https://ej2.syncfusion.com/angular/documentation/api/multi-select#allowcustomvalue  

 

Thanks, 

Deepak R. 

  

[Raj Maheshwari]

Hello Deepak

Thank you

I wonder, if this can be done on checkbox multi-selection drop down

https://ej2.syncfusion.com/angular/demos/#/material/multi-select/checkbox

Thanks

Mohit

[Deepak Ramakrishnan]

Hi Mohit, 

 

Thanks for your update. 

 

We would like to inform you that Multiselect with checkbox mode does not allow to type value in the input element. It does allow only to select and deselect values and also you can filter the list of values and this is component’s intended behavior. If you want to enter custom value, we suggest you multiselect template option to achieve your requirement . In that we have used No records template to display the button in it and added the item using  ‘addItem’ method in the click event . Kindly refer the below code and sample for your reference. 

 

 

[app.component.html] 

 

<div id="multiselect-sample" class="control-section"> 

  <div class="control-styles"> 

    <h4>Custom Values</h4> 

    <ejs-multiselect id="custom-list" #custom [dataSource]="gameList" [allowCustomValue]="true" [mode]="box" 

      (filtering)="onFiltering($event)" [placeholder]="waterMark" [fields]="fields"> 

      <ng-template #noRecordsTemplate> 

        <div id="nodata"> 

          No matched item, do you want to add it as new item in list? 

        </div> 

        <button (click)="addNewItem($event)" class="e-control e-btn"> 

          Add New Item 

        </button> 

      </ng-template> 

    </ejs-multiselect> 

  </div> 

</div> 

 

 

[app.component.ts] 

 

  public addNewItem = () => { 

    // get the typed characters 

    let customValue: string = ((this 

      .multiObj as any).filterParent.getElementsByClassName( 

      'e-input' 

    )[0] as HTMLInputElement).value; 

    // make new object based on typed characters 

    let newItem: { [key: string]: Object } = { 

      Game: customValue, 

      Id: customValue 

    }; 

    // new object added to data source. 

    (this.multiObj.dataSource as Object[]).push(newItem); 

    // pass new object to addItem method. 

    this.multiObj.addItem(newItem); 

    (this.multiObj as any).listData.push(newItem); 

  }; 

 

 

 

 

Sample Link: https://stackblitz.com/edit/angular-zyxwy5-5gjdxd?file=app.component.html  

 

 

Thanks, 

Deepak R. 

[Raj Maheshwari]

Thank you Deepak

We will review this 

Thanks again for your help and support

Mohit

[Deepak Ramakrishnan]

Hi Mohit, 

 

 

Thanks for your update. 

 

We will wait until hear from you . 

 

 

Thanks, 

Deepak R.