ag-grid client side rowgrouping on SSRM

I want to implement server side pagination on ag-grid. I followed the documentation and completed it as follows.

this.gridApi.setServerSideDatasource({
      getRows: (params) => {
        console.log('[Datasource] - rows requested by grid: ', params);
        console.log(params.request);

        this.fnService
          .getCompleteFeatureList(
            Number(params.request.endRow / 50)
          )
          .subscribe(
            (data: any) => {
              console.log(Number(params.request.endRow / 50));
              
              if (Number(params.request.endRow / 50) === 1 && data.data.length === 0) {
                
                alert(
                  'No results found'
                );
              } else {
                this.rowData = data.data;
                const feature_count = data.data.length;
                params.successCallback(data.data, feature_count );
              }
            },
            (error: HttpErrorResponse) => {
              alert('Something went wrong! Please retry your search');
            }
          );

It came up fine and performed an API call on every new page.

Now I want to implement rowgroups on the first column and need all groups to be open by default. I went through the documentation and found that server-side row grouping performs an API call for every row group expansion. That is not what I want.

I want client side rowgrouping. Is this possible?

Solution

It makes a request to the server only for the first time. If you expand a group row, you should see a server request. But if you collapse the expanded group row and open it up again, there will not be an extra server request because the relevant data is already fetched.

No, you cannot use grouping feature as if you use Client Side Row Model after you set your rowModelType as 'serverSide'.

In Client Side Row Model, all data will be uploaded onto the grid at once. As to Server Side Row Model, grouped data will be lazy-loaded.

Client-Side

This is the default. The grid will load all of the data into the grid in one go. The grid can then perform filtering, sorting, grouping, pivoting and aggregation all in memory.

Server-Side

The Server-Side Row Model builds on the Infinite Row Model. In addition to lazy-loading the data as the user scrolls down, it also allows lazy-loading of grouped data with server-side grouping and aggregation. Advanced users will use Server-Side Row Model to do ad-hoc slice and dice of data with server-side aggregations.

Do you really need Server Side Row Model?

If you are not sure, use default Client-Side. The grid can handle massive amounts of data (100k+ rows). The grid will only render what's visible on the screen (40 rows approximately, depending on your screen size) even if you have thousands of rows returned from your server. You will not kill the grid with too much data - rather your browser will run out of memory before the grid gets into problems. So if you are unsure, go with Client-Side Row Model first and only change if you need to. With Client-Side, you get sorting, filtering, grouping, pivoting and aggregation all done for you by the grid. All of the examples in the documentation use the Client-Side model unless specified otherwise.