Grid with AggregatioRow and GroupSummaryView error in Internet Explorer

[francescoNemesi]

Hi,

the code below generates an error in Internet Explorer, but not in FF or Chrome, where the totals are disaplayed correctly. If I remove the totalsRow code then the code works fine... Any help appreciated, thanks.

In development mode IE I get the following error:

07:35:39.409 [ERROR] [XXXXXXXXXXXXXXXXXX] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (Error): Invalid argument.
 number: -2147024809
 description: Invalid argument.
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:195)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:120)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:507)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:264)
    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:188)
    at sun.reflect.GeneratedMethodAccessor98.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.BrowserChannel.reactToMessages(BrowserChannel.java:1668)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:401)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:222)
    at java.lang.Thread.run(Thread.java:619)

This the grid code

public class ProductsGrid extends LayoutContainer{
	
	private Grid<ProductsGridModel> grid;
	
	private GroupingStore<ProductsGridModel> store;

	private List<ColumnConfig> columns;
	private GroupSummaryView summaryGridView;

	private ColumnModel cm;
	
	private SummaryColumnConfig<Integer> summaryCol;	
	private SummaryColumnConfig<Integer> detailCol;	
	private SummaryColumnConfig<Double> valueCol;
	private SummaryColumnConfig<Double> pctCol;	
	private SummaryColumnConfig<Double> valueLastYearCol;
	private SummaryColumnConfig<Double> pctLastYearCol;
	
	private ProductsAnalysisType analysisType;

	private static int w = ProductsGridAndChart.w;
	private static int h = ProductsGridAndChart.gridH;

	private static final int categoryColWidth = 300;
	private static final int numericColsWidth = 123;
	
	public HeaderGroupConfig headerGroupConfigCurrYear;
	public HeaderGroupConfig headerGroupConfigLastYear;

	public ProductsGrid(ProductsAnalysisType analysisType) {
		super();
		
		setWidth(w);
		setHeight(h);
		
		setLayout(new FitLayout());		
	    setScrollMode(Scroll.AUTOY);

	    this.analysisType = analysisType;
		
	    columns = new ArrayList<ColumnConfig>();
	    
	    summaryCol = new SummaryColumnConfig<Integer>();
	    summaryCol.setId("summaryCol");
	    summaryCol.setResizable(false);
	    
	    detailCol = new SummaryColumnConfig<Integer>();
	    detailCol.setId("detailCol");
	    detailCol.setWidth(categoryColWidth);
	    detailCol.setHeader(analysisType.getLabel());
	    detailCol.setSortable(true);
	    detailCol.setMenuDisabled(true);
	    detailCol.setResizable(false);

	    GridCellRenderer<ProductsGridModel> doubleRenderer = new GridCellRenderer<ProductsGridModel>() {  
	    	public String render(ProductsGridModel model, String property, ColumnData config, int rowIndex,  
	    			int colIndex, ListStore<ProductsGridModel> store, Grid<ProductsGridModel> grid) {    
	    		return "<span>" + NumberFormatters.numFormatNoDecimals.format((Double) model.get(property)) + "</span>";
	    	}  
	    }; 	    

	    GridCellRenderer<ProductsGridModel> pctRenderer = new GridCellRenderer<ProductsGridModel>() {  
	    	public String render(ProductsGridModel model, String property, ColumnData config, int rowIndex,  
	    			int colIndex, ListStore<ProductsGridModel> store, Grid<ProductsGridModel> grid) {
	    		return "<span>" + NumberFormatters.pctFormat.format((Double) model.get(property)) + "</span>";	    		
	    	}  
	    }; 	    
	    
	    valueCol = new SummaryColumnConfig<Double>("value", "Asset (EUR)", numericColsWidth);
	    valueCol.setSummaryType(SummaryType.SUM);
	    valueCol.setAlignment(HorizontalAlignment.CENTER);
	    valueCol.setRenderer(doubleRenderer);	    
	    valueCol.setSummaryRenderer(new SummaryRenderer(){
			public String render(Number value, Map<String, Number> data) {
	    		return "<span>" + NumberFormatters.numFormatNoDecimals.format(value.doubleValue()) + "</span>";	    		
			}	    	
	    });	    
	    valueCol.setSortable(true);
	    valueCol.setMenuDisabled(true);
	    valueCol.setResizable(false);

	    valueLastYearCol = new SummaryColumnConfig<Double>("valueLastYear", "Asset (EUR)", numericColsWidth);
	    valueLastYearCol.setSummaryType(SummaryType.SUM);
	    valueLastYearCol.setAlignment(HorizontalAlignment.CENTER);
	    valueLastYearCol.setRenderer(doubleRenderer);	    
	    valueLastYearCol.setSummaryRenderer(new SummaryRenderer(){
			public String render(Number value, Map<String, Number> data) {
	    		return "<span>" + NumberFormatters.numFormatNoDecimals.format(value.doubleValue()) + "</span>";	    		
			}	    	
	    });	    
	    valueLastYearCol.setSortable(true);
	    valueLastYearCol.setMenuDisabled(true);
	    valueLastYearCol.setResizable(false);
	    
	    pctCol = new SummaryColumnConfig<Double>("pct", "%", numericColsWidth);
	    pctCol.setSummaryType(SummaryType.SUM);
	    pctCol.setAlignment(HorizontalAlignment.CENTER);
	    pctCol.setRenderer(pctRenderer);	    
	    pctCol.setSummaryRenderer(new SummaryRenderer(){
			public String render(Number value, Map<String, Number> data) {				
	    		return "<span>" + NumberFormatters.pctFormat.format(value.doubleValue()) + "</span>";				
			}	    	
	    });	    
	    pctCol.setSortable(true);
	    pctCol.setMenuDisabled(true);
	    pctCol.setResizable(false);

	    pctLastYearCol = new SummaryColumnConfig<Double>("pctLastYear", "%", numericColsWidth);
	    pctLastYearCol.setSummaryType(SummaryType.SUM);
	    pctLastYearCol.setAlignment(HorizontalAlignment.CENTER);
	    pctLastYearCol.setRenderer(pctRenderer);	    
	    pctLastYearCol.setSummaryRenderer(new SummaryRenderer(){
			public String render(Number value, Map<String, Number> data) {				
	    		return "<span>" + NumberFormatters.pctFormat.format(value.doubleValue()) + "</span>";				
			}	    	
	    });	    
	    pctLastYearCol.setSortable(true);
	    pctLastYearCol.setMenuDisabled(true);
	    pctLastYearCol.setResizable(false);
	    
	    columns.add(summaryCol);
	    columns.add(detailCol);
	    columns.add(valueCol);
	    columns.add(pctCol);
	    columns.add(valueLastYearCol);
	    columns.add(pctLastYearCol);

	    summaryGridView = new GroupSummaryView();
	    summaryGridView.setForceFit(false);
	    summaryGridView.setShowGroupedColumn(false);
	    
	    if(analysisType.equals(ProductsAnalysisType.MASTER)) summaryGridView.setStartCollapsed(false);
	    else summaryGridView.setStartCollapsed(true);

		store  = new GroupingStore<ProductsGridModel>();
		store.groupBy("summaryCol");
		
		cm = new ColumnModel(columns);
		
		headerGroupConfigCurrYear = new HeaderGroupConfig("", 1, 2);
		headerGroupConfigLastYear = new HeaderGroupConfig("", 1, 2); 
		
	    cm.addHeaderGroup(0, 2, headerGroupConfigCurrYear);
	    cm.addHeaderGroup(0, 4, headerGroupConfigLastYear);

	    /*
	     * START - Aggregation Row
	     */
	    
		AggregationRenderer<ProductsGridModel> aggrDoubleRenderer = new AggregationRenderer<ProductsGridModel>(){
			public Object render(Number value, int colIndex,
					Grid<ProductsGridModel> grid,
					ListStore<ProductsGridModel> store) {

				String tbr = "";
				if(value == null) tbr="<span>&nbsp;</span>";
				else tbr = "<span style=\"font-weight:bold;\">" + NumberFormatters.numFormatNoDecimals.format(value.doubleValue()) + "</span>";
				
				Log.debug("TOTAL : "+tbr);
				return tbr;

/*				
				if(value == null) return "<span>&nbsp;</span>";
				return "<span style=\"font-weight:bold;\">" + NumberFormatters.numFormatNoDecimals.format(value.doubleValue()) + "</span>";
*/				
			}
		};

		AggregationRowConfig<ProductsGridModel> totalsRow = new AggregationRowConfig<ProductsGridModel>();  
		totalsRow.setHtml("name", "Totale");
		
		totalsRow.setSummaryType("value", SummaryType.SUM);
		totalsRow.setRenderer("value", aggrDoubleRenderer);
		
		totalsRow.setSummaryType("valueLastYear", SummaryType.SUM);
		totalsRow.setRenderer("valueLastYear", aggrDoubleRenderer);
		
		AggregationRenderer<ProductsGridModel> aggrPctRenderer = new AggregationRenderer<ProductsGridModel>(){
			public Object render(Number value, int colIndex,
					Grid<ProductsGridModel> grid,
					ListStore<ProductsGridModel> store) {
				
				String tbr = "<span style=\"font-weight:bold;\">100%</span>";
				Log.debug("TOTAL : "+tbr);				
				return tbr;
				
//				return "<span style=\"font-weight:bold;\">100%</span>";				
			}
		};
		 
		totalsRow.setSummaryType("pct", SummaryType.SUM);
		totalsRow.setRenderer("pct", aggrPctRenderer);
		
		totalsRow.setSummaryType("pctLastYear", SummaryType.SUM);
		totalsRow.setRenderer("pctLastYear", aggrPctRenderer);				
		cm.addAggregationRow(totalsRow);
		
	    /*
	     * END - Aggregation Row
	     */

		
	    grid = new Grid<ProductsGridModel>(store,cm);
	    grid.setBorders(false);
	    summaryGridView.setForceFit(true);
	    grid.setView(summaryGridView);

/*	    
	    if (analysisType.equals(ProductsAnalysisType.MASTER)){	    	
	    	grid.addListener(Events.RowClick, new Listener<GridEvent<ProductsGridModel>>(){
	    		public void handleEvent(GridEvent<ProductsGridModel> be) {	    			
	    			ApplicationModel.getInstance().setMandato(be.getModel().getDetailCol(), true);
	    		}
	    	});
	    }
*/	    
	    setStore(store);
//	    add(grid);
	}
	
	public void refreshContent(List<ProductsGridModel> m, String refDate, String refDateLastYear){
		
		if(!grid.isAttached()) {
			Log.debug("Grid not attached, attaching...");
			add(grid);
		}
		
		headerGroupConfigCurrYear.setHtml("Posizione al "+refDate);
		headerGroupConfigLastYear.setHtml("Posizione al "+refDateLastYear);
		
		store.removeAll();
		store.add(m);
		
		//To update headers
		grid.reconfigure(store, cm);
		layout();
	}

	public void setAnalysisType(ProductsAnalysisType analysisType) {
		this.analysisType = analysisType;
		
	    if(analysisType.equals(ProductsAnalysisType.MASTER)) summaryGridView.setStartCollapsed(false);
	    else summaryGridView.setStartCollapsed(true);		
	}

	public ProductsAnalysisType getAnalysisType() {
		return analysisType;
	}
	
	public GroupingStore<ProductsGridModel> getStore() {
		return store;
	}

	private void setStore(GroupingStore<ProductsGridModel> store) {
		this.store = store;
	}
	
	/**
	 * @return the grid
	 */
	public Grid<ProductsGridModel> getGrid() {
		return grid;
	}

}

[micgala]

Maybe you can try to compile that with this flag enabled:
-style DETAILED

This provides better debugging info.
Maybe that an help you identify the source of the error.

[sven]

Which version of GXT are you using? Can you try to reproduce this in a small, standalone example thati mlpements EntryPoint? There was an issue in GroupSummaryView prior to GXT 2.2 which can course this. If you are not using GXT 2.2, try updating to it.

[francescoNemesi]

Thanks,

I downloaded the new 2.2.0 version and I am getting nightmarish errors from the gxt jar. Please see the post

http://www.sencha.com/forum/showthre...279#post513279

I will come back to this thread once the migration issues are fixed.

Thanks,
F

[francescoNemesi]

The problem still exists after the migration... The problem appears when I call the layout() method of the parent LayoutContainer if the grid has the AggregationRow defined. I am badly stumped

[sven]

Can you please post a fully working testcase that implements EntryPoint than? This page uses aggregationrows but does not throw an exception: http://www.sencha.com/examples/explo...egationrowgrid

I took your code and made it work for me (as i dont have all your depencies) and it worked.
In which context do you use the code?

[francescoNemesi]

I have a ContentPanel inside a TabItem. The ContentPanel has a VerticalPanel which contains two elements, the grid that's giving me problems and a chart. The problem appears if I add the AggregationRow to the ColumnModel. I must call the layout method explicitly because I want to add the grid only if the user really wants to see the data inside it, not when I add it to the VerticalPanel. As I said the error only appears in IE. FF and Chrome are fine...

I have adapted and implemented the code below from the examples and it works.... the code in my previous post does not work...

Thanks for your help

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

import com.allen_sauer.gwt.log.client.Log;
import com.extjs.gxt.samples.resources.client.Resources;
import com.extjs.gxt.samples.resources.client.TestData;
import com.extjs.gxt.samples.resources.client.model.Stock;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.GroupingStore;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.grid.AggregationRenderer;
import com.extjs.gxt.ui.client.widget.grid.AggregationRowConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridGroupRenderer;
import com.extjs.gxt.ui.client.widget.grid.GroupColumnData;
import com.extjs.gxt.ui.client.widget.grid.GroupingView;
import com.extjs.gxt.ui.client.widget.grid.HeaderGroupConfig;
import com.extjs.gxt.ui.client.widget.grid.SummaryType;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.RootPanel;

public class TestGroupingViewWithSummaryRow implements EntryPoint{
	
	private ColumnModel cm;

	public void onModuleLoad() {

	    final GroupingStore<Stock> store = new GroupingStore<Stock>();
	    store.add(TestData.getCompanies());
	    store.groupBy("industry");

	    ColumnConfig company = new ColumnConfig("name", "Company", 60);
	    ColumnConfig price = new ColumnConfig("open", "Price", 20);
	    ColumnConfig change = new ColumnConfig("change", "Change", 20);
	    ColumnConfig industry = new ColumnConfig("industry", "Industry", 20);
	    ColumnConfig last = new ColumnConfig("date", "Last Updated", 20);
	    last.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));

	    List<ColumnConfig> config = new ArrayList<ColumnConfig>();
	    config.add(company);
	    config.add(price);
	    config.add(change);
	    config.add(industry);
	    config.add(last);

	    cm = new ColumnModel(config);
	    
		final HeaderGroupConfig headerGroupConfigCurrYear = new HeaderGroupConfig("Test 1", 1, 2);
		final HeaderGroupConfig headerGroupConfigLastYear = new HeaderGroupConfig("Test 2", 1, 2); 		
	    cm.addHeaderGroup(0, 2, headerGroupConfigCurrYear);
	    cm.addHeaderGroup(0, 4, headerGroupConfigLastYear);

	    doTotalsRow();

	    GroupingView view = new GroupingView();
	    view.setShowGroupedColumn(false);
	    view.setForceFit(true);	    
	    view.setGroupRenderer(new GridGroupRenderer() {
	      public String render(GroupColumnData data) {
	        String f = cm.getColumnById(data.field).getHeader();
	        String l = data.models.size() == 1 ? "Item" : "Items";
	        return f + ": " + data.group + " (" + data.models.size() + " " + l + ")";
	      }
	    });
	    
	    final Grid<Stock> grid = new Grid<Stock>(store, cm);
	    grid.setView(view);
	    grid.setBorders(true);

	    final ContentPanel panel = new ContentPanel();
	    panel.setHeading("Grouping Example");
	    panel.setIcon(Resources.ICONS.table());
	    panel.setCollapsible(true);
	    panel.setFrame(true);
	    panel.setSize(700, 450);
	    panel.setLayout(new FitLayout());
	    panel.add(grid);
	    grid.getAriaSupport().setLabelledBy(panel.getHeader().getId() + "-label");

	    ToolBar tb = new ToolBar();
	    Button button = new Button("Reconfigure Grid");
	    button.addSelectionListener(new SelectionListener<ButtonEvent>(){
			@Override
			public void componentSelected(ButtonEvent ce) {				
		        Long millis = new Date().getTime();
				headerGroupConfigCurrYear.setHtml(millis.toString());
				headerGroupConfigLastYear.setHtml(millis.toString());
				store.removeAll();
				store.add(TestData.getCompanies());
				grid.reconfigure(store, cm);
				panel.layout();
			}
	    });
	    tb.add(button);
	    panel.setTopComponent(tb);
	    
	    RootPanel.get().add(panel);
	}
	
	
	
	private void doTotalsRow(){
		
	    /*
	     * START - TEST Aggregation Row
	     */	    
		AggregationRenderer<Stock> aggrDoubleRenderer = new AggregationRenderer<Stock>(){
			public Object render(Number value, int colIndex,
					Grid<Stock> grid,
					ListStore<Stock> store) {

				String tbr = "";
				if(value == null) tbr="<span>&nbsp;</span>";
				else tbr = "<span style=\"font-weight:bold;\">" + value.doubleValue() + "</span>";
				
				Log.debug("TOTAL : "+tbr);
				return tbr;

			}
		};

		AggregationRowConfig<Stock> totalsRow = new AggregationRowConfig<Stock>();  
		totalsRow.setHtml("industry", "Totale");
		
		totalsRow.setSummaryType("open", SummaryType.SUM);
		totalsRow.setRenderer("open", aggrDoubleRenderer);
		
		AggregationRenderer<Stock> aggrPctRenderer = new AggregationRenderer<Stock>(){
			public Object render(Number value, int colIndex,
					Grid<Stock> grid,
					ListStore<Stock> store) {
				
				String tbr = "<span style=\"font-weight:bold;\">100%</span>";
				Log.debug("TOTAL : "+tbr);				
				return tbr;
				
//				return "<span style=\"font-weight:bold;\">100%</span>";				
			}
		};
		 
		totalsRow.setSummaryType("change", SummaryType.SUM);
		totalsRow.setRenderer("change", aggrPctRenderer);
		
		cm.addAggregationRow(totalsRow);
		
	    /*
	     * END - TEST Aggregation Row
	     */
	}
	
	
}

[sven]

The call to layout is cached and is doing nothing. You also dont have to call reconfigure in your code. However, this code does not throw any exception for me.

[francescoNemesi]

Uhmmm... The error happens when I call layout(), in FF, where the code works, if i don't call layout the grid is never displayed. Also, i need to call reconfigure to force the header to update with the new labels coming from the server. Basically the idea is that I add the VP to the CP. The grid is added to the VP only after the first time the user asks the server for data (i.e. only when it's needed), hence the reason why I need to call layout() to actually show the grid.

Thanks for your help... I will see what I can do, will let you know if I make it...
F

[sven]

I was referecing to your example code now (i dont know anything else than this). And there, layout is unneeded, as the grid was already rendered by the first time.