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.
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