How to hide/show specific Cell in Grid

Question

Im using renderer function as below and want to hide/show specific checkcolumn-cells depending on variable record.data.hidden in my gridview.

{
   xtype: 'checkcolumn',
   renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
       /*
       if (record.data.hidden === true) {
           // checkbox hidden
       } else {
           // checkbox shown
       }
       */
    },
    itemId: 'mycheck',
    bind: {
        text: '{warranty}'
    }
}

How do i do this?

Answer 1

You can use the metaData passed to the renderer function to apply styling to the cell element, see the documentation here.

One easy way is to set the display CSS property depending on your criteria. This will be applied to the HTML <td> element created by Ext JS for the cell.

Try this:

{
   xtype: 'checkcolumn',
   renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
       if (record.data.hidden === true) {
           metaData.tdStyle = 'display: none;';
       } else {
           metaData.tdStyle = 'display: table-cell;';
       }
       return value;
    },
    itemId: 'mycheck',
    bind: {
        text: '{warranty}'
    }
}

(I am not sure about the right syntax, maybe you don't need the semicolon after none and table-cell, and maybe you have to use quotations somewhere. Try it.)

But you create a CSS style and use tdCls as well, and perhaps also tdAttr but I am not sure about the latest.

Answer 2

Found a solution, thanks to Peter:

if (record.data.hidden === true) {
    metaData.tdStyle = 'display: none;';
    return (new Ext.grid.column.CheckColumn()).renderer(value);
} else {
    metaData.tdStyle = 'display: table-cell;';
    return (new Ext.grid.column.CheckColumn()).renderer(value);
}

Without the renderer() function, you will only see the "value" in raw without any checkbox.