Extjs checkcolumn disable for some rows, based on value
Solution 1
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);
};
Solution 2
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):
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).I had to extend
Ext.ux.CheckColumn
to prevent events being fired from disabled checkboxes.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.
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(' ') + '"> </div>';
}
};
Solution 3
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();
},
Solution 4
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
Solution 5
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);
}
Nameless
Updated on November 12, 2020Comments
-
Nameless over 3 years
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?
-
Nameless about 12 yearsBut renderer is already defined in checkcolumn. I don't want to lose or repeat this piece of code, it can be modified in newer versions of extjs. docs.sencha.com/ext-js/4-0/source/…
-
horace over 11 years+1 - was looking for a way to safely 'render' the checkbox without getting a 'true' or 'false' in the field. thx.
-
aswininayak about 11 yearsThis works fine to disable but 1 issue I am getting i.e. if its enabled and unchecked and I cheked it the style is remain same and its unchecked.
-
aswininayak about 11 yearsI added this else{ cls.push(cssPrefix + 'x-grid-checkheader'); } and it worked for me. Thanks this is really helped me a lot :P
-
efirat about 11 yearsit runs and some records have no CheckColumn as it is supposed. however, I cannot edit this columns. There is checkbox but I cant change its value. other column full of checkcolumn can be edited. what was wrong with this? is it initializing problem?
-
NIrav Modi almost 9 yearsI have applied solution I have added listeners 'checkchange' and when I click on that column fn option return checked= true even checkbox is hide. Any help...
-
NIrav Modi almost 9 yearsThis renderer will not generate column in html. So it make issue in UI
-
fen1ksss over 8 yearsusing this answer the Ext.ux.CheckColumn() will be created every time you render the checkcolumn but not rerender. To avoid this we need to return defaultRenderer. I've posted my answer below.
-
Lucas Fontes Gaspareto about 8 yearsAnd if instead of returning empty I want returning a checkbox disabled?
-
xaume about 7 yearsThis should be the right answer, as the accepted one may lead to performance issues, as CheckColumns gets created that are never destroyed, increasing the Ext.ComponentManager and DOM size to increase.
-
Dirk Schumacher about 6 yearsImho, this does not answer the posted question. There is a small but relevant difference between not displaying a checkbox at all and displaying a not modifiable checkbox.
-
Aneesh Sivaraman almost 5 yearsI had used this in version 5.1.1 and its working fine but this is no longer working in version 6.2.0 Any idea?