CODEWITHSUNDEEP
extjsextjs5
user1893874
user1893874

Reputation: 843

Select all checkbox on column header click

I am trying to select all the checkbox on header click

Here is my code 

columns: [
        { header: 'Select All', xtype: 'checkcolumn' dataIndex: 'active' },
        { header: 'Name', dataIndex: 'name' },
        { header: 'City', dataIndex: 'city' }            
    ],
    listeners: {                                                   
                'headerclick': {
                    fn: function (grid, col, e) {
                        if (col.fullColumnIndex == 0) {
                            //select row and check checkbox                           
                    }
                },
                    scope: this
                }
            }

I am able to get the selected column index. So if it is Zero then i want to go through the rows and check all the checkbox.

How to implement this ? please suggest me.

Upvotes: 0

Views: 8627

Answers (3)

Lenoarod
Lenoarod

Reputation: 3620

here is an example to select all column checkbox by check header checkbox, but the position is under the text, I don not find a solution.

{
    columns: [
        {
            header: 'Select All',
            xtype: 'checkcolumn',
            HeaderCheckbox: true,
            dataIndex: 'active'
        },
        {
            header: 'Name',
            dataIndex: 'name'
        },
        {
            header: 'City',
            dataIndex: 'city'
        }
    ],
    selModel: 'checkboxmodel'
}

Upvotes: 1

Balram Maurya
Balram Maurya

Reputation: 164

Here is example to select all columns of click header.

columns: [  
    { header: 'Select All', xtype: 'checkcolumn' dataIndex: 'active' },  
    { header: 'Name', dataIndex: 'name' },  
    { header: 'City', dataIndex: 'city' }            
],

selModel:{   
      checkOnly : true,   
      mode:'MULTI'  
},
selType: 'checkboxmodel',

Upvotes: 1

michwalk
michwalk

Reputation: 313

This should work out for you. Just need to update your store's records.

columns: [
        { header: 'Select All', xtype: 'checkcolumn' dataIndex: 'active' },
        { header: 'Name', dataIndex: 'name' },
        { header: 'City', dataIndex: 'city' }            
    ],
    listeners: {                                                   
                'headerclick': {
                    fn: function (grid, col, e) {
                        if (col.fullColumnIndex == 0) {
                            grid.store.each(function(rec){
                                rec.set(col.dataIndex, true);
                            });                          
                    }
                },
                    scope: this
                }
            }

Upvotes: 0

Related Questions