Customizing ListGrid Header menu

SmartClient Version: v9.0p_2013-10-05/LGPL Development Only (built 2013-10-05)

Browser: IE9

Can you tell me how to change the menu class for the list grid header menu (the one with things like sort, freeze, group, columns on it)?

I have my own menu class called PMDarkMenu. It is registered and I am using it on other things like Tabs just fine.

I've tried several different things to set the class used for this menu, none of which have worked. Here's what I've tried (I know that some of these don't make any sense...). This code is in the constructor of my class that extends ListGrid.

Button headerButtonProperties = new Button();
headerButtonProperties.setMenuConstructor(PMDarkMenu.class.getName());
setHeaderButtonProperties(headerButtonProperties);

Button headerMenuButtonProperties = new Button();
headerMenuButtonProperties.setMenuConstructor(PMDarkMenu.class.getName());
setAutoChildProperties("headerMenuButton", headerMenuButtonProperties);
		
setMenuConstructor(PMDarkMenu.class.getName());

Is there another object I can set the menu class on to customized the look of this menu?

[Isomorphic]

Hi
Interesting attempts! Unfortunately no, these won't work.

There is an easy way to achieve this using the Auto Child pattern, but it's not currently exposed.
The header menu is actually implemented as an autoChild with the name "headerContextMenu". As such you can use

myListGrid.setAutoChildConstructor("headerContextMenu", <fully qualified className>);

to have the headerContextMenu be created as an instance of your customized menu subclass. Your class will have to be registered for reflection for this to work.
You could alternatively use setAutoChildProperties(...); to directly set up template properties to be used when the menu is created.

We'll be officially exposing the "headerContextMenu" autoChild going forward, but you can start making use of it right away

Regards
Isomorphic Software

This did not work quite right for me. The setAutoChildProperties call does not work at all. It exceptions:

13:43:29.038 [ERROR] [sandbox] Unable to load module entry point class com.hp.isomorphic.client.sandbox.Sandbox (see associated exception for details)

java.lang.IllegalStateException: `properties' has been created.
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source)
    at java.lang.reflect.Constructor.newInstance(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:105)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:338)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:219)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:571)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:299)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
    at com.smartgwt.client.widgets.Canvas.setAutoChildProperties(Canvas.java)
    at com.hp.isomorphic.client.sandbox.controls.PMDarkListGrid.<init>(PMDarkListGrid.java:78)
    at com.hp.isomorphic.client.sandbox.Sandbox.setListGridDefaults(Sandbox.java:304)
    at com.hp.isomorphic.client.sandbox.Sandbox.setControlDefaults(Sandbox.java:163)
    at com.hp.isomorphic.client.sandbox.Sandbox.onModuleLoad(Sandbox.java:71)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:406)
    at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:526)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:364)
    at java.lang.Thread.run(Unknown Source)

In the setAutoChildConstructor call partially works. It does not exception and it changes the menu, but I'm having trouble with the styling of the menu items.

My menu class looks like this:

public class PMDarkMenu extends Menu {
  public PMDarkMenu() {
    setBodyStyleName("pm-darkMenuBody");
    setIconBodyStyleName("pm-darkMenuBody");
    setBackgroundColor(null);
    setBaseStyle("pm-darkMenuEmptyField");
    setStyleName("pm-darkMenu");
    setShowKeys(false);
    setShowSubmenus(false);

    ListGridField iconField = getField(MenuFieldID.ICON.getValue());
    iconField.setBaseStyle("pm-darkMenuIconField");
    ListGridField titleField = getField(MenuFieldID.TITLE.getValue());
    titleField.setBaseStyle("pm-darkMenuTitleField");
  }
}

When I do this for the menu on may TabSet, this works fine. However, in this case, the menu itself gets my style names, but the menu items do not (they get the default of menuIconField and menuTitleField). Can you shed any light on what is going wrong?

Also, I not certain on how to change the style name for the hover component that pops up with the title is too long. It comes up with a style of "canvasHover" and I can't find the right place to change this either. Let me know if you want me to post this as a separate issue on the forum.

[Isomorphic]

One of our developers is scheduled to take a deeper look at the problem with customizing the ListGrid header menu.

On your other question - yes - it'd probably be better to start a new thread for unrelated things, but since you've asked here - there actually is a property to customize this at the ListGrid level, but it was not exposed.
We've just made a change to support this - as of the next nightly build (4.0p and 4.1d branches), look for ListGrid.setHeaderHoverStyle()

Regards
Isomorphic Software

Sounds great. Thanks for all your help.

[Isomorphic]

Just a quick note to let you know that this issue is not forgotten. We have a developer investigating what appears to be some subtle issues in this area, so we'll follow up with more information (including a working approach) when we have completed our investigations.

Regards
Isomorphic Software

[Isomorphic]

There were some issues resolved in this area that will be fixed in tonight's nightly build. At that point you should be able to do the following to accomplish the behavior your looking for.

The "properties" class adds a draw event handler which modifies the base style of the fields. Redraw has to be called in order for the changes to show.

public class BuiltInDS implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
\		ListGrid listGrid = new ListGrid(DataSource.get("animals"));
		listGrid.setShowHeaderContextMenu(true);
		listGrid.setAutoChildProperties("headerContextMenu", new XMenu());
		listGrid.setWidth(400);
		listGrid.draw();
	}
}

public class XMenu extends Menu {

	public XMenu() {
		addDrawHandler(new DrawHandler() {
			@Override
			public void onDraw(DrawEvent event) {
			    ListGridField iconField = getField(MenuFieldID.ICON.getValue());
			    iconField.setBaseStyle("dark");
			    ListGridField titleField = getField(MenuFieldID.TITLE.getValue());
			    titleField.setBaseStyle("dark");
			    redraw();
			}
		});
	}
	
}