CODEWITHSUNDEEP
extjsdatagridcheckboxextjs4
Nameless
Nameless

Reputation: 2366

Extjs checkcolumn disable for some rows, based on value

I have a grid, with checkcolumn. It's dataIndex is, for example, 'checked'.

I want to disable or hide checkboxes for some rows, where another value, 'can_be_checked' for example, is false/empty.

Renderer is already defined in checkcolumn, messing with it breaks generation of checkbox.

How can I do it?

Upvotes: 16

Views: 26348

Answers (5)

fen1ksss
fen1ksss

Reputation: 1120

Using extjs 5 it is easier to return defaultRenderer in renderer method for target checkboxes and '' for others.

renderer: function (value, metaData, record) {
    return (record.isLeaf()) ? '' : this.defaultRenderer(value, metaData);
}

Such won't render checkbox itself but all the events (i.e. checkchange, itemclick, etc) will be remained. If you don't want them either, you may disable them in beforesmth event, for example

onBeforeCheckRequestsChange: function(me, rowIndex, checked, eOpts) {
    var row = me.getView().getRow(rowIndex),
        record = me.getView().getRecord(row);
    return !record.isLeaf();
},

Upvotes: 3

Allen Underwood
Allen Underwood

Reputation: 517

I also ran into this problem and to take it a step further I needed to have a tooltip show over the checkbox. Here's the solution I came up with that seems to be the least invasive on the existing checkcolumn widget...

renderer: function (value, metaData, record) {
    // Add a tooltip to the cell
    metaData.tdAttr = (record.get("someColumn") === "") ? 'data-qtip="A tip here"' : 'data-qtip="Alternate tip here"';

    if (record.get("someColumn") === "") {
        metaData.tdClass += " " + this.disabledCls;
    }

    // Using the built in defaultRenderer of the checkcolumn
    return this.defaultRenderer(value, metaData);
}

Upvotes: 1

Carlos H
Carlos H

Reputation: 51

I found the solution to the problem of the checkbox not clickable when usign Aniketos code, you have to make sure that in your code of the column you specify the xtype: 'checkcolumn, that will do the trick

Upvotes: 1

egerardus
egerardus

Reputation: 11486

I was looking for a solution to this and came across this question, but no workable solution anywhere to show a disabled checkbox instead of NO checkbox as covered in the other answer. It was kind of involved but here's what I did (for 4.1.0):

  1. I found that the extjs\examples\ux\css\CheckHeader.css file that is used by Ext.ux.CheckColumn does not have a disabled class, so I had to modify it to be more like the standard checkbox styling contained in ext-all.css (which does include a disabled checkbox class).

  2. I had to extend Ext.ux.CheckColumn to prevent events being fired from disabled checkboxes.

  3. Finally, I had to provide my own renderer to apply the disabled class according to my logic.

The code is as follows.

Modified CheckHeader.css:

.x-grid-cell-checkcolumn .x-grid-cell-inner {
    padding-top: 4px;
    padding-bottom: 2px;
    line-height: 14px;
}
.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner {
    padding-top: 3px;
}

.x-grid-checkheader {
    width: 13px;
    height: 13px;
    background-image: url('../images/checkbox.gif');
    background-repeat: no-repeat;
    background-color: transparent;
    overflow: hidden;
    padding: 0;
    border: 0;
    display: block;
    margin: auto;
}

.x-grid-checkheader-checked {
    background-position: 0 -13px;
}

.x-grid-checkheader-disabled {
    background-position: -39px 0;
}

.x-grid-checkheader-checked-disabled {
    background-position: -39px -13px;
}

.x-grid-checkheader-editor .x-form-cb-wrap {
    text-align: center;
}

The background-image url above points to this image which normally ships with extjs 4.1.0 at: extjs\resources\themes\images\default\form\checkbox.gif.

extjs\resources\themes\images\default\form\checkbox.gif

The extended Ext.ux.CheckColumn class so that events will not get fired from disabled checkcolumns:

Ext.define('MyApp.ux.DisableCheckColumn', {
    extend: 'Ext.ux.CheckColumn',
    alias: 'widget.disablecheckcolumn',

    /**
     * Only process events for checkboxes that do not have a "disabled" class
     */
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
        var enabled = Ext.query('[class*=disabled]', cell).length == 0,
            me = this;

        if (enabled) {
            me.callParent(arguments);
        }
    },

});

Implementation with custom renderer to apply disabled class according to my own logic:

column = {
    xtype: 'disablecheckcolumn',
    text: myText,
    dataIndex: myDataIndex,
    renderer: function(value, meta, record) {
        var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader'],
            disabled = // logic to disable checkbox e.g.: !can_be_checked

        if (value && disabled) {
            cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
        } else if (value) {
            cls.push(cssPrefix + 'grid-checkheader-checked');
        } else if (disabled) {
            cls.push(cssPrefix + 'grid-checkheader-disabled');
        }

        return '<div class="' + cls.join(' ') + '">&#160;</div>';

    }
};

Upvotes: 12

Aniketos
Aniketos

Reputation: 659

You may hide the checkbox just inside the renderer, for example:

column.renderer = function(val, m, rec) {
    if (rec.get('can_be_checked') == 'FALSE'))
        return '';
    else
        return (new Ext.ux.CheckColumn()).renderer(val);
};

Upvotes: 25

Related Questions