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

Goutham

Asked On September 18, 2019 04:06 PM UTC

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,

Reply | Reply with quote

Vinoth Kumar Sundara Moorthy [Syncfusion]

Replied On 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);

}

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

Reply | Reply with quote

Goutham

Replied On 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.

Reply | Reply with quote

Vinoth Kumar Sundara Moorthy [Syncfusion]

Replied On 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.

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147650	Sep 18,2019 04:06 PM UTC	Sep 20,2019 08:51 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US