Grid ColumnHeader Menu missing

[Andreas Samjeske]

For a grid that is not initially visible, like at a not chosen TabPanel, there are no menus at ColumnHeader once the grid gets shown.

Required Information

Version(s) of Ext GWT
Ext GWT 3.1.0

Browser versions and OS
FF 24.5.0 ESR and IE11 on Win7 Enterprise, 64Bit

Virtual Machine
No

Description
A grid, which is shown instantly is fine: u mousehover a gridheader and there is shown this small arrow at the right. if u click it, the menu for this column appears.

If u have a grid, which is not shown at start of the application, there is a problem. Once u navigate to the grid it looks alright. But hovering the column header has no effect: no small arrow gets shown, hence u can't access any column menus.

Run mode
Dev Mode (Prod mode not tested)

Steps to reproduce the problem

1. </i>
2. Start example shown below
3. Click "grid" tab
4. Hover "col 1" or "col 2"

Expected result
Little arrow pic appears, granting u access to column menu

Actual result
No arrow pic, no access to column menu

Test case

import java.util.ArrayList;
import java.util.List;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;

public class Demo implements EntryPoint {

    @Override
    public void onModuleLoad() {
        ListStore<String> store = new ListStore<String>(null);
        List<ColumnConfig<String, ?>> configs = new ArrayList<ColumnConfig<String, ?>>();
        configs.add(new ColumnConfig<String, String>(null, 100, "col 1"));
        configs.add(new ColumnConfig<String, String>(null, 100, "col 2"));
        ColumnModel<String> cm = new ColumnModel<String>(configs);
        Grid<String> grid = new Grid<String>(store, cm);

        TabPanel tabP = new TabPanel();
        tabP.add(new Label("foo"), "lbl foo");
        tabP.add(grid, "grid");

        RootPanel.get().add(tabP);
    }
}

Helpful Information
If u add grid as first element to tabP, column menu is accessable.

Debugging already done
I have been able to track it down to com.sencha.gxt.widget.core.client.grid.ColumnHeader.Head.
Method updateWidth(int width) at line 451 checks elements height:

if (tdHeight.equals("")) { ...

In case of the bug tdHeight is "0px". So it is not empty string, but height should be calculated, but doesn't. So does btn, since the following secting is not reached:

          if (btn != null) {
            XElement.as(btn).setHeight(h, true);
          }

Possible fix
Checking tdHeight only for being emptystring seems to be insufficent. Revise EXTGWT-3511 carefully! GXT3.1.0Beta does not shown this bug, since updateWidth(int width) got pretty much revamped for GXT3.1.0

Workaround
Call grid.getView().refresh(true); after it is shown.

[feelinforyou]

I can confirm this bug exists. I was running into the same problem. After refreshing the header they are visible!

[feelinforyou]

I think this is a heavy bug. I can easily reproduce it with the example of Andreas.

If you want that it's working add this in the testcase. But refreshing the whole grid is not an option if the grid contains many items. It's too expensive.

  tabP.addSelectionHandler(new SelectionHandler<Widget>() {
            @Override
            public void onSelection(SelectionEvent<Widget> event) {
                grid.getView().refresh(true);
            }
        });

[Andreas Samjeske]

Colin? Brandon? Anyone?
It's been over 2 weeks now. With the provided example it shoulb be fairly easy reproducable.

[branflake2267]

I'm looking into it.

[branflake2267]

Thanks for reporting. I've replicated the configuration and created a bug request. We are investigating why this may be happening.

[Colin Alworth]

Andreas, while I can reproduce your test case, I cannot get your initial result that tdHeight is ever set to "0px" - for me it always is at "". I suspect that the issue is that the Grid is trying to finish rendering itself hidden, and fails to get sizing right since it isn't visible.

We can make it visible, at least to the browser's rendering engine, by marking the grid as hidden with offsets, instead of display:none:

grid.setHideMode(HideMode.OFFSETS);

This will not incur the penalty that refreshing the grid has.

If in your real life example the grid is not added directly to the tabpanel, set this setting on the element that is the TabPanel's child.

I'm continuing to look into this to find a more permanent solution.

[Andreas Samjeske]

Andreas, while I can reproduce your test case, I cannot get your initial result that tdHeight is ever set to "0px" - for me it always is at "". I suspect that the issue is that the Grid is trying to finish rendering itself hidden, and fails to get sizing right since it isn't visible.

You are right. I checked again. tdHeight is always "" in the example above.
In our Webapp however, the codesection runs twice. First time tdHeight is "". Second time it is "0px". Sorry for the confusion.

We can make it visible, at least to the browser's rendering engine, by marking the grid as hidden with offsets, instead of display:none:

grid.setHideMode(HideMode.OFFSETS);

This will not incur the penalty that refreshing the grid has.

If in your real life example the grid is not added directly to the tabpanel, set this setting on the element that is the TabPanel's child.

I'm continuing to look into this to find a more permanent solution.

Great idea. Thanks for this workaround. I tried it for one grid in our Webapp and it worked. But it is difficult to change this webapp-wide for all grids, since there are several menus and sub menus.
My idea is to make a change to ToolBar: ToolBar shall change HideMode of its children. This way I would have to changes only at a single point.

[scwagner]

I have the same problem, but am I having it with the TreeGrid control as well as Grid. However, the workaround posted by Colin of using

treeGrid.setHideMode(HideMode.OFFSETS);

does not seem to fix the problem for the TreeGrid control. If there is a workaround that can also work for the TreeGrid control, that would be very helpful until a fix is released.

[Andreas Samjeske]

I have the same problem, but am I having it with the TreeGrid control as well as Grid. However, the workaround posted by Colin of using

treeGrid.setHideMode(HideMode.OFFSETS);

does not seem to fix the problem for the TreeGrid control. If there is a workaround that can also work for the TreeGrid control, that would be very helpful until a fix is released.

I haven't look into TreeGrid and why this workaround ist not working.
My problem with this workaround has been this: You have to setHideMode(HideMode.OFFSETS) on the Component on which hide gets called.
Example:

SimpleContainer sc = new SimpleContainer();
Grid<T> grid = new Grid<T>(store, cm);
grid.setHideMode(HideMode.OFFSETS);
sc.add(grid);

... later ...

sc.hide();
sc.show();

Workaround not working since HideMode got set for grid, but hide is called on SimpleContainer.
If I set HideMode.OFFSETS for SimpleContainer, it will work again.