ag-grid set the column header to be a checkbox,and do the select all or deselect all column,other than only groups

Question

when using ag-grid, I want to set the first column header to be a checkbox,and do the select all or deselect all column action on all rows other than only groups.

Jerol

#71927873 Maybe this will be of some help – Gaslit

Answer 1

In gridOptions:

angularCompileHeaders: true

Where you are defining your columns, define the first column as such:

{
   field: 'RowSelect',
   headerName: ' ',
   checkboxSelection: true,
   suppressMenu: true,
   suppressSorting: true,
   headerCellRenderer: selectAllRenderer
 },

In that file define the renderer:

function selectAllRenderer(params) {
    var cb = document.createElement('input');
    cb.setAttribute('type', 'checkbox');

    var eHeader = document.createElement('label');
    var eTitle = document.createTextNode(params.colDef.headerName);
    eHeader.appendChild(cb);
    eHeader.appendChild(eTitle);

    cb.addEventListener('change', function (e) {
        if ($(this)[0].checked) {
            params.api.selectAll();
        } else {
            params.api.deselectAll();
        } 
    });
    return eHeader; 
}

Please note that the creator is currently working on making this a feature, but this is the current work-around. Check here for updates and a more generic non-angular version: selectAll Feature Discussion

Curch

Can u provide a fiddle or plnkr for this. I am trying this with ag-grid-vue, but not successful – Apocalypse

The creator updated the framework to have an option for this now, so it is no longer necessary to follow my custom advice. See the discussion link I posted above and look at "ceolter commented on Feb 8, 2017 this item is now done. the next release (coming days) will have header checkbox selection." – Curch

Answer 2

Should anyone come here looking for answers this feature is already in ag-grid, just place headerCheckboxSelection: true in your column's definition.

See docs here

Gilbertegilbertian

The suggestion in this answer will put a checkbox in the column header. To also put it in every row, include "checkboxSelection: true" as well. There's a grid option (rowSelection) that determines if you can select more than one row at a time with the checkboxes. – Isham

Answer 3

dict(
  label="Vehicle Name", 
  fieldname="vehicle_name", 
  fieldtype="Data",
  width=200,
  headerCheckboxSelection=True, 
  headerCheckboxSelectionFilteredOnly=True, checkboxSelection=True
),

This on field level will help give checkbox selection on first field, also this headerCheckboxSelectionFilteredOnly definition helps select only filtered rows when checked and un-select only filtered rows when unchecked.

ref : https://www.ag-grid.com/angular-data-grid/row-selection/#select-everything-or-just-filtered

Calyptra