How to clear selected items programmatically

[Ervin van der Merwe]

Hi,

I would like to clear the selected items programmatically from multiselect in Angular.

I have a parent and child multiselect, and when the parent item is removed, I need the child multiselect items to remove as well. 

Is this possible?

[Sureshkumar P]

Hi Ervin, 

 

Greetings from Syncfusion support. 

 

We can reset the multiselect component value based on the parent component value change using change event.  

 

Please find the code example. 

[sample.html] 

<ejs-multiselect id='multiselect-checkbox1'  #checkbox1 [dataSource]='cities' 

            [placeholder]='checkWaterMark' [fields]='checkFields'  [popupHeight]='popHeight' (change)="OnChangeFirst($event)" 

             [showDropDownIcon]='true' [(ngModel)]="valCity"> 

             

        </ejs-multiselect> 

 

[sample.ts] 

 

OnChangeFirst(args){ 

    this.mulObj2.value = []; 

    this.mulObj3.value = []; 

  } 

 

We have created the sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-kkp8be-pkokh3?file=app.component.html  

 

Regards, 

Sureshkumar P 

[Ervin van der Merwe]

Thanks, that was simple.

How would I remove only a specific item from the list programmatically, not all items? There is an addItem() function but no removeItem.

At the moment I remove items from the dataSource and use value property to set the selected items. That works

Thanks again for the support.

[Sureshkumar P]

Hi Ervin, 

 

Thanks for your update. 

 

We did not provide support for removeItem. But we can remove the specific item using splice method. 

 

To know more about removing the specific item. Please refer the How-to section documentation: https://ej2.syncfusion.com/angular/documentation/drop-down-list/how-to/remove-item/  

 

Regards, 

Sureshkumar P 

[Ruben]

¿How can I deselect  a specific item? (we are using chec) 

[Berly Christopher]

Hi Ervin, 

  

We can achieve the requested requirement by remove the particular item from the value property with help of splice() method as mentioned in the below code example. 

  

 ngAfterViewInit() { 

    document.getElementById('btn').onclick = () => { 

      var multiObj = document.getElementById('multiselect-checkbox'); 

      multiObj.ej2_instances[0].value.splice( 

        multiObj.ej2_instances[0].value.indexOf('AU'), 

        1 

      ); 

      multiObj.ej2_instances[0].refresh(); 

    }; 

  } 

 

  

Please find the sample from the below link. 

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

  

Regards, 

Berly B.C