ejmultiselect

[Prangya Tiwari]

how to clear selected items on button click of multiselect() in syncfusion

and how to achieve clear functionality inside code.

[Gopi Govindasamy]

Hi Prangya,   

  

Thanks for using Syncfusion EJ2 components.   

  

We have checked your requirement for “multiselect component to clear the select value”. We have provided public method for “selectAll(false)” to unselect all the selected items. Also, prepared simple sample based on your requirement and attached API document for your reference.    

  

API Document Link: http://ej2.syncfusion.com/15.4.23/documentation/multi-select/api-multiSelect.html?lang=typescript#selectall   

  

Sample Link: http://plnkr.co/edit/FqbTBIBwt2T0EK1b97FF?p=preview     

  

Please let us know if you have any concern, we will happy to assist you.   

  

Regards,   

Gopi G.   

[Prangya Tiwari]

Hi,

Thank you for the suggestion.It is really helpful.

I have tried the same but it is not working.

[Gopi Govindasamy]

Hi Prangya, 

Thanks for the update. 

 

We have checked your scenario for the button click to remove the all selected item in MultiSelect component. Please ensure the below highlighted code included your application.  

let msObject: MultiSelect = new MultiSelect({ 

    // bind the sports Data to datasource property 

    dataSource: sportsData, 

    // maps the appropriate column to fields property 

    fields: { text: 'sports', value: 'id' }, 

    // set the value to Multiselect 

    value: ['game1', 'game2'], 

    //set the placeholder to MultiSelect input 

   placeholder:"Select games" 

});  

//render the component 

msObject.appendTo('#select'); 

 

let button: Button = new Button(); 

 

// Render initialized Button. 

button.appendTo('#element'); 

 

document.getElementById('element').addEventListener("click", function(event) { 

  msObject.selectAll(false); 

} 

 

Still you are facing same issue, please provide us some additional details like error screenshot or any console error thrown or replication video, so this would be helpful for us to proceed further. 

 

Please let us know if you have any concern, we will happy to assist you. 

Regards, 

Gopi G. 

[Prangya Tiwari]

Hi,

Thanks .here i am writing both html and .ts file together,i have done same thing as described above but still facing problem.

Again Thank you for the above example.

.html 

<ej-multiselect #marketRemote id='market'[dataSource]='marketData' [(ngModel)]="_marketData"

         [fields]='marketFields' [placeholder]='marketPlaceHolder'

         [allowCustomValue]=true sortOrder='Ascending'

         (customValueSelection)="customValMarket($event)" (select)="marketSelect($event)"

         (removed)="marketDeselect($event)">

 </ej-multiselect>

<div class="panel-heading">Add Client

      <a rel='nofollow' href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>

</div>

.ts

 @ViewChild('marketRemote') marketInstance: MultiSelect;

 public closeNav():void{

 this.marketInstance.selectAll(false);

 }

[Gopi Govindasamy]

Hi Prangya, 

We have checked your code snippet and you have incorrectly take the MultiSelect component instance. We have achieved sample based on your requirement and refer the code snippet.   

HTMl 

 

<ej-multiselect #sample id="list" [dataSource]="countryData" [fields]="fields"  [placeholder]="watermark"></ej-multiselect> 

 

App.ts 

 

import { Component, ViewChild } from '@angular/core'; 

import { MultiSelectComponent,SelectEventArgs } from '@syncfusion/ej2-ng-dropdowns'; 

import { Query, DataManager, Predicate } from '@syncfusion/ej2-data'; 

 

export class AppComponent { 

    constructor() { 

    } 

    //define the country MultiSelect data 

    public countryData: { [key: string]: Object }[] = [ 

        { Id: 'Game1', Game: 'American Football' }, 

        { Id: 'Game2', Game: 'Badminton' }, 

        { Id: 'Game3', Game: 'Basketball' }, 

        { Id: 'Game4', Game: 'Cricket' }, 

        { Id: 'Game5', Game: 'Football' }, 

        { Id: 'Game6', Game: 'Golf' }, 

        { Id: 'Game7', Game: 'Hockey' }, 

        { Id: 'Game8', Game: 'Rugby' }, 

        { Id: 'Game9', Game: 'Snooker' }, 

        { Id: 'Game10', Game: 'Tennis' } 

    ]; 

     // maps the appropriate column to fields property 

    public fields: Object =  { text: 'Game', value: 'Id' }; 

        // set the placeholder to MultiSelect input element 

    public watermark: string = "Select countries";  

    @ViewChild('sample') 

    public multiObj: MultiSelectComponent;  

    public closeNav():void{  

      if(this.multiObj.value !== null && this.multiObj.value.length > 0){ 

      this.multiObj.selectAll(false); 

      } 

    }  

} 

Sample Link: http://plnkr.co/edit/UswxJyvISolUtrF3uHYT?p=preview  

  

Please let us know if you have any concern, we will happy to assist you.   

Regards, 

Gopi G. 

 

[Prangya Tiwari]

Thank you,

it is working for me.Thank you again.

[Gopi Govindasamy]

Hi Prangya, 

Most Welcome. Please get back to us if you require any further assistance on this 

Regards, 

Gopi G.