How to remove checkall option in extjs checkboxmodel?

F

10

7

How to remove check all option is extjs 4 checkboxmodel?

enter image description here

Regards

Finned answered 6/9, 2011 at 14:36 Comment(0)

F

5

I have managed to hide it using pure CSS:

Code:

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

Finned answered 6/9, 2011 at 16:19 Comment(1)

That's what I remember doing in Ext JS 3. – Logroll 6/9, 2011 at 17:11

Z

6

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)

Zoara answered 12/2, 2013 at 3:32 Comment(4)

Yet another undocumented feature in extJS. Thanks for this! – Pilloff 23/5, 2013 at 18:43

To be fair, I just looked up the most recent version of the docs and it's in there but not for the version we were using. – Pilloff 23/5, 2013 at 18:43

Can you please elaborate on where to use this? with a small sample checkboxmodel – Soiree 18/9, 2014 at 5:40

@Soiree When defining a grid in 4.2.1, set this config option to: selModel: Ext.create('Ext.selection.CheckboxModel', { showHeaderCheckbox: false }) – Diaper 29/9, 2014 at 18:42

F

5

I have managed to hide it using pure CSS:

Code:

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

Finned answered 6/9, 2011 at 16:19 Comment(1)

That's what I remember doing in Ext JS 3. – Logroll 6/9, 2011 at 17:11

S

1

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'.

Salesroom answered 6/9, 2011 at 14:54 Comment(2)

Thanks for the reply, tried that and it hides all the checkboxes – Finned 6/9, 2011 at 14:56

Fair enough. I'll do some more poking around in the API, see what I can find. – Salesroom 6/9, 2011 at 15:1

L

1

Inside grid panel afterrender event using jquery

listeners: {

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

Lustring answered 7/3, 2012 at 17:23 Comment(0)

M

1

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 : ''
        });

Mameluke answered 3/4, 2012 at 14:40 Comment(0)

C

0

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.

Collegian answered 2/4, 2012 at 12:52 Comment(1)

that can prevent by adding a cls to the grid and use css like .grid01 .x-column-header-checkbox {display:none;} so it will be apply to only grid that has grid01 css class – Finned 6/4, 2012 at 16:19

C

0

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 : '&#160;',
                    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()
                };

            },

Crap answered 22/5, 2013 at 3:57 Comment(0)

G

0

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.

Giza answered 29/7, 2013 at 11:5 Comment(0)

W

0

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 }

Wychelm answered 19/2, 2016 at 15:34 Comment(0)

S

-2

Define {Header: false} in checkboxselectionModel

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

Stays answered 30/9, 2011 at 7:2 Comment(0)

Recommended topics

Hot tags