javascriptangularjsag-grid

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


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.


Solution

  • 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