How to access or update checkbox grid cells that are not in the current view.

[Jonas Czeslik]

Hello Syncfusion team, 

I am developing an angular grid that also contains a checkbox-typed column. To initialize these checkboxes I am using a localStorage variable that saves the IDs of the rows that should be checked. So I get the IDs and update the according cells by calling: 

this.gridObj.setCellValue(filterIndices[i], "selected", true);

Now, the problem is that - if I allow paging - the setCellValue() method will not work for the grid data outside the current view, although this data needs to be set as well.
To avoid this, I set the pageSize according to the dataSource length, but this is not a satisfactory solution since it should also be possible to add data, change page settings etc.

Alternatively, I tried to directly change the this.gridObj.dataSource by calling:

this.gridObj.dataSource[i].selected = false;

That again does not tick the checkbox. 

So my question is: Is there a way to set the wanted checkboxes and tick them, although they are not in the current view.

Thanks in advance!
Jonas Czeslik

[Praveenkumar Gajendiran]

Hi Jonas,

Greetings from Syncfusion support.

Query:  “Is there a way to set the wanted checkboxes and tick them, although they are not in the current view. ” 

 

Based on your query, We suspect that you want to dynamically check or uncheck the specific rows checkboxes for all the row even not in the current view . If so you can achieve your requirement by using “setRowData()” method of Grid. Please refer the below code example and sample for more information. 

Code example:  

onclick(){ 

     for(var i= 0;i < this.rowIndex.length;i++){ 

       var index = this.rowIndex[i]; // here we have get the row indexs for wanted checkboxes rows  

       var newData = this.grid.dataSource[index]; // here you can get the row data by the above rowIndex 

       newData.Discontinued = false; 

      this.grid.setRowData(newData.ProductID,newData)  

     } 

     this.grid.refresh();   // here we have refresh the grid after changing the new row data’s 

   } 

In the above code example, We have update the change checkbox values to the Grid by passing parameter as primaryKey value of row and changed row data to the  setRowData() method of Grid.

Refer the below document link for the setRowData method,

Documentation Link: https://ej2.syncfusion.com/angular/documentation/api/grid#setrowdata

Here, We have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/angular-8r3xbi-vyru4h?file=app.component.ts

Let us know if you have any concerns.

Regards,
Praveenkumar G