GroupHeaderGrid - Grouped grid column headers

[superDuke]

Ofcourse not. I'll take a look, thanks

[nosferatum]

Oh, I didn't look at 3.3.0 yet, still using 3.2.1 in my project. I'll try ColumnGroupHeader plugin, hoping it works better then Ext.ux.plugins.GroupHeaderGrid.

[Condor]

I updated the first post to indicate this.

This plugin is only meant for Ext 3.0. In Ext 3.1+ it is included in the SDK examples/ux folder (renamed to ColumnHeaderGroup).

[nosferatum]

Yes, you're right, and it's already in examples. And multiple sorting too. Nice. I'll try both.

Then it'll be great also to improve and include LiveGrid extension to standard Extjs extensions.

[hjones]

This is a great plugin...I'm using it with hierarchicalColMenu: false.

When the user clicks on the header menu and on the Columns option ALL the checked menu items underneath get checked...with no visible change to the visible columns.
This appears to be a bug? When the user clicks on the Columns header menu item....all child items get checked but not actual column changes.
I've noted that this happens when hierarchicalColMenu: true too.

I fixed this by wrapping the section of code in the default block of function handleHdMenuClick with the following guard condition...

                	if (id !== 'columns') { /* START FIX */

                    item.checked = !item.checked;
                    if(item.menu){
                        var updateChildren = function(menu){
                            menu.items.each(function(childItem){
                                if(!childItem.disabled){
                                    childItem.setChecked(item.checked, false);
                                    if(childItem.menu){
                                        updateChildren(childItem.menu);
                                    }
                                }
                            });
                        }
                        updateChildren(item.menu);
                    }
                    var parentMenu = item, parentItem;
                    while(parentMenu = parentMenu.parentMenu){
                        if(!parentMenu.parentMenu || !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) || !parentItem.setChecked){
                            break;
                        }
                        var checked = parentMenu.items.findIndexBy(function(m){
                            return m.checked;
                        }) >= 0;
                        parentItem.setChecked(checked, true);
                    }
                    item.checked = !item.checked;
                    
                	} /* END FIX */

This stops the group checking from happening on the default 'Columns' parent menu item in the header menu.

[lugreen]

Hi,thanks your great work;
I want to use ColumnHeaderGroup with RowExpander、CheckboxSelectionModel.
but i find that the group header cant't render correctly,how to use ColumnHeaderGroup with RowExpander、CheckboxSelectionModel?

[Condor]

Hi,thanks your great work;
I want to use ColumnHeaderGroup with RowExpander、CheckboxSelectionModel.
but i find that the group header cant't render correctly,how to use ColumnHeaderGroup with RowExpander、CheckboxSelectionModel?

Those should work together. What exactly is the problem?

[lugreen]

Those should work together. What exactly is the problem?

I simply modified the ColumnHeaderGroup demo for test:



the code is :

  ...

  ...

  ...

  var sm = new xg.CheckboxSelectionModel(); //add 

  var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '<p><b>Company:</b> {ParisProductX}</p><br>'            
        )
    }); // add
  columns=[sm,rownum,expander].concat(columns); //add
    var grid = new Ext.grid.GridPanel({
        renderTo: document.body,
        title: 'Sales By Location',
        width: 1000,
        height: 400,
        store: new Ext.data.ArrayStore({
            fields: fields,
            data: data
        }),
        columns: columns,
        viewConfig: {
            forceFit: true
        },
        plugins:[group,expander]
  ,sm:sm  
    });

i taked screenshot :

[Condor]

That's a know css problem of CheckboxSelectionModel.

The easiest way to solve this is to specify a different dataIndex in you columngroups.

[araaku]

Hello Condor,

Thanks!!
It worked like a charm for me!!

Can you please help me in, check/uncheck the parent column as well, when one or more child columns are checked/unchecked.

For eg: Suppose "A" is a group and it has three childs (A1, A2, A3). I want as and when i am checking A1/A2/A3, "A"(parent column) automatically gets checked at same time....


My menu click code is here:

        handleHdMenuClick : function(item){            
            var index = this.hdCtxIndex,
                cm = this.cm, 
                ds = this.ds,
                id = item.getItemId();
            switch(id){
                case 'asc':
                    ds.sort(cm.getDataIndex(index), 'ASC');
                    break;
                case 'desc':
                    ds.sort(cm.getDataIndex(index), 'DESC');
                    break;
                default:
                    if(id.substr(0, 5) == 'group'){                                        
                        var i = id.split('-'),
                            row = parseInt(i[1], 10), col = parseInt(i[2], 10),
                            r = this.cm.rows[row], group, gcol = 0;
                        for (var i = 0, len = r.length; i < len; i++) {
                            group = r[i];
                            if (col >= gcol && col < gcol + group.colspan) {
                                break;
                            }
                            gcol += group.colspan;
                        }
                        if(item.checked){                                        
                            var max = cm.getColumnsBy(this.isHideableColumn, this).length;
                            for (var i = gcol, len = gcol + group.colspan; i < len; i++){                        
                                if(!cm.isHidden(i)){                                
                                    max--;
                                }
                            }
                            if(max < 1){                                                    
                                this.onDenyColumnHide();                                
                                return false;
                            }                        
                        }
                        for (var i = gcol, len = gcol + group.colspan; i < len; i++){                        
                            if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){                                                
                                cm.setHidden(i, item.checked);
                            }
                        }
                    }
                    //if menu is not a group  //custom
                    else{                    
                        index = cm.getIndexById(id.substr(4));
                        if(index != -1){
                            if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
                                this.onDenyColumnHide();
                                return false;
                            }                          
                            cm.setHidden(index, item.checked);                            
                          }
                    }
                    item.checked = !item.checked;  //custom                    
                    if(item.menu){                
                        var updateChildren = function(menu){
                            menu.items.each(function(childItem){                            
                                if(!childItem.disabled){                                    
                                    childItem.setChecked(item.checked, true);
                                    if(childItem.menu){                                
                                        updateChildren(childItem.menu);
                                    }
                                }
                            });
                        }
                        updateChildren(item.menu);                        
                    }
                    

                    var parentMenu = item, parentItem;
                    while(parentMenu = parentMenu.parentMenu){
                        console.log(parentMenu);
                        if(!parentMenu.parentMenu ||
                            !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) ||
                            !parentItem.setChecked){
                            break;
                        }
                        var checked = parentMenu.parentMenu.items.findIndexBy(function(m){
                            return m.checked;
                        }) >= 0;
                        parentItem.setChecked(checked, true);
                    }
                    item.checked = !item.checked;
            }
           
            return true;
        },

Looking forward for your response.