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 select the multiple row at initial render in Angular Grid


I have grid with checkboxes. I want to render that grid with multiple rows selection

This is Grid, but selection is not happening.

ts code:-

ShowSelectedRoleRows(UserRoleTags) {
    let indexs: number[] = [];
    if (UserRoleTags != null) {
      for (let i = 0; i < UserRoleTags.length; i++) {
        (this.RoleGrid.dataSource as object[]).forEach((sdata, index) => {
          if (sdata["Id"] === UserRoleTags[i]['RoleId']) {
      //this.selectedRowIndex = [0, 1, 2];

Kindly do needful.

1 Reply 1 reply marked as answer

VS Vignesh Sivagnanam Syncfusion Team July 20, 2020 04:32 AM

Hi Namita 

Thanks for contacting Syncfusion support. 

Query : Rendering grid with multiple rows selection 
Based on your query, we found that you like to render the grid with the multi-row selection at initial rendering. To achieve your requirement we suggest you use the selectRows method in dataBound() event to select the multiple rows in the grid while rendering. Here, we have prepared a sample based on your requirement. 

Please refer the below code example and sample for your reference. 
public dataBound(args): void { 
      const  indexs: number[] = [];  
      const EmployeeID = 'EmployeeID'; 
        (this.grid.dataSource as object[]).forEach((sdata, index) => {  
        if (sdata[EmployeeID] == 4) { 
In the above sample we have selected the row when the EmployeeID value is 4. 

Screenshot for your reference :  
Kindly get back to us if you have further queries.  

Vignesh Sivagnanam 

Marked as answer
Live Chat Icon For mobile
Up arrow icon