ExtJS display RowExpander on condition only

Question

I currently have a rather big Grid and am successfully using the RowExpander plugin to display complementary informations on certain rows. My problem is that it's not all rows that contain the aforementioned complementary informations and I do not wish the RowExpander to be active nor to show it's "+" icon if a particular data store's entry is empty. I tried using the conventional "renderer" property on the RowExpander object, but it did not work.

So basically, how can you have the RowExpander's icon and double click shown and activated only if a certain data store's field != ""?

Thanks in advance! =)

EDIT: I found a solution

As e-zinc stated it, part of the solution (for me at least) was to provide a custom renderer that would check my conditional field. Here is my RowExpander:

this.rowExpander = new Ext.ux.grid.RowExpander({
    tpl: ...
    renderer: function(v, p, record) {
                if (record.get('listeRetourChaqueJour') != "") {
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"></div>';
                } else {
                    p.id = '';
                    return '&#160;';
                }
    },
    expandOnEnter: false,
    expandOnDblClick: false
});

Now, the trick here is that for this particular Grid, I chose not to allow the expandOnEnter and expanOnDblClick since the RowExpander will sometimes not be rendered. Also, the CSS class of the grid cell that will hold the "+" icon is 'x-grid3-td-expander'. This is caused by the fact that the CSS class is automatically set to x-grid3-td-[id-of-column]. So, by setting the id to '' only when I'm not rendering the rowExpander, I'm also removing the gray background of the un-rendered cells. So, no double click, no enter, no icon, no gray-background. It really becomes as if there is strictly no RowExpander involved for the columns where my data store field is empty (when I want no RowExpander).

That did the trick for me. For someone that wishes to preserve the ID of the cell, or that wishes to keep the double click and enter events working, there is nothing else to do other than extending the class I guess. Hope this can help other people stuck in the position I was!

score 3 · Accepted Answer · answered Feb 04 '12 at 17:39

As e-zinc stated it, part of the solution (for me at least) was to provide a custom renderer that would check my conditional field. Here is my RowExpander:

this.rowExpander = new Ext.ux.grid.RowExpander({
    tpl: ...
    renderer: function(v, p, record) {
                if (record.get('listeRetourChaqueJour') != "") {
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"></div>';
                } else {
                    p.id = '';
                    return '&#160;';
                }
    },
    expandOnEnter: false,
    expandOnDblClick: false
});

Now, the trick here is that for this particular Grid, I chose not to allow the expandOnEnter and expandOnDblClick specifically since the RowExpander will sometimes not be rendered. Also, the CSS class of the grid cell that will hold the "+" icon is 'x-grid3-td-expander'. This is caused by the fact that the CSS class is automatically set to x-grid3-td-[id-of-column]. So, by setting the id to an empty string only when I'm not rendering the rowExpander, I'm also removing the gray background of the cells that won't offer any expanding. So, no double click, no enter, no icon, no gray-background. It really becomes as if there is strictly no RowExpander involved for the columns where my data store field is empty (when I want no RowExpander).

That did the trick for me. For someone that wishes to preserve the ID of the cell, or that wishes to keep the double click and enter events working, there is nothing else to do other than extending the RowExpander class in my opinion. Of course, one could also use Ext.override(), but then all instances of RowExpander would be hit by the override.

score 1 · Answer 2 · answered Oct 23 '13 at 16:58

I think I've found a cleaner solution.Give me a feedback pls :) I extend the toggleRow method of RowExpander and if I match a condition avoid to toggle the row.Otherwise the standard flow continues

Ext.create('customplugins.grid.plugin.ClickRowExpander',{
        pluginId : 'rowexpander',
        rowBodyTpl : new Ext.XTemplate(
                '<p><b>Last Modified By:</b> {usermodify}</p>',
                '<p><b>User data:</b> {userdata}</p>',
                '<p><b>Correlation ID:</b> {correlationid}</p>',
                '<p><b>Description:</b> {descr}</p>'
        ),
        toggleRow : function(rowIdx, record) {
            if(record.get('directory')) return false;
            customplugins.grid.plugin.ClickRowExpander.prototype.toggleRow.apply(this, arguments);
        }

    })

Levan · Answer 3 · 2015-11-12T05:56:04.157

This version works in Ext JS 5 and 6 (classic)

One thing is to remove the +/- icon, which can be done via grid viewConfig:

getRowClass: function (record, rowIndex, rowParams, store) { var yourFieldofChoice = record.get('yourFieldofChoice'); if (yourFieldofChoice == null) { return 'hide-row-expander'; } },

Define css for hide-row-expander:

.hide-row-expander .x-grid-row-expander { visibility: hidden; }

Now you disable expanding on enter key ('expandOnEnter' config is no longer supported in Ext JS 6) or double click by overriding toggleRow, or if you do not wish the override you create your custom rowexpander built on existing plugin:

Ext.define('RowExpander', { extend: 'Ext.grid.plugin.RowExpander', alias: 'plugin.myExpander', init: function (grid) { var me = this; me.grid = grid; me.callParent(arguments); }, requiredFields: ['yourFieldofChoice'], hasRequiredFields: function (rec) { var valid = false; Ext.each(this.requiredFields, function (field) { if (!Ext.isEmpty(rec.get(field))) { valid = true; } }); return valid; }, toggleRow: function (rowIdx, record) { var me = this, rec; rec = Ext.isNumeric(rowIdx)? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx); if (me.hasRequiredFields(rec)) { me.callParent(arguments); } } });

score 1 · Answer 4 · answered Feb 03 '12 at 15:56

1

I have the same task, there is my solution

var rowExpander = new Ext.ux.grid.RowExpander({
    renderer : function(v, p, record){
       return record.get('relatedPageCount') > 0 ? '<div class="x-grid3-row-expander">&#160;</div>' : '&#160;';
    }
});

I have overridden render method which test relatedPageCount field in store and render + or white space.

answered Feb 03 '12 at 15:56

e-zinc

4,491
2
20
17

Did you use Ext.override or you created a new class and extended the RowExpander plugin? I heard using Ext.override causes your overriden function to affect ALL instances of the object you modify, which would mean every RowExpander instances would be affected...and it's not what I'm looking for. So my guess is that extending it in a new class is the way to go. What did you end up doing? – Jean-Francois Hamelin Feb 03 '12 at 16:33
oh I see what you did there! I used the same thing as you, the rederer property, but the RowExpander still adds the CSS class x-grid3-td-expander which has a gray background that I don't want. It's true that providing a renderer does remove the "+" icon, but it still leaves the gray background css class to the . – Jean-Francois Hamelin Feb 03 '12 at 16:37
@Jean-Francois Hamelin Also I have CSS fix: .x-grid3-td-expander { background-image: none !important; } – e-zinc Feb 03 '12 at 16:49
Ok...the application I work on is huge and I'm using RowExpander at various places and I don't want the background to disappear on all of these places. Thanks for sharing though, I finally found a workaround without making a new class and extending the whole thingy. – Jean-Francois Hamelin Feb 03 '12 at 17:03
See original question for solution, will post it and mark it as the solution in 5 hours (since I have less than 100 rep). – Jean-Francois Hamelin Feb 03 '12 at 17:18

score 0 · Answer 5 · answered Sep 10 '15 at 13:49

I have handled the beforeexpand event inside the listeners of Ext.ux.grid.RowExpander. beforeexpand method got the whole row data injected. Checking the data conditionally we can return true or false. If we return false it wont expand otherwise it will do.

var expander = new Ext.ux.grid.RowExpander({
            tpl: '<div class="ux-row-expander"></div>',

            listeners: {

                beforeexpand : function(expander, record, body, rowIndex){

                    var gpdata = record.data.GROUP_VALUES[1].COLUMN_VALUE
                    if(gpdata == null){
                        return false;
                    }
                    else{
                        return true;
                    }
                }
            }
        });

This only for disable/enable expanding instead of not showing the expander icon entirely. — jenna_3108, Jan 17 '19 at 07:35

ExtJS display RowExpander on condition only

5 Answers5