Extjs Show/Hide detail rows from Grouping summary grid in after render of grid

Question

I am trying to customise Grouping summary grid of ExtJS. As of now I have achieve UI part of Grid. I am stuck in small thing where I have to hide detail rows from grid so that it will show only summary row.

I want to achieve this without using Store filter because it will affect my group summary total . Please suggest somthing with javascript display:'none' functionality.

Please follow my fiddle: GroupSummaryGrid

Answer 1

For this you need to get all rows using below code

grid.getView().el.query('tr.x-grid-row')// this will return a array all 'x-grid-row'

And after getting this you need to make loop function to hide all the rows as you want like this

 grid.getView().el.query('tr.x-grid-row').forEach(el => {
     Ext.get(el).setStyle({
         display: 'none',
         height: 0
     });
 })

In this FIDDLE , I have created a demo using your code and made some modification. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.create('Ext.grid.Panel', {
    width: '100%',
    height: 540,
    renderTo: Ext.getBody(),
    features: [{
        groupHeaderTpl: '{name}',
        ftype: 'groupingsummary',
        showSummaryRow: true,
    }],
    listeners: {
        groupclick: function(view, node, group, e, eOpts) {
            this.doHideRowItems();
        },
        afterRender: function(grid) {
            Ext.defer(function() {
                grid.doHideRowItems()
            }, 10);
        }
    },
    store: {
        model: 'TestResult',
        groupField: 'JobNo_JobName',
        data: [{
            Dummy: '',
            JobNo: '123456',
            JobName: 'New Job',
            JobNo_JobName: '123456 New Job',
            EntryType: 'Inv',
            EntryDesc: '29',
            Income: 1.82,
            Cost: 0,
            NetProfit: 0
        }, {
            Dummy: '',
            JobNo: '123456',
            JobName: 'New Job',
            JobNo_JobName: '123456 New Job',
            EntryType: 'Inv',
            EntryDesc: '43',
            Income: 50,
            Cost: 0,
            NetProfit: 0
        }, {
            Dummy: '',
            JobNo: '123456',
            JobName: 'New Job',
            JobNo_JobName: '123456 New Job',
            EntryType: 'Pur. Inv',
            EntryDesc: '28 - Supp1',
            Income: 0,
            Cost: 909.09,
            NetProfit: 0
        }, {
            Dummy: '',
            JobNo: '123',
            JobName: 'New Job 2',
            JobNo_JobName: '123 New Job 2',
            EntryType: 'Pur. Inv',
            EntryDesc: '31 - Supp1',
            Income: 0,
            Cost: 909.09,
            NetProfit: 0
        }]
    },
    columns: [{
        dataIndex: 'Dummy',
        flex: 1,
        text: ''
    }, {
        dataIndex: 'EntryType',
        flex: 1,
        text: 'EntryType'
    }, {
        dataIndex: 'EntryDesc',
        flex: 1,
        text: 'EntryDesc'
    }, {
        dataIndex: 'Income',
        flex: 1,
        text: 'Income',
        summaryType: 'sum'
    }, {
        dataIndex: 'Cost',
        flex: 1,
        text: 'Cost',
        summaryType: 'sum'
    }, {
        dataIndex: 'NetProfit',
        flex: 1,
        text: 'NetProfit',
        summaryType: 'sum'
    }],

    doHideRowItems: function() {
        //This function will only hide as you mentioned in Screen shot
        this.getView().el.query('tr.x-grid-row').forEach(el => {
            Ext.get(el).setStyle({
                display: 'none',
                height: 0
            });
        })
    }
});