Header checkbox selection doesn't work when using Server Side Data source

As the title suggests, I'm using ag-grid with Angular, and I use a custom class that implements IServerSideDatasource for fetching data from API with rowModelType set to 'serverSide'.

The problem is that when I set headerCheckboxSelection and checkboxSelection to true, checkbox select appears next to each row but it doesn't appear in the Header, whereas it works perfectly fine when I use Client Side Row Model type.

Can anyone help?

Solution

Header checkbox selection is not a supported feature of ag-grid's Server Side row model. You should be getting a console log message notifying you of this.

Please see the documentation for more information.

Feature                     Client-side   Infinite    Server-side     Viewport
...
Row Selection               ✔             ✔            ✔              ✔
Header Checkbox Selection   ✔             ✕            ✕              ✕

If you want to implement this functionality, you will need to manually handle this functionality using a custom header component. I've done it before (albeit, using Infinite Row-Model, not Server-side), but you need to keep track of a few things...

Total list of rows currently checked.
Has the 'check all' been selected?
Whether to show indeterminate checkbox (some, but not all rows selected).
When getting rows from the server, you need to see if check all button has been pressed and update that row's selection accordingly.

I used an Angular Service to keep a central location for tracking all this information, and just relied on the header-component for displaying the checkbox.

As you see, it is a non-trivial task, and there is no easy solution.