Any way to show multiple rows for ListGrid summaries

[jay.l.fisher]

Is there any way to have grid summaries include multiple rows? For example, I have a simple grid with some numeric columns and I want to show the sum of each column as well as the average in two separate summary rows.

Or is there a way to insert one or more rows that remain in a fixed position at the top or bottom of the grid where I can include arbitrary data in each column for presentation, without that data being in the Records that back up the grid?

[Isomorphic]

The only way to do so would be to implement something similar to the existing summaries feature - another ListGrid instance, headerless and synched to the original grid for scrolling and column changes.

[jay.l.fisher]

Is there an example of this? It seems like there would be a lot to coordinate to get the second grid "synched to the original grid for scrolling and column changes."

I've attached my first attempt which is only trying to get column widths to remain synched between the two grids. But for some reason the call to getFieldWidth() is generating a javascript error. I've tried commenting out the initial call, right after the grids are drawn, but even when the method is called on resize the call to getFieldWidth() is still throwing a (null) null exception.

12:14:48.078 [ERROR] [builtinds] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (null): null
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:237)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:126)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeInt(ModuleSpace.java:245)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeInt(JavaScriptHost.java:75)
    at com.smartgwt.client.widgets.grid.ListGrid.getFieldWidth(ListGrid.java)
    at com.smartgwt.sample.client.BuiltInDS.matchGridColumns(BuiltInDS.java:92)
    at com.smartgwt.sample.client.BuiltInDS$3.onResized(BuiltInDS.java:68)
    at com.smartgwt.client.widgets.events.ResizedEvent.dispatch(ResizedEvent.java:97)
    at com.smartgwt.client.widgets.events.ResizedEvent.dispatch(ResizedEvent.java:1)
    at com.google.gwt.event.shared.HandlerManager$HandlerRegistry.fireEvent(HandlerManager.java:65)
    at com.google.gwt.event.shared.HandlerManager$HandlerRegistry.access$1(HandlerManager.java:53)
    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:178)
    at com.smartgwt.client.widgets.BaseWidget.fireEvent(BaseWidget.java:66)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:326)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:207)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:126)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:214)
    at sun.reflect.GeneratedMethodAccessor33.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:281)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:531)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352)
    at java.lang.Thread.run(Thread.java:680)

[Isomorphic]

No, there's no sample - to be clear you are basically looking to build something at the complexity level of a framework feature.

No idea what that exception is without more information.

But the quick tips are:
1. use fieldStateChanged and setFieldState() to reflect sizes and order of fields over to the second grid
2. register for Scrolled on the main ListGrid's *body* to keep scrolling in sync

[jay.l.fisher]

Thanks for the tips. I've attached a standalone example that seems to work pretty well. There are only a couple of small things I can't seem to get right.

1) How to keep the lower grid at the very bottom of the layout. It seems to want to fill out extra vertical space beyond that needed for the two rows of data. Autofit.VERTICAL doesn't seem to do it, but if I set autoHeight() the lower grid shrinks to virtual invisibility.

2) If I adjust a column in the middle of the grid manually after the grid is drawn, calling gridTotals.setFieldState(grid.getFieldState()) doesn't get all columns into alignment. It seems to be that one column now has a fixed width and the others are still auto-sizing to fill available space. Nudging the overall browser window size gets things back into alignment.

I used to see that same behavior at times in a normal ListGrid with summaries but that has long ago been fixed. So the framework must have had the same problem originally. Is there a way to handle that?

[Isomorphic]

Hi Jay

1) How to keep the lower grid at the very bottom of the layout. It seems to want to fill out extra vertical space beyond that needed for the two rows of data. Autofit.VERTICAL doesn't seem to do it, but if I set autoHeight() the lower grid shrinks to virtual invisibility.

2) If I adjust a column in the middle of the grid manually after the grid is drawn, calling gridTotals.setFieldState(grid.getFieldState()) doesn't get all columns into alignment. It seems to be that one column now has a fixed width and the others are still auto-sizing to fill available space. Nudging the overall browser window size gets things back into alignment.

There are probably a couple of quickie fixes here

- specify an explicit height for the lower grid. You know it's always going to show 2 rows so you should be able to specify an explicit fixed height of 2* standard cellHeight (typically 44px, depending on the skin).

- specify explicit field widths for each field in the main grid. This should resolve the issue with drag resizing of the main grid columns getting out of synch with the sizes of the summaries grid columns.

Let us know if this is enough for you to get rolling

Thanks
Isomorphic Software

[jay.l.fisher]

Thanks. That took care of it. The only remaining nicety is styling the totals grid so that it looks like a typical grid summary row. I've tried gridTotals.setStyleName("gridSummaryCell") and other variations but I'm not much of a css expert and I can't seem to find the right one. Can you point me in the right direction there?

[Isomorphic]

You want gridTotals.setBaseStyle("gridSummaryCell") [or actually you could use gridTotals.setBaseStyle(grid.getSummaryRowStyle()); to ensure things worked even if your skin changed the summary row styleName].

[ahabib2]

Is it possible to do this now with the multi-line summary feature in 8.1? I have a similar requirement where I'd like to have another summary row at the ListGrid level. Thanks.

[Isomorphic]

Yup, the multi-line summary feature now handles this use case.