PDA

View Full Version : how to add checkbox to column header in grid



leilei_2014
23 Sep 2014, 12:36 AM
Hello,
I have a grid and now i want to add a checkbox for each column header. just like this:
50442

anyone can tell me how to realize it?

Thanks in advance.

scottmartin
23 Sep 2014, 5:27 AM
Have a look at Ext.selection.CheckboxModel, you can use this to see how this is done.



x-column-header-checkbox

Farish
23 Sep 2014, 5:32 AM
you can define your columns like this:



{
text: "<input type='checkbox'> Header1", dataIndex: 'name', sortable: false,
listeners: {
headerclick: function(ct, column, e, t, eOpts){
console.log("headerclick");
}
}
}

one problem with above is that if you keep sortable: true, it calls sort even when you click the checkbox and not just if you click outside it on Header1. So you need to figure out some way to cancel the sort when the checkbox is clicked (if you need sort for this column).

leilei_2014
23 Sep 2014, 7:01 PM
Have a look at Ext.selection.CheckboxModel, you can use this to see how this is done.



x-column-header-checkbox


hello scottmartin,

Thank you for your reply. I checked the x-column-header-checkbox but it seems not what i am looking for. by the CheckboxModel i can add a column with checkbox and by controlling x-column-header-checkbox i can show the checkbox in header for that column. However I need to add checkbox in each other columns.

leilei_2014
23 Sep 2014, 7:03 PM
you can define your columns like this:



{
text: "<input type='checkbox'> Header1", dataIndex: 'name', sortable: false,
listeners: {
headerclick: function(ct, column, e, t, eOpts){
console.log("headerclick");
}
}
}

one problem with above is that if you keep sortable: true, it calls sort even when you click the checkbox and not just if you click outside it on Header1. So you need to figure out some way to cancel the sort when the checkbox is clicked (if you need sort for this column).

hello Farish,

by your advice i can add checkbox for each column header and yes i am facing the problem you said. i am looking into it. Thank you very much!