Hide checkcell on render - extjs 6.5.3 modern

Question

I am trying to hide the checkcell of a checkcolumn if the value of another column is null. But unfortunately according to the sencha docs This config is only processed if the cell type is the default of Ext.grid.cell.Cell.

So the solution with the renderer config won't work.

For Example:

{
        xtype: 'checkcolumn',
        dataIndex: 'isSomething',
        text: '',
        width: 30,
        menuDisabled: true,
        headerCheckbox: false,
        renderer: function(value, record) {
            var relatedValue = record.get('somethingElse');
            return relatedValue ? new Ext.grid.column.Check().renderer(value) : '';
        }
    }

Any tips or tricks to accomplish that?

Narendra Jadhav · Accepted Answer · 2018-04-26T11:16:11.037

You could use gridcell and inside gridcell you can use checkbox to achieve your requirement.

In this FIDDLE, I have created a demo using gridcell and checkbox. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({

            xtype: 'grid',

            title: 'Tree Grid Demo',

            // itemConfig: {
            //     viewModel: true
            // },

            store: {

                fields: [{
                    name: 'isCheck',
                    defaultValue: true
                }],
                data: [{
                    firstname: "Michael",
                    lastname: "Scott",
                    seniority: 7,
                    department: "Management",
                    hired: "01/10/2004"
                }, {
                    firstname: "Dwight",
                    lastname: "Schrute",
                    seniority: 2,
                    department: "Sales",
                    hired: "04/01/2004"
                }, {
                    firstname: "Jim",
                    lastname: "Halpert",
                    seniority: 3,
                    department: "Sales",
                    hired: "02/22/2006"
                }, {
                    firstname: "Kevin",
                    lastname: "Malone",
                    seniority: 4,
                    department: '',
                    hired: "06/10/2007"
                }, {
                    firstname: "Angela",
                    lastname: "Martin",
                    seniority: 5,
                    department: "Accounting",
                    hired: "10/21/2008"
                }]
            },

            columns: [{
                text: 'First Name',
                dataIndex: 'firstname'
            }, {
                text: 'Last Name',
                dataIndex: 'lastname'
            }, {
                text: 'Hired Month',
                dataIndex: 'hired'
            }, {
                text: '',
                width: 30,
                renderer: function (value, record, index, cell) {
                    if (record.get('department')) {
                        cell.setTools({
                            xtype: 'checkbox',
                            checked: record.get('isCheck')
                        });
                    } else {
                        return '';
                    }
                }

                /*cell: {
                    tools: {
                        xtype: 'checkbox',
                        bind: {
                            hidden: '{!record.department}',
                            checked: '{record.isCheck}'
                        }
                    }
                }*/
            }],

            fullscreen: true
        });
    }
});

Thanks N. Jadhav. I am going to try to implement it on my code. Your fiddle works like charm. — Zoti, Apr 25 '18 at 14:37
@Απόπατος I have updated my answer without mvvm and [FIDDLE](https://fiddle.sencha.com/#view/editor&fiddle/2g1g) as well. Please check — Narendra Jadhav, Apr 26 '18 at 11:17

score 1 · Answer 2 · answered Apr 25 '18 at 08:11

1

Based on this answer of mine, when you add the override to your code, you can use the following:

Ext.util.CSS.createStyleSheet('.hideCheck .x-grid-checkcolumn::after { content: \'\' }');
Ext.create('Ext.grid.Panel', {
    columns: [{
        xtype:'checkcolumn',
        updateMeta: function(v, meta, record) {
            if(v===null) meta.tdCls = "hideCheck";
        }

Relevant fiddle

answered Apr 25 '18 at 08:11

Alexander

19,906
19
75
162

Would this work for modern too? Because my question is about modern. – Zoti Apr 25 '18 at 08:30

Timz · Answer 3 · 2019-03-01T12:16:21.667

A possibility would be the usage of the hidden property of the cell.

Hint: This property is marked as private!

{   
    xtype: 'grid',
    store: store,

    itemConfig: {
        viewModel: true
    },

    columns: [{
        xtype: 'checkcolumn',
        text: 'Boolean',
        dataIndex: 'bool',
        width: 200,
        cell: {
            hideMode: 'visibility',
            bind: {
                hidden: '{!record.bool}'
            }
        },
    }]
}

Fiddle

score 0 · Answer 4 · answered Jun 22 '20 at 12:36

0

                            <Renderer  Handler="if(record.data.Field !== null && record.data.Field.length &gt; 0){
                                      return true;
                                               }else{
                                      return false;
                                                } "/>

answered Jun 22 '20 at 12:36

Jorge Vaca

1

1

Can you please elaborate your answer and explain how and why it solves the original problem? – Yaron Jun 22 '20 at 12:57

Hide checkcell on render - extjs 6.5.3 modern

4 Answers4