[filtering] Checkbox header to select/unselect all rows about ag-grid HOT 59 CLOSED

this item is now done. the next release (coming days) will have header checkbox selection.

from ag-grid.

Waiting for 2016, I manage it by using headerCellRenderer
in the columnDef, add headerCellRenderer: headerCellRendererFunc

then

function headerCellRendererFunc(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) {
                $scope.gridOptions.api.selectAll();
            } else {
                $scope.gridOptions.api.deselectAll();
            } 
        });
        return eHeader; 
    }

from ag-grid.

@ceolter Is this the most requested feature you have?
Implementing it took me and everyone who saw @smwbis 's comment like 5 minutes.
And even though we have a work around, I think it would be nice to have this as a part of the grid.

from ag-grid.

yup!

if you want to only use the checkbox, there is an option
'suppressRowClickSelection' on grid options, mentioned in the docs.

On 28 April 2015 at 19:19, Kwan Lee [email protected] wrote:

I see, you are right. I need to hit the checkbox accurately.

—
Reply to this email directly or view it on GitHub
#46 (comment).

The information transmitted is intended only for the person or entity to
which it is addressed and may contain confidential and/or privileged
material. Statements and opinions expressed in this e-mail may not
represent those of the sender. Any review, retransmission, dissemination or
other use of, or taking of any action in reliance upon, this information by
persons or entities other than the intended recipient is prohibited. If you
received this in error, please contact the sender immediately and delete
the material from any computer.

from ag-grid.

Thanks @ainasiart. I am actually already putting this on a column that is just the checkbox and nothing else. My users wanted to be able to sort on items that were checked. However, I put an external filter to only show selected rows and that gives them what they need. So I have suppressed the sorting on the checkbox column now and it works great.

Also, for my use, I only want the "select all" to select all the filtered rows, not all of them in the data set, so I tweaked your code for that. Figured I'd share in case it helps anyone else.

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

        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) {
                _.forEach(vm.gridOptions.api.getModel().rowsAfterFilter, function (node) {
                    node.setSelected(true);
                });
            } else {
                _.forEach(vm.gridOptions.api.getModel().rowsAfterFilter, function (node) {
                    node.setSelected(false);
                });
            }
        });
        return eHeader;
    }

from ag-grid.

wow. that year has flown by. no update, still on my list :(

from ag-grid.

Any updates about this? 😄

from ag-grid.

hey, do you have an ETA on this? or can you point us in the right direction within the code for one of us to get it done?

from ag-grid.

@tomepejo You can not.
However, you can see the progress going to: https://www.ag-grid.com/ag-grid-pipeline/

from ag-grid.

That's on my list to do. Thanks for raising!
On 6 Apr 2015 10:34, "lukelalo" [email protected] wrote:

Hi!

I would need a checkbox header to select unselect all rows. It is very
useful when you want to perform a full delete of all rows.

[image: checkbox-header]
https://cloud.githubusercontent.com/assets/4819263/7002796/abb1e6da-dc50-11e4-9fde-3abd8de19261.png

Regards!
Pablo García

—
Reply to this email directly or view it on GitHub
#46.

from ag-grid.

On a related note, the checkboxes get all unselected sometimes as I click through multiple rows.

from ag-grid.

can you describe a repeatable bug? on the 'test drive' maybe?

i'm guessing you are accidentally not hitting the checkbox, and hitting the row instead, which will result in the row been selected and all other rows deselected.

from ag-grid.

I see, you are right. I need to hit the checkbox accurately.

from ag-grid.

+1

from ag-grid.

With respect to all, the requested feature can be approximated by creating a base group containing all rows. In the example below, we take a large survey and group it by the entire survey and by each section. By clicking the the top level checkbox, all children are highlighted.

Typically, we never have multiple surveys in the same report, but this method would allow it for some use case where we wanted to select questions from multiple surveys.

Clearly, a select all box at the grid top level would be useful because we could lose the top level "group" but this works fine as it.

from ag-grid.

If this is implemented, it should be done in a way that works with remote data sources. I've implemented it with custom code in my project, and it involves maintaining a selection model that knows when "all or none" are selected, so when the row is rendered it can be rendered as selected immediately.

from ag-grid.

@ceolter : I am using ag-grid 2.3.0 and I need this feature for check-uncheck all rows. when this feature will get implemented ?

from ag-grid.

q1 next year. and this is not a bluff! i am booked up time wise between now and the end of the year, however come 2016, i will be working full time on the grid. in the mean time, can you just add a button to 'select all' outside of the grid?

from ag-grid.

ceolter : yeah that's the last option to follow as we need to do it from inside the grid but for now I have managed by binding an click event with headerCellRenderer function

from ag-grid.

So it is 2016, any updates?

from ag-grid.

i haven't looked at this issue since last year!!! so i can't honestly say if it's on my work stack or not for the next few weeks. however i will be implemented header templates in the coming days (hopefully for v3 which is almost finished)

from ag-grid.

#1 add input type checkbox with"picb"
column_def_hsh={}
column_def_hsh["headerName"]="#"
column_def_hsh["field"]="#"
column_def_hsh["cellStyle"]="{'text-align':'center'}"
column_def_hsh["checkboxSelection"]=true
column_def_hsh["headerCellTemplate"]=""
column_def_hsh["width"]=40

#2 attach onClick event on demand to id "picb"

document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#gridvw');
new agGrid.Grid(gridDiv, gridOptions);
createNewDatasource();
document.querySelector('#picb').addEventListener('click', function()
{
if(document.getElementById("picb").checked == true)
{
console.log("I am here");
gridOptions.api.selectAll();
}
else
{
console.log("I am here too");
gridOptions.api.deselectAll();
}

            });

        });

from ag-grid.

selectAll is not available when rows are on the server? is there an api to "fake" this on the frontend i.e. select all visible items and keep new items selected as they are scrolled into the viewport?

from ag-grid.

i haven't checked that yet let me try

from ag-grid.

Note - this is not standard development as you requested for fake select all for virtual paging i did that but server side has to be incorporate considering select all id by default you can't get selected id array by gridApi.selection.getSelectedRows() method
here is the code snippet
############ header #######
{headerName: "checkbox",field: "chck", cellStyle:{"text-align":"center"},checkboxSelection:true,
headerCellTemplate: "" },
############### call back on row removed by virtual paging and attached listener to next row ######
function callback(){
rowindex++;
//row++;
gridOptions.api.addVirtualRowListener("virtualRowRemoved", rowindex,callback) ;
if(document.getElementById("picb").checked == true){
row++;
console.log(rowindex+"----"+row);
console.log($('.ag-row [row="'+parseInt(row)+'"]'));
$('div [row='+parseInt(row)+']').find('.ag-selection-checkbox').trigger('click');

    }

}
var rowindex=0;
var row=0;
var startcounter=0;

##################### finally attach event to select all check box ######
document.querySelector('#picb').addEventListener('click', function()
{
if(document.getElementById("picb").checked == true)
{
rowindex=0;
//$('.ag-body-viewport').scrollTop(0);
gridOptions.api.ensureIndexVisible(1);
window.setTimeout(function(){
$('.ag-row').each(function(){
startcounter++;
//$(this).find('.ag-selection-checkbox').prop('checked', true);
//$(this).find('.ag-selection-checkbox').attr('checked','checked');
$(this).find('.ag-selection-checkbox').trigger('click');
row=$(this).attr("row");
});
console.log("row click set===>"+row);
gridOptions.api.addVirtualRowListener("virtualRowRemoved", rowindex,callback) ;
},1000);
}
else
{
startcounter=0;
rowindex=0;
row=0;
gridOptions.api.deselectAll();
}

            });

################## THANKS ###################

virtualPaging _bk.js.txt

################## use at your own risk ##########
################ @ Mettle Tech Team #######

from ag-grid.

thanks!
and yes, like you mentioned, server side must handle "select all" condition seperately.

from ag-grid.

@ainasiart Thanks for the code snippet. That works pretty well.

One question, do you sort on that column as well? When I click the checkbox, it selects/deselects all just fine, but it also triggers the sorting. Did you come across a way to suppress the sorting when checking the box?

Maybe I need to do this with the header template instead of the header cell renderer?

from ag-grid.

@smwbis you are welcome
The snippet I wrote above seems good only for one column table, and the following is better
I don't know which version you are using but I use 3.x, headerCellTemplate were not available in previous versions

1-Remove the headerCellRenderer from in your gridOption
2-instead, add an empty column, and put the previous function headerCellRendererFunc as headerCellTemplate of the new column
3-the params.colDef.headerName becomes params.colDef.name , or you can remove it if you don't have column title

columnDefs: [ { headerName: "", width: 30, checkboxSelection: true, suppressSorting: true, headerCellTemplate: headerCellRendererFunc }, { headerName: "MyFirstColumn", field: "myFirstColField", width: 200 } .... ],

and the function

`
function headerCellRendererFunc(params) {

        var cb = document.createElement('input');

        cb.setAttribute('type', 'checkbox');

        var eHeader = document.createElement('label');

        var eTitle = document.createTextNode(params.colDef.name);

        eHeader.appendChild(cb);

        eHeader.appendChild(eTitle);

        cb.addEventListener('change', function(e) {

            if ($(this)[0].checked) {

                $scope.gridOptions.api.selectAll();

            } else {

                $scope.gridOptions.api.deselectAll();

            }

        });

        return eHeader;

    }

`

from ag-grid.

Please let me know that headerCellTemplate will parse angular directive

Grid header :

{ headerName: '', width: 30, checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true, headerCellTemplate : '' }

Directive :

angular.module ('app').directive ('selectAllDirective', function () {
return {
replace : true,
restrict: 'E',
scope : {},
template : '

from ag-grid.

@itsmefirealex no ng compiling in the header supported.

from ag-grid.

+1

from ag-grid.

Any update on this feature?
Currently, using a modified version to ainasiart's code

from ag-grid.

no update.

from ag-grid.

@smwbis Question for you. What version are you using? After I apply my filters, I get undefined when I try to get the rows after the filter (e.g. model.gridOptions.api.getModel().rowsAfterFilter)

from ag-grid.

More than a year passed, any updates???

from ag-grid.

@dhintze Sorry, I totally missed your question. I was on vacation for a few weeks back then and must have missed it in my flurry of emails upon return, sorry.

It may not matter anymore, but to answer your question, I was using v4.0.5 at the time. With v5, there were some model changes (they are not documented and therefore not part of the public api, so they could [and did] break with a new release). In v5, it appears to be gridOptions.api.rowModel.rootNode.childrenAfterFilter that will give you the data rows remaining after filtering.

Really though, instead of doing this:

_.forEach(vm.gridOptions.api.getModel().rowsAfterFilter, function (node) {
    node.setSelected(true);
});

I should have used the documented forEachNodeAfterFilter(), since it is specifically for iterating through the nodes after filter, and it would not have broken with the version update:

vm.gridOptions.api.forEachNodeAfterFilter( function(node, index) {
    node.setSelected(true);
});

from ag-grid.

@smwbis good choice moving to the api for iterating the nodes. as you say, if it's in the documented api, it won't be as volatile to change.

from ag-grid.

@ceolter Is there a reason you don't have a documented function to return the node list itself? Like getNodesAfterFilterAndSort()? I find I am often using the rowModel.rootNode.childrenAfterSort hack to pass the list to other functions where I need the list itself. I know I could always iterate through the forEach function provided and push to an array, but that seems overkill, so I continue to use the hack.

Honestly, while I'm giving my wishlist 😉, I would also love to see something like getSelectedNodesAfterFilterAndSort() in order to get only the visible (after filter), selected records, since those are the ones I would do processing on (after all, I don't want to process selected items that have been filtered, since the user would not be expecting that).

Anyway, an amazingly-fantastic grid! Loving the Enterprise edition with the excel-like filtering. Thanks for your work. (There's my obligatory brown-noser comment since I want an enhancement...but really, I love the grid.)

from ag-grid.

@smwbis lol, your funny!

reason is i was changing it a log. the api guards me to an interface, so i can change the implementation. however the brains of the grid i'm pretty happy with, so i'll put time towards returning such lists. i appreciate people who use functional programming techniques (map, etc) will want to work with lists.

from ag-grid.

I am using typescript for my Angular 2 app, and had some issues with the above javascript examples - in particular, the on change event listener didn't have access to the gridOptions.

I have found another workaround if you use typescript:

Firstly, set up the gridOptions' context in the GridComponent's constructor

constructor() {
  this.gridOptions = <GridOptions>{};
  this.gridOptions.columnDefs = this.createColumnDefs();
  this.gridOptions.rowData = this.createRowData();
  ... // other grid options setup
  this.gridOptions.context = {};
  this.gridOptions.context.allSelected = false;
  this.gridOptions.context.selectAllClass = new HeaderCell(this.gridOptions);
  ... 

Set up the column definition

private createColumnDefs() {
  return [
    {headerName: "", field:"chck", width:30, checkboxSelection: true, headerCellRenderer: this.headerCellRendererSelectAll, 
     headerValueGetter: "ctx.allSelected", suppressFilter: true, suppressSorting: true, suppressMenu: true },
    ... // other column definitions
}

Set up the cell renderer

headerCellRendererSelectAll(params) {
  var cb = document.createElement('input');
  cb.setAttribute('type', 'checkbox');
  cb.setAttribute('id', 'selectAllCheckbox');
  cb.setAttribute('selected', params.context.allSelected);

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

  cb.addEventListener('change',  function(e) {
    var checked: boolean = (<HTMLInputElement>e.target).checked;
    params.context.allSelected = checked;
    console.log(params.context.allSelected);
    console.log(typeof e.target);
    params.context.selectAllClass.selectAll(checked);
  });
  return eHeader;
}

And then, define the select all header cell class, which knows about the gridoptions

class HeaderCell {
  constructor(public gridOptions: GridOptions) { }

  selectAll(value: boolean) {
    console.log("Selecting all to " + value);
    this.gridOptions.api.forEachNodeAfterFilter( node => node.setSelected(value));
  }
}

from ag-grid.

nope, work not scheduled yet.

from ag-grid.

That would be fantastic, we all need this I believe.

from ag-grid.

All solutions suggested in this issue set a DOM event listener with a closure on ag-grid API object. Is there a way to handle the destruction of header templates so that event listener could be removed, preventing memory leaks? Thanks!

from ag-grid.

@nikarh Correct me if I am wrong, but if you do:

cb.addEventListener('change', function (e) {

You add the event listener to that specific element, meaning that when that specific element is removed, it's events are also removed, so no memory leaks.

from ag-grid.

@AmitMY Sure, if ag-grid leaves no pointers to headers DOM object then I suppose your assumption is correct. Still, I believe it would be wise to have a lifecycle for header renderers, but that is irrelevant to the issue discussed.

from ag-grid.

@ceolter ,I add a listener on header with api.selectAll(), but I found when I click any row after selectAll(), the event selectionChanged has not been triggered and the display is correct. It appears after I update ag-grid to V7.

from ag-grid.

@FrominXu cannot reproduce. i put this into the main example:

setTimeout(function() {
    gridOptions.api.selectAll();
}, 3000);

and then when everything got selected, the selection was working fine including the events.

@AmitMY we are working flat out! yes it's requested a lot, yes it's requested a lot, but we also consider items that are biggest blockers - and given you can easily add your own checkbox, it's not a blocker.

from ag-grid.

It would be great to have this feature! Using a custom headerCellTemplate makes it difficult (impossible?) to add the ag-grid-enterprise menus to the header.

from ag-grid.

I wanted it but now have implemented it myself. Seriously took short time. with the custom header, setSelected forEachNodeAfterFilter. It is easy.

unselected all filtered:
gridApi.forEachNodeAfterFilter(node=>node.setSelected(false))

select all filtered:
gridApi.forEachNodeAfterFilter(node=>node.setSelected(true))

Then add callback on selection to set the header check/ uncheck layout.

from ag-grid.

This approach doesn't provide the default menus in the header cell. It also doesn't account for a partial selection of rows ([-]), nor does it match the styling of ag-grid's checkboxes.

It can definitely be done with some hacking, but a native feature would be much nicer.

from ag-grid.

For ([-]) and ag-grid's checkboxes style, this shouldn't be too hard to do. A bit of logic for the former and a bit of css or bitmap for the later.

For the default menu, it is more related to the header template capability. There must be a way to have them included in a custom header. Anyone knows how this can be done.

On my side, we don't have this need as we made an initial column just for selection therefore we don't have to bother with sorting filtering... ok you don't get a nice way to put all selected on top or bottom but this is still good for our needs.

from ag-grid.

@ceolter I download zip from https://github.com/ceolter/ag-grid-react-example today, and add function:
onSelectionChanged(){
var sRows = this.api.getSelectedRows();
console.log('onSelectionChanged',sRows);
}

and property of AgGridReact as:
onSelectionChanged={this.onSelectionChanged.bind(this)}

when clicked button Select All , all rows is selected, console shows:

onSelectionChanged [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

and then, click a row, the first row for example, console shows:

myApp.jsx:130 onCellClicked: Olivia Brennan, col undefined

and then, click another row, the second row for example, console shows:

myApp.jsx:130 onCellClicked: Emily Braxton, col undefined
myApp.jsx:149 onSelectionChanged [Object]

so, the first click after selectAll() do not triggered the onSelectionChanged().
ps:
"ag-grid": "7.0.x",
"ag-grid-enterprise": "7.0.x",
"ag-grid-react": "7.0.x"

from ag-grid.

pure javascript:
{headerName: '', width: 31, checkboxSelection: true, suppressResize: true, suppressSorting: true, suppressSizeToFit: true, headerCellRenderer: headerCellRendererFunc, cellStyle: {'text-align': 'center'}}

function headerCellRendererFunc(params) {
var cb = document.createElement('input');
cb.type = 'checkbox';
cb.id = 'cbox';
var eHeader = document.createElement('label');
var eTitle = document.createTextNode(params.colDef.headerName);
eHeader.appendChild(cb);
eHeader.appendChild(eTitle);
cb.addEventListener('change', function (e) {
if (document.getElementById('cbox').checked == true) {
gridOptions.api.selectAll();
} else {
gridOptions.api.deselectAll();	
}
});
return eHeader; 
}

from ag-grid.

tracked by https://ag-grid.atlassian.net/browse/AG-40

from ag-grid.

@ceolter where can I request to join the site?

from ag-grid.

Thanks for implementing this. I hope it covers all the scenarios such as pagination etc. Currently I have implemented the select all with paging in my code, For this, I used the paginationController's properties which are private and the TS compiler throws an error.However code runs well.

from ag-grid.

@ceolter, select all checkbox is not working well when the grid pagination is in place. If you select the header checkbox, it selects all records on first page which is fine. But when you go to the next page, the header checkbox shows stills selected. And if you uncheck it and go to the first page, it shows it unselected and all rows are selected. In short the state of the header checkbox is not maintained when pagination is in place.

from ag-grid.

@riteshwaghela It would be best if you create another issue stating that, easier to keep track.

from ag-grid.

@AmitMY Thanks. I have opened an issue for the same: #1481

from ag-grid.