PDA

View Full Version : [OPEN-440][3.??] TreeGrid - hide column error



makurin
24 Dec 2009, 5:59 AM
Ext version tested:

Ext 3.1


Adapter used:

ext


css used:

only default ext-all.css
Browser versions tested against:

IE7
FF3.5


Operating System:

WinXP Pro


Description:

After hide column, TreeGrid's header becomes wrong.

See this URL : http://www.extjs.com/deploy/dev/examples/treegrid/treegrid.html




Steps to reproduce the problem:

Open example and try hide any column.



Screenshot or Video:

attached

Gerard Pastis
18 Jan 2010, 5:22 AM
I've got the same problem.
Have you an idea about this bug's solving progress ?

Jamie Avins
18 Jan 2010, 9:52 AM
This has now been assigned to a developer to look at.

maryanderson
11 Feb 2010, 10:54 AM
Has this been fixed? If so, is the fix part of the 3.1.1 release?

Greg D
11 Mar 2010, 3:47 AM
Has this been fixed? If so, is the fix part of the 3.1.1 release?

I have just checked beta 3.2 release and the problem seems to be there still.
Any plans when this issue could be fixed?

Thanks,
Greg

weige215
12 Mar 2010, 12:10 AM
I have just checked beta 3.2 release and the problem seems to be there still.
Any plans when this issue could be fixed?

Thanks,
Greg

I find other problems about treegrid! In ie6 and ie7, treegrid can't apear scrollbar, and firefox work good!
treegrid isn't Compatible with IE!

Qtx
21 Mar 2010, 2:51 AM
I find other problems about treegrid! In ie6 and ie7, treegrid can't apear scrollbar, and firefox work good!
treegrid isn't Compatible with IE!

Only horizontal scroll bar does not appear in IE, the vertical one does if necessary.

Qtx
21 Mar 2010, 2:53 AM
I have just checked beta 3.2 release and the problem seems to be there still.
Any plans when this issue could be fixed?

Thanks,
Greg

I tested it also, I am waiting for the solution, it is a pity if this bug will not be corrected in 3.2 :(

Greg D
12 Apr 2010, 8:17 AM
Now that's interesting. It seems that you can no longer use column menus in web example, as they are simply disabled. Why is that? Would that mean that this issue is still open in 3.2?

Thanks,
Greg

Nesta
22 May 2010, 11:14 AM
[EDIT] Damn this fix only works in Firefox (tested with 3.6.3) IE (tested with IE 8) still "shows"
the hidden columns and doesn't align the content as expected

The problem is related to the child nodes of the td Element that should be hidden.
This "fix" reduces the leftover header to about 2px.



updateColumnWidths : function() {
var cols = this.columns,
colCount = cols.length,
groups = this.outerCt.query('colgroup'),
groupCount = groups.length,
c, g, i, j, len, header;

for(i = 0; i<colCount; i++) {
c = cols[i];
for(j = 0; j<groupCount; j++) {
g = groups[j];
header = this.innerHd.query('td')[i];
if(c.hidden) {
Ext.fly(header).addClass('x-treegrid-hd-hidden');
Ext.fly(header.children[0]).addClass('x-treegrid-hd-hidden');
g.childNodes[i].style.width = "0px";
}else {
Ext.fly(header).removeClass('x-treegrid-hd-hidden');
Ext.fly(header.children[0]).removeClass('x-treegrid-hd-hidden');
g.childNodes[i].style.width = c.width + 'px';
}
}
}

var tcw = this.getTotalColumnWidth();
Ext.fly(this.innerHd.dom.firstChild).setWidth(tcw + (this.scrollOffset || 0));
this.outerCt.select('table').setWidth(tcw);
this.syncHeaderScroll();
},
change treegrid-hd-hidden in treegrid.css to :


.x-treegrid-hd-hidden {
visibility: hidden;
border: 0;
width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

Nesta
25 May 2010, 4:32 AM
got it working in IE.
just add style="table-layout:fixed;" to the table created in with the template in TreeGrid.js #72
columns are hidden as expected and you dont have to change css or js.


Just ignore my old post :)


[EDIT] Damn this fix only works in Firefox (tested with 3.6.3) IE (tested with IE 8) still "shows"
the hidden columns and doesn't align the content as expected

The problem is related to the child nodes of the td Element that should be hidden.
This "fix" reduces the leftover header to about 2px.

Balbuzar
2 Jun 2010, 8:44 AM
Thanks !

Problem solved just by adding some css:

.x-treegrid-header-inner .x-grid3-header-offset table {
table-layout:fixed;
}

Nesta
2 Jun 2010, 9:38 AM
hm never thought of the css fix. the table layout
is specified with "style" anf because of that i never
tried css.

one word to treegrid sorter: i had problems
because one column was numeric an no string.
specify a sortType and save a lot of time :)

Reimius
1 Jul 2010, 8:43 AM
Balbuzer's fix does seem to work. Is this going to be worked into the next release? Seems like a major issue with the Treegrid, has anyone been able to test this fix extensively, any issues people know about?

Qtx
19 Sep 2010, 11:43 PM
The solution with "table-layout:fixed;" seems not to work in Chrome and Safari. The problem is still there.

Qtx
25 Oct 2010, 1:48 AM
This has now been assigned to a developer to look at.

It is a pity, in 3.3.0 it is still not fixed for Chrome and Safari :-(

zachext
30 May 2011, 3:40 PM
For webkit, the .x-treegrid-hd-hidden class needs to use display:none instead of visibility:hidden.

art.dev.ext
7 Mar 2012, 6:37 AM
I've found a workaround that works in my case.
FYI I'm using :
ExtJs 3.4 and Ext.ux.tree.EditorGrid 1.0.8 (see http://www.sencha.com/forum/showthread.php?146557-New-Editor-Tree-Grid-Extension-based-on-Ext.ux.tree.TreeGrid)

1) The column I need to show/hide is the last one in my ColumnModel.
Here is its definition :

{
header: 'mylastcol',
dataIndex: 'w',
width: 0,
hidden:true
}

2) change CSS for hidden header :

.x-treegrid-hd-hidden {display: none;}

3) Then when you want to show the column (the third one in my case)

Ext.apply(myTreePanel.getColumnModel()[2],{width:150,hidden:false});

myTreePanel.updateColumnWidths();