Intermittent Issue with Checkboxes; Sometime Not Displaying in ag-Grid

we are experiencing an intermittent issue with checkboxes not displaying in ag-Grid on our website. The checkboxes are sometimes missing from the grid, Sometime it's not like all the rows are not having checkboxes, some rows are displayed with checkbox and some rows are not. and we are unable to determine the cause.

but this happens very rarely, if we are navigating to this screen 10 times in a day, then out of 10 times only one time we observe this kind of issue.

For example: If we have 10 rows of data in the grid. Sometimes, the 4 rows out of 10 are not having checkbox and 6 rows out of 10 are having checkbox. because of which the 4 rows are getting misaligned and shifting to left.

If anybody having any idea about what is going wrong. please share their insights.

Here are the details of my setup :


in UI we are using angular 7 and node 14.x and using ag-grid of version - "ag-grid-community": "~23.2.1", "ag-grid-enterprise": "^23.2.1",

the steps I have taken to troubleshoot the issue:

1. Grid Configuration:

I have enabled row selection with checkboxes using the "checkboxSelection" property in the column definitions. Row selection is set to 'multiple' in the grid options.

1. Data Loading:

I am loading the grid data asynchronously and have introduced a delay using "setTimeout" to ensure the data is fully loaded before rendering the grid.

1. CSS:

I have inspected the CSS to ensure there are no conflicting styles that might be hiding the checkboxes. I have scoped styles to specific classes and IDs to avoid unintended side effects.

Here is an excerpt from my components where I configure the grid:


<ag-grid-angular style="width: 100%; height: 500px"
[rowData]="gridData"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowSelection]="rowSelection"
[isRowSelectable]="isRowSelectable"
(gridReady)="GridReady($event)"
></ag-grid-angular>


in this code, we are passing "rowSelection" as "multiple" and "isRowSelectable" we are passing as undefined.

this.defaultColDef = {
flex: 1,
minWidth: 120,
wrapText: true,
autoHeight: true,
sortable: true,
resizable: true,
headerCheckboxSelectionFilteredOnly: true,
sortingOrder: ['asc', 'desc'],
headerCheckboxSelection: isFirstColumn,
checkboxSelection: isFirstColumn,
menuTabs: ['filterMenuTab']
};


function isFirstColumn(params) {
var displayedColumns = params.columnApi.getAllDisplayedColumns();
var thisIsFirstColumn = displayedColumns[0] === params.column;
return thisIsFirstColumn;
}

Continue reading...