I am working with AG-Grid’s server-side row model (SSRM) in a React application and facing a challenge with efficiently implementing row grouping. My goal is to send all necessary data from the backend initially, and then use this data for grouping on the client side without making additional API calls when a user expands a group.
Current Implementation:
I am currently sending a flat list of data from the server with a structure where each item knows its parent, like so:
[
{
"id": "item1",
"parentJobSiteId": "site1",
"modelName": "Model A",
"otherDetails": "Details A"
},
{
"id": "item2",
"parentJobSiteId": "site1",
"modelName": "Model B",
"otherDetails": "Details B"
},
{
"id": "item3",
"parentJobSiteId": "site2",
"modelName": "Model C",
"otherDetails": "Details C"
}
]
Goal:
I want to group these items by parentJobSiteId without additional backend interactions when expanding/collapsing group nodes.
Challenges Faced:
- When expanding a group, AG-Grid seems to make a call to the backend
for the children of the group node, which I want to avoid since all
data is already present client-side. - Configuring AG-Grid to handle all data upfront for grouping and
avoiding unnecessary server requests upon expanding nodes.
Questions:
- How can I configure the AG-Grid server-side row model to use the
data already provided for grouping without making additional API
requests? - Is there a way to pre-load all necessary data into the grid and
manage grouping expansions purely on the client side?
Here is a snippet of my current grid setup:
const gridOptions = {
rowModelType: 'serverSide',
serverSideStoreType: 'partial',
treeData: true,
autoGroupColumnDef: {
headerName: 'Job Site',
field: 'parentJobSiteId',
cellRenderer: 'agGroupCellRenderer',
},
columnDefs: [
{ field: 'parentJobSiteId', rowGroup: true },
{ field: 'modelName' },
{ field: 'otherDetails' }
],
// Other grid options...
};