How can I select all checkboxes from outside the grid

Question

I have a grid with a column checkbox.I want to be able to select all checkboxes, from outside the grid, when I click another checkbox. I try this but it doesn't seems to work.Thank you in advance!

Sujith Kumar Rajkumar · Answer

Hi Dana, 
 
Greetings from Syncfusion support. 
 
You can achieve your requirement of performing the header checkbox’s check all/uncheck all action externally by using the Grid’s checkSelectAll internal method as demonstrated in the below code snippet, 
 




onClick() { 
    this.gridObj.selectionModule.checkSelectAll() 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-8944i9?file=app.component.ts 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Dana Sarghe · Answer

Hello,Thank you for your answer, but still doesn't work with checkbox.()Works only with button.()And my requirements are whith a checkbox, as I said before.

Sujith Kumar Rajkumar · Answer

Hi Dana, 
 
The previously shared solution is not working for your case because the EJ2 Checkbox does not have click event. So we suggest you to use the change event instead to achieve your requirement. 
 
We have modified the previously shared sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-8944i9-kmefag?file=app.component.html 
 
API: https://ej2.syncfusion.com/angular/documentation/api/check-box/#change 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Dana Sarghe · Answer

Thank you!This solution works just fine!

Sujith Kumar Rajkumar · Answer

Hi Dana, 

You’re welcome. We are glad to hear that your query has been resolved. 

Regards, 
Sujith R

Dana Sarghe · Answer

Hello,One more thing...:)If the SelectAll checkbox is checked

(the one that's outside of the grid)

, and after that one of the row in the grid is unchecked, I want the SelectAll checkbox to be in the "indeterminate" state, like the one in the grid header.Now it remain checked.Thank you!

Sujith Kumar Rajkumar · Answer

Hi Dana, 
 
You can achieve your requirement of customizing the external checkbox state based on the Grid header check state by using the Grid’s rowSelected and rowDeselected events to modify the check state(by comparing the selected record length to the local data source length) as demonstrated in the below code snippet, 
 




// Grid’s rowSelected event handler 
rowSelected(args) { 
    this.updateExternalCheckState(); 
} 
 
// Grid’s rowDeselected event handler 
rowDeselected(args) { 
    this.updateExternalCheckState(); 
} 
 
// Function for handling external header state 
updateExternalCheckState() { 
    if (this.gridObj.getSelectedRecords().length === this.gridObj.dataSource.length) { 
        // Condition executes when all the records are selected 
        this.checkObj.checked = true; 
    } else if (this.gridObj.getSelectedRecords().length === 0) { 
        // Condition executes when all the records are un-selected 
        this.checkObj.checked = false; 
    } else { 
        // Condition executes when one or more records are selected 
        this.checkObj.indeterminate = true; 
    } 
} 
 
We have modified the previously shared sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-8944i9-vxqxo6?file=app.component.ts 
 
API: https://ej2.syncfusion.com/documentation/api/grid#rowselected 
        https://ej2.syncfusion.com/documentation/api/grid#rowdeselected 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Dana Sarghe · Answer

Hello,I have a problem with "lenght" property.What can I do?

Pavithra Subramaniyam · Answer

Hi Dana, 
 
We suggest setting the type for the dataSource as “Object[]” to overcome the issue. Please refer to the below code example for more information. 
 




updateExternalCheckState() { 
    if ( 
      this.gridObj.getSelectedRecords().length === 
      (this.gridObj.dataSource as Object[]).length 
    ) { 
      this.checkObj.checked = true; 
    } else if (this.gridObj.getSelectedRecords().length === 0) { 
      this.checkObj.checked = false; 
    } else { 
      this.checkObj.indeterminate = true; 
    } 
  } 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S

Dana Sarghe · Answer

Thank you!Exactly what I needed!

Sujith Kumar Rajkumar · Answer

Hi Dana, 
 
Thanks for the update. We are glad to hear that your query has been resolved. 
 
Regards, 
Sujith R