Deselecting Ag-Grid select-all checkbox when the row data is refreshed via an outside button

Question

I am using a normal ag-grid with checkboxes in the first row of the grid to allow a user to select a row. I also have a select all checkbox in the header of the grid, which allows a user to easily select all checkboxes and rows with one click. I created the select-all checkbox with this code:

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

My users would like the option to include a "Refresh Data" button on his or her own that would allow the user to refresh the data in the grid, essentially passing fresh row data into the component. It would only re-load the row data. The problem here is that because it is only refreshing the row data, the select-all-checkbox stays checked while the rest of the rows are refreshed and un-checked. Is there a way to un-check the select-all-checkbox in the header when the row data is refreshed? Any event that can be listened to there?

My grid with checkboxes looks really similar to this: https://cloud.githubusercontent.com/assets/4819263/7002796/abb1e6da-dc50-11e4-9fde-3abd8de19261.png

Thanks for any help

Basavaraj Basavaraj · Accepted Answer · 2017-01-09T05:12:31

try to add id or ng-model to checkbox and after loading new data to grid using id check all checkbox true,check below code ---

function selectAllRenderer(params) {
    $scope.selectAll=true;
    var cb = document.createElement('input');
    cb.setAttribute('type', 'checkbox');
    cb.setAttribute('id','selectAll');
    cb.setAttribute('ng-model','selectAll');
    cb.setAttribute('ng-click','selectAllCheckbox(selectAll)');

    var eHeader = document.createElement('label');
    eHeader.setAttribute("style","display:inline");
    var eTitle = document.createTextNode(params.colDef.headerName);
    eHeader.appendChild(cb);
    eHeader.appendChild(eTitle);

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


$scope.selectAllCheckbox = function(checked){
    if(checked===true){
        $scope.selectAll = false;
    }else{
        $scope.selectAll=true;
    }
}

after loading grid data try to add below code--

j$('#selectAll').checked=true;

or

using angularjs there is ng-model and set true after loading data.

Deselecting Ag-Grid select-all checkbox when the row data is refreshed via an outside button

1 Answers