We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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,



3 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 19, 2019 10:13 AM UTC

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); 
} 
 
 
Could you please check the above details and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 



GO Goutham September 19, 2019 10:46 AM UTC

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.



VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 20, 2019 08:51 AM UTC

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.  
 
 
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); 
} 
 
Could you please check the above details and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon