CODEWITHSUNDEEP
javascriptextjsextjs4
Gihan Lasita
Gihan Lasita

Reputation: 3053

How to remove checkall option in extjs checkboxmodel?

How to remove check all option is extjs 4 checkboxmodel?

enter image description here

Regards

Upvotes: 7

Views: 7547

Answers (10)

pabloelustondo
pabloelustondo

Reputation: 2216

Thanks for all the good hints here. For Sencha 3.4, this is the extremely simple pure CSS I ended up using,

My_Panel_With_a_Grid_Without_Header_CheckBox = Ext.extend(Ext.Panel, {.... cls: 'innerpanel hiddeGridCheckBoxOnSingleSelect', ....}

in my CCS file:

.hiddeGridCheckBoxOnSingleSelect .x-grid3-hd-checker { visibility:hidden }

Upvotes: 0

Gihan Lasita
Gihan Lasita

Reputation: 3053

I have managed to hide it using pure CSS:

Code:

.x-column-header-checkbox {display:none;}

Upvotes: 5

Feroz
Feroz

Reputation: 123

When defining a grid (in 4.2.1), set this config option to:

selModel: Ext.create('Ext.selection.CheckboxModel', { showHeaderCheckbox: false }),

(The relevant part is showHeaderCheckbox :false)

Upvotes: 6

fsakar
fsakar

Reputation: 21

I encountered this issue in ExtJS 4.0.7 version. First I removed checkbox layout:

.rn-grid-without-selectall .x-column-header-checkbox .x-column-header-text
{
    display: none !important;
}

Then I used the following code in afterrender listener of the grid:

afterrender: function (grid) {
    this.columns[0].isCheckerHd = false;
}

It is not a good solution but it can be used as a starting point.

Upvotes: 0

prashant
prashant

Reputation: 1815

In ExtJS 4 a header config can be provided as below to display a blank or custom text in the header.

getHeaderConfig: function() {
                var me = this;
                showCheck = false;
                return {
                    isCheckerHd: showCheck,
                    text : ' ',
                    width: me.headerWidth,
                    sortable: false,
                    draggable: false,
                    resizable: false,
                    hideable: false,
                    menuDisabled: true,
                    dataIndex: '',
                    cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
                    renderer: Ext.Function.bind(me.renderer, me),

                    //me.renderEmpty : renders a blank header over a check box column
                    editRenderer: me.editRenderer || me.renderEmpty,
                    locked: me.hasLockedHeader()
                };

            },

Upvotes: 0

Setlord
Setlord

Reputation: 11

According to API, the type of "header" property is String. Said that, the correct value is ''. It has worked for me on ExtJS 3.4

this.queueSelModel = new Ext.grid.CheckboxSelectionModel({
            singleSelect : true, // or false, how you like
            header : ''
        });

Upvotes: 1

gonzalo.vinas
gonzalo.vinas

Reputation: 71

heder:false in config or injectCheckBoxHeader = false hide the entire column. CSS solution is class based so any other widget using the same selection model would also hide the entire check.

Upvotes: 0

aamir sajjad
aamir sajjad

Reputation: 3039

Inside grid panel afterrender event using jquery

listeners: {

        afterrender: function (grid) {
           $('.x-column-header-checkbox').css('display','none');
        }
    }

Upvotes: 1

satish kumar
satish kumar

Reputation: 145

Define {Header: false} in checkboxselectionModel

this.queueSelModel = new Ext.grid.CheckboxSelectionModel({
            singleSelect : false,
            header : false
        });

Upvotes: -2

NT3RP
NT3RP

Reputation: 15370

When you're creating your checkboxmodel, try specifying injectCheckbox: false into its configuration. From the API:

Instructs the SelectionModel whether or not to inject the checkbox header automatically or not. (Note: By not placing the checkbox in manually, the grid view will need to be rendered 2x on initial render.) Supported values are a Number index, false and the strings 'first' and 'last'.

Upvotes: 1

Related Questions