Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 796
Nikolas Pafitis Avatar asked Sep 11 '19 14:09

Nikolas Pafitis


People also ask

How do I add a checkbox to the header of Ag grid?

Header Checkbox Selection It is possible to have a checkbox in the header for selection. To configure the column to have a checkbox, set colDef. headerCheckboxSelection=true . headerCheckboxSelection can also be a function, if you want the checkbox to appear sometimes (e.g. if the column is ordered first in the grid).

How do you get the selected row on Ag grid?

Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting a row and holding down Shift while clicking a second row will select the range. Remember Row Selection works with all frameworks (e.g. Angular and React) as well as plain JavaScript.


1 Answers

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.

like image 170
Rich Avatar answered Sep 30 '22 10:09

Rich