How to clear selected values with clear button in footer template of multi select with enableGroupCheckBox=true

[Goutham]

Hi,

 I am using multi select with enableGroupCheckBox=true  ,like below .Here ,we want clear(un check) the selected values(checked) when click on clear button which is included in footer template of same multi select component.

I was tried using multiselect.value=[],but not achieved to do that.

Please provide me some solution,

[Vinoth Kumar Sundara Moorthy]

Hi Goutham, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement and prepared the sample to place the button using footerTemplate. To uncheck the selected values, we have selectAll method and need to pass the boolean value as false as like in the below code snippet, 

 

Code Snippet 

<ejs-multiselect id='multiselect-checkbox' #muliselect [dataSource]='vegetables' [fields]='checkFields' 

                    [showClearButton]="true" [mode]='mode' [showSelectAll]='false' [enableGroupCheckBox]='enableGroupCheckBox'> 

    <ng-template #footerTemplate="" let-data=""> 

        <button ejs-button cssClass="btn-flat" (click)="unClear($event)">clear</button> 

    </ng-template> 

</ejs-multiselect> 

 

public unClear(args){ 

    this.mulObj.selectAll(false); 

} 

 

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

 

Could you please check the above details and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[Goutham]

Hi,

Thank you for your response,

In your example enableGroupCheckbox set to false,If it is set to true ,the mentioned method(selectAll(false)) not working.

Please provide me solution when it set to true.

[Vinoth Kumar Sundara Moorthy]

Hi Goutham, 

 

Good day to you. 

 

We have checked reported issue and considered it as bug. You can track the status of this bug using below link from our feedback portal.  

 

https://www.syncfusion.com/feedback/8986/selectall-public-method-not-working-properly-for-enablegroupcheckbox 

 

This fix will be included in Essential Studio 2019 Volume 3 SP1 release. Until then we would suggest you use the below solution to get rid of the reported issue, 

 

Code Snippet 

<ejs-multiselect id='multiselect-checkbox' #muliselect [dataSource]='vegetables' [fields]='checkFields' 

                    [showClearButton]="true" [mode]='mode' [showSelectAll]='false' [enableGroupCheckBox]='enableGroupCheckBox'> 

    <ng-template #footerTemplate="" let-data=""> 

        <button ejs-button class="e-selectall-parent" cssClass="btn-flat" (click)="unClear($event)">clear</button> 

    </ng-template> 

</ejs-multiselect> 

 

// To unselect all item needs to pass the boolean value as false in  selectAllItems 

public unClear(e){ 

    (this.mulObj as any).selectAllItems(false,e); 

} 

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

 

Could you please check the above details and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S