View Full Version : How to add title/header next to checkbox model in the header of the grid

7 Oct 2015, 3:02 AM
In our data grid we need select all checkbox I used below lines of code to achieve checkbox in the header of the grid.

selType: 'checkboxmodel',
selModel: {
checkOnly : true

Now I am able to see checkbox at the header which will select all rows on selection, as per requirement I need to display "All" text next to the checkbox in the header. Below is the entire grid code. How to add header/title/text next to checkbox model checkbox in the header of the grid.

xtype: 'gridpanel',
width: 550,
height: 400,
itemId: 'ReportGrid',
cls: 'grid',
border: true,
viewConfig: {
emptyText:'No Data or Record(s) Found',
stripeRows: true
selType: 'checkboxmodel',
selModel: {
checkOnly : true
columns: [ {
text: 'Column 2',
dataIndex: 'invId',
flex: 0,
width: 100
}, {
text: 'Name',
dataIndex: 'name',
resizable: false,
flex: 0, //Will not be resized
width: 250,
align: 'left'

7 Oct 2015, 11:09 AM

Out of the box, there's no config to allow this. However, you could extend Ext.selection.CheckboxModel and implement a custom version of getHeaderConfig() to allow it. You'll also need to tweak the CSS a bit.

Here's an example: