Remove expand and collapse icon from group header if group is empty extjs4 grid grouping

Question

I want to remove the expand(+) and collapse (-) icon if the group does not have any child items.Can someone help me achieve this? Will I have to override extjs grouping file or I can work it out in CSS and explicitly assign class to row. Thank you for all the help. So, in the first image, the rows that are red actually should not have (+) expand icon since it is empty as seen in second image.

Answer 1

Yes, I used the above css

I found the class (.x-grid-group-hd-collapsed .x-grid-group-title) and (.x-grid-group-hd-collapsible .x-grid-group-title) and have made my custom class for it, jus giving background-image:none to the above classes was making the expand collapse sign invisible for all items which i dint want. I want the expand collapse sign for groups having children. So. I made the following custom classes and have overriden the EXT.grid.feature.Grouping file,

----------------------------CSS file-------------------------------------------

.x-grid-group-hd-collapsed-no-image .x-grid-group-title {
    background:none;
    background-image:none;
}

.x-grid-group-hd-collapsible-no-image .x-grid-group-title{
    background:none;
    background-image:none;
}

---

--------------------------------Overriden file-------------------------------------

Ext.define('overrides.grid.feature.EvalGroupingHeader', {
    extend: 'Ext.grid.feature.Grouping',
    alias: 'feature.evalgroupingheader',

    hdCollapsedNoImageCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsed-no-image',
    collapsibleNoImageCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsible-no-image',

    setupRowData: function(record, idx, rowValues) {
        debugger;
        var me = this,
            data = me.refreshData,
            groupInfo = me.groupInfo,
            header = data.header,
            groupField = data.groupField,
            dataSource = me.view.dataSource,
            grouper, groupName, prev, next;

        rowValues.isCollapsedGroup = false;
        rowValues.summaryRecord = null;

        if (data.doGrouping) {
            grouper = me.view.store.groupers.first();

            // This is a placeholder record which represents a whole collapsed group
            // It is a special case.
            if (record.children) {
                groupName = grouper.getGroupString(record.children[0]);

                rowValues.isFirstRow = rowValues.isLastRow = true;

//In the statement below,(record.children[0].data.field) == field which you want to put condition on to display these the expand collapse icons, I am checking if field is empty then dont display these icons(hdCollapsedNoImageCls-our custom class), and if not empty then display these icons(hdCollapsedCls-their internal class)




                rowValues.itemClasses.push(Ext.isEmpty(record.children[0].data.field) ? me.hdCollapsedNoImageCls: me.hdCollapsedCls);
                rowValues.isCollapsedGroup = rowValues.needsWrap = true;
                rowValues.groupInfo = groupInfo;
                groupInfo.groupField = groupField;
                groupInfo.name = groupName;
                groupInfo.groupValue = record.children[0].get(groupField);
                groupInfo.columnName = header ? header.text : groupField;
//In the statement below,(record.children[0].data.field) == field which you want to put condition on to display these the expand collapse icons, I am checking if field is empty then dont display these icons(collapsibleNoImageCls-our custom class), and if not empty then display these icons(collapsibleCls-their internal class)


rowValues.collapsibleCls = me.collapsible ? 
                                    (Ext.isEmpty(record.children[0].data.field) ? me.collapsibleNoImageCls: me.collapsibleCls)
                                    : me.hdNotCollapsibleCls;
                    rowValues.groupId = me.createGroupId(groupName);
                    groupInfo.rows = groupInfo.children = record.children;
                    if (me.showSummaryRow) {
                        rowValues.summaryRecord = data.summaryData[groupName];
                    }
                    return;
                }

                groupName = grouper.getGroupString(record);

                // If caused by an update event on the first or last records of a group fired by a GroupStore, the record's group will be attached.
                if (record.group) {
                    rowValues.isFirstRow = record === record.group.children[0];
                    rowValues.isLastRow  = record === record.group.children[record.group.children.length - 1];
                }

                else {
                    // See if the current record is the last in the group
                    rowValues.isFirstRow = idx === 0;
                    if (!rowValues.isFirstRow) {
                        prev = dataSource.getAt(idx - 1);
                        // If the previous row is of a different group, then we're at the first for a new group
                        if (prev) {
                            // Must use Model's comparison because Date objects are never equal
                            rowValues.isFirstRow = !prev.isEqual(grouper.getGroupString(prev), groupName);
                        }
                    }

                    // See if the current record is the last in the group
                    rowValues.isLastRow = idx == dataSource.getTotalCount() - 1;
                    if (!rowValues.isLastRow) {
                        next = dataSource.getAt(idx + 1);
                        if (next) {
                            // Must use Model's comparison because Date objects are never equal
                            rowValues.isLastRow = !next.isEqual(grouper.getGroupString(next), groupName);
                        }
                    }
                }

                if (rowValues.isFirstRow) {
                    groupInfo.groupField = groupField;
                    groupInfo.name = groupName;
                    groupInfo.groupValue = record.get(groupField);
                    groupInfo.columnName = header ? header.text : groupField;
                    rowValues.collapsibleCls = me.collapsible ? 
                                    (Ext.isEmpty(record.get(fieldyouwanttoputconditionon)) ? me.collapsibleNoImageCls: me.collapsibleCls)
                                    : me.hdNotCollapsibleCls;
                    rowValues.groupId = me.createGroupId(groupName);

                    if (!me.isExpanded(groupName)) {
                        rowValues.itemClasses.push(Ext.isEmpty(record.get(fieldyouwanttoputconditionon)) ? me.hdCollapsedNoImageCls: me.hdCollapsedCls);
                        rowValues.isCollapsedGroup = true;
                    }

                    // We only get passed a GroupStore if the store is not buffered
                    if (dataSource.buffered) {
                        groupInfo.rows = groupInfo.children = [];
                    } else {
                        groupInfo.rows = groupInfo.children = me.getRecordGroup(record).children;
                    }
                    rowValues.groupInfo = groupInfo;
                }

                if (rowValues.isLastRow) {
                    // Add the group's summary record to the last record in the group
                    if (me.showSummaryRow) {
                        rowValues.summaryRecord = data.summaryData[groupName];
                    }
                }
                rowValues.needsWrap = (rowValues.isFirstRow || rowValues.summaryRecord);
            }
        },

        constructor: function() {
            debugger;
            this.callParent(arguments);
        }


    });

I have assigned the following with my custom class and used them in the code at right places with the condition for which I want to display them and dont want to display them.

hdCollapsedNoImageCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsed-no-image',
collapsibleNoImageCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsible-no-image',

Answer 2

This must be a bit more than the default Ext grouping grid because "groups with no records" are not even displayed in the standard grouping grid.

Nevertheless, it seems that you have successfully made "empty" groups red with a css so you only need to find the css selector of the [+] icon down from the "empty" row and then

.the-selector-of-expand-icon-you-found {
    display:none;
} 

or

.the-selector-of-expand-icon-you-found {
    visibility:hidden;
}