GroupHeaderGrid - Grouped grid column headers

[themcme]

Hi,

First I would like to say thank you for this plugin!

I just have one question, is it possible to make the headers not sortable?
I tried "sortable: false" but that doesn't change anything.

Thanks!

[ww20042005]

I am using the GroupHeaderGrid,but I have a problem that column header is not seen because of much more column and column is not rolled transversely ;

[ww20042005]

The writing of English is very good.I admire you so much.

[xbboys]

Modify grid.getColumnModel().rows and call grid.getView().updateHeaders() (calling grid.getColumnModel().setConfig() will also update the headers).

This has been quite a while but is this thread closed? If so, I will post in a new thread.

Can you please explain more in detail, Condor? It will be great if you could provide some sample code. I need to group 3 quantities with 2 prices for each of them. The quantity header will be base on a jsonstore value retrieved from DB.

qty 1: 1000 || qty 2: 2000 || qty 3 : 3000
Price1 | Price 2 || Price1 | Price 2 || Price1 | Price 2

[fcovas]

I'm trying to set the values of the Group Headers dynamically!

if i try to do something such as:

cm=gridChargesDetails.getColumnModel();
cm.setColumnHeader(3, updatedValue);

It won't work, since it seems that the GroupHeaders cannot be accessed directly through an index;

Setting a dataIndex to the GroupHeader does not modify its "header" value either, such as in:

{header: 'Shipment Type 1', colspan: 2, align: 'center'},

Can you please help me with this matter?

Thank you

[Fallen Zen]

I'm getting an error though the script is "working" in line 117 of GroupHeaderPlugin.js r is undefined. It can be initiated upon clicking "Group By This Field" option.

Here's my column config:

plugins: [new Ext.ux.plugins.GroupHeaderGrid({
    rows: [
        [
            {header: '', colspan: 9, align: 'center'},
            {header: 'Lipiec 2010', colspan: 31, align: 'center'}
        ]
    ],
    hierarchicalColMenu: false
}),
summary,
viewerGridFilters
],
columns : [
    {header : 'Projekt', sortable:true, width: 200, menuDisabled: false, dataIndex : 'project', summaryType: 'count', summaryRenderer: totalProjects},
    {header : 'Producent', sortable:true, width: 130, menuDisabled: false, dataIndex : 'producer'},
    {header : 'Opis', sortable:true, width: 80, menuDisabled: false, dataIndex : 'task'},
    {header : 'Data rozpoczęcia', xtype: 'datecolumn', format: 'Y-m-d', sortable:true, width:100, menuDisabled: true, dataIndex : 'start'},
    {header : '%', sortable:true, width: 40, menuDisabled: true, dataIndex : 'busy'},
    {header : 'Stan', sortable:true, width: 40, menuDisabled: false, dataIndex : 'status', renderer: function (value, meta, record, rowIndex, columnIndex, e) {if (value == true) {return '<div><img src="resources/images/viewer/true.png" /></div>';} else {return '<div><img src="resources/images/viewer/false.png" /></div>';}}},
    {header : 'Kwota sugerowana', sortable:true, width: 110, menuDisabled: true, summaryType: 'sum',dataIndex : 'amount1'},
    {header : 'Kwota umówiona', sortable:true, width: 100, menuDisabled: true, summaryType: 'sum', dataIndex : 'amount2'},
    {header : 'Ilość dni bookingu', sortable:true, width: 50, menuDisabled: true, summaryType: 'sum', dataIndex : 'days'},
    {header: '1', dataIndex: 1, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '2', dataIndex: 2, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '3', dataIndex: 3, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '4', dataIndex: 4, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '5', dataIndex: 5, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '6', dataIndex: 6, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '7', dataIndex: 7, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '8', dataIndex: 8, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '9', dataIndex: 9, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '10', dataIndex: 10, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '11', dataIndex: 11, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '12', dataIndex: 12, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '13', dataIndex: 13, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '14', dataIndex: 14, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '15', dataIndex: 15, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '16', dataIndex: 16, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '17', dataIndex: 17, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '18', dataIndex: 18, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '19', dataIndex: 19, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '20', dataIndex: 20, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '21', dataIndex: 21, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '22', dataIndex: 22, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '23', dataIndex: 23, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '24', dataIndex: 24, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '25', dataIndex: 25, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '26', dataIndex: 26, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '27', dataIndex: 27, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '28', dataIndex: 28, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '29', dataIndex: 29, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '30', dataIndex: 30, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})},
    {header: '31', dataIndex: 31, width: 25, sortable: false, menuDisabled: true, summaryType: 'sum', editor: new Ext.form.NumberField({allowBlank: true, allowNegative: false, maxValue: 24})}
],

[nosferatum]

Is it possible to mix GroupHeaderGrid and Ext.ux.LiveGrid? It would be very essential combination!

Oh, I've seen the example in your zip-archive, adding GroupHeaderGrid is just adding "plugins" to GridPanel,
I'll try do to it with Ext.ux.grid.livegrid.GridPanel and see the results.

Works ok, but there are some issues for hierarchical menu - ticks in column visibility menu does not change when clicking (the columns hide\change correctly) , but after closing this menu and reopening it values of the ticks are correct.

[nosferatum]

A modification request:
when column is used as sorted, its header style changes to blue color instead of gray (standart ext theme, as in your example). In case of multirow column header, the upper should have also been painted to blue. Just add this style to them. An example you can see on your example page - try to sort table by "Id" column - the lower header part changes to blue, while rowspanned empty header rows stay gray.

[superDuke]

Anyone having issues with this plugin in Ext 3.3.0?

[Condor]

I assume you are using the ColumnGroupHeader plugin from the Ext 3.3.0 examples/ux directory and not this plugin?