How to get a minimal autosizing ListGrid?

[jay.l.fisher]

I'm using a ListGrid as the Canvas for a CanvasItem and I want the grid to automatically size itself to the minimal size required to show the data in it, typically just two or three records. I'm not showing column headings and there are only three fields in the grid. I want the columns to autosize to the content and the grid to autosize both vertically and horizontally to fit the data in the least space possible.

I have the following settings on the grid.

grid.setShowHeader(false);
grid.setAutoFitData(Autofit.BOTH);
grid.setAutoFitFieldWidths(true);

And I am using setHeight("*") on the CanvasItem.

That works fine for the height, but not the width. The width of each column is much wider that it needs to be to fit the data. Consequently the CanvasItem is much wider than it needs to be.

I've tried adding setWidth("*") to the CanvasItem but that makes no difference. Is there another setting I'm missing?

Also, there is a border around the grid. Is there any way to get rid of the border?

[Isomorphic]

There's a defaultWidth on ListGrids of 250 which is going to act as a minimum unless you set a smaller width.

Then, with width:"*", the CanvasItem is going to size it's canvas to fill the column width as derived from numCols, colWidths and the overall size allocated to the form. So you'll need to make sure the column ends up with a small size or that the CanvasItem is set to a narrow width, since this also acts a minimum.

[jay.l.fisher]

Thanks for the quick response. I've tried adding grid.setDefaultWidth(10) and grid.setWidth(10) and it makes no difference. The CanvasItem width is much wider than the other fields on the form, so it isn't sizing to fit the width allocated based on the form.

[Isomorphic]

Right, with width:"*" on the CanvasItem, it's going to fill the column. If the column is likewise a "*" column this is going to fill all remaining space.

If you're having trouble, first, get the grid sizing properly on it's own, then, get the CanvasItem sizing property on it's own (so it does not fill remaining space, perhaps just using an overflow:"hidden" Canvas with a backgroundColor to see the space allocated to the Canvas). Then combine then. If you still have trouble with this approach, please show us code we can run to troubleshoot the problem.

[jay.l.fisher]

I got the width to work OK, but now the height is 100, not auto sizing to fit the content. Here is what I have.

		// Create a values manager for the different viewers to share the Order record.
		ValuesManager orderValuesManager = new ValuesManager();
		orderValuesManager.setDataSource(orderDS);

		// Payments in a grid, which will be a CanvasItem
		ListGrid paymentsGrid = new ListGrid();
		paymentsGrid.setDataSource(orderPaymentDS);
		paymentsGrid.setShowHeader(false);
		paymentsGrid.setAutoFitData(Autofit.BOTH);
//		paymentsGrid.setHeight(10);
		paymentsGrid.setAutoFitFieldWidths(true);
		paymentsGrid.setFields(
				new ListGridField(OrderPayment.PAYMENT_TYPE_CODE),
				new ListGridField(OrderPayment.REFERENCE_NUMBER),
				new ListGridField(OrderPayment.PAYMENT_AMOUNT)
				);
		paymentsGrid.getField(OrderPayment.PAYMENT_AMOUNT).setCellFormatter(new CellFormatter() {

			@Override
			public String format(Object value, ListGridRecord record, int rowNum,
					int colNum) {
				if (value == null) return null;
				try {  
					String currencyCode = order.getAttribute(OrderLine.ORDER_CURRENCY);
					NumberFormat formatter = currencyCode==null ? NumberFormat.getCurrencyFormat() : NumberFormat.getCurrencyFormat(currencyCode);
					return formatter.format(Double.valueOf(value.toString()));  
				} catch (Exception e) {  
					return value.toString();  
				} 
			}
		});
		CanvasItem paymentsItem = new CanvasItem();
		paymentsItem.setTitle(orderPaymentDS.getPluralTitle());
		paymentsItem.setHeight("*");
		paymentsItem.setWidth("*");
		paymentsItem.setCanvas(paymentsGrid);
		
		// Order summary information is in 3 side-by-side detail viewers.
		DynamicForm orderSummaryView1 = getStandardForm(orderValuesManager);
		orderSummaryView1.setFields(
				getNoWrapTextItem(Order.BILL_TO_FULL_NAME),
				getNoWrapTextItem(Order.BILL_TO_FULL_ADDRESS),
				getNoWrapTextItem(Order.BILL_TO_EMAIL),
				getNoWrapTextItem(Order.BILL_TO_AM_PHONE),
				getNoWrapTextItem(Order.BILL_TO_PM_PHONE),
				getNoWrapTextItem(Order.LIFETIME_VALUE)
				);
		DynamicForm orderSummaryView2 = getStandardForm(orderValuesManager);		
		orderSummaryView2.setFields(
				getOrderCurrencyFormItem(Order.MERCHANDISE_TOTAL),
				getOrderCurrencyFormItem(Order.SHIPPING_CHARGE),
				getOrderCurrencyFormItem(Order.TOTAL_DISCOUNT),
				getOrderCurrencyFormItem(Order.TOTAL_TAX_AMOUNT),
				getOrderCurrencyFormItem(Order.GIFT_CHARGE_AMOUNT),
				getOrderCurrencyFormItem(Order.ORDER_TOTAL),
				paymentsItem,
				getNoWrapTextItem(Order.CURRENCY_CODE),
				getNoWrapTextItem(Order.ORDER_CONVERSION_RATE)
				);
		DynamicForm orderSummaryView3 = getStandardForm(orderValuesManager);
		orderSummaryView3.setFields(
				getNoWrapTextItem(Order.ORDER_NUMBER),
				getNoWrapTextItem(Order.CUSTOMER_NUMBER),				
				getNoWrapTextItem(Order.RECEIVED_ON),
				getNoWrapTextItem(Order.ORDER_STATUS),				
				getNoWrapTextItem(Order.CHANNEL_CODE),
				getNoWrapTextItem(Order.CATALOG_CODE),
				getNoWrapTextItem(Order.SOURCE_CODE),
				getNoWrapTextItem(Order.ORDER_TYPE),
				new HiddenItem(Order.ENTERED_BY_USER),
				new HiddenItem(Order.ENTERED_DATE),
				new HiddenItem(Order.ENTERED_TIME)
				);
		orderSummaryView3.getField(Order.RECEIVED_ON).setItemHoverFormatter(new FormItemHoverFormatter() {	
			@Override
			public String getHoverHTML(FormItem item, DynamicForm form) {		
					return getEnteredByInfo(form.getValuesAsRecord());
			}
		});
		orderSummaryView3.getField(Order.RECEIVED_ON).setItemTitleHoverFormatter(new FormItemHoverFormatter() {	
			@Override
			public String getHoverHTML(FormItem item, DynamicForm form) {		
					return getEnteredByInfo(form.getValuesAsRecord());
			}
		});
		
		// Three detail viewers across for customer and order summary info.
		HLayout summaryLayout = new HLayout();
		orderSummaryView1.setWidth("*");
		orderSummaryView2.setWidth("*");
		orderSummaryView3.setWidth("*");
		summaryLayout.setMembers(orderSummaryView1, orderSummaryView3, orderSummaryView2);

And here is the standard form method.

	private DynamicForm getStandardForm(ValuesManager valuesManager) {
		DynamicForm form = new DynamicForm();
		form.setWrapItemTitles(false);
		form.setCanSelectText(true);
		form.setDataSource(orderDS);
		form.setValuesManager(valuesManager);
		return form;
	}

If I uncomment the line paymentsGrid.setHeight(10), then the height is fine, but the the CanvasItem and ListGrid width is extremely out of proportion with the other FormItems in the 3rd form.

I've also tried paymentsGrid.setDefaultHeight(10) and the effect is the same. The height is OK, but the width is extremely wide. It's as if each grid column about 300 pixels wide. If I get rid of the paymentsGrid.setHeight then the width auto fits to the data but the height goes back to being 100 pixels.

[Isomorphic]

You're still setting "*" height and width on the CanvasItem. Don't do this - you're telling the CanvasItem to manage the height of it's canvas and force it to conform to the dimensions assigned by columns and rows of the form. So you're applying two sizing policies at once, with predictably weird results.

[jay.l.fisher]

I've removed the setHeight("*") and setWidth("*") from the CanvasItem so I'm not trying to control it's size at all.

If I remove the setHeight(10) and setWidth(10) from the grid (so no specific size set( the width is fine (meaning it is autofit to the minimum required width), but the height is 100 (with lots of blank space).

If I put back just the setHeight(10) on the grid the height is fine but the width is much wider than required.

If I put back just the setWidth(10) on the grid the width is fine but the height is 100.

If I put back both setHeight(10) and setWidth(10) on the grid the the height is fine but the width is much wider than required.

[Isomorphic]

What you're saying is:
- setWidth(10) on the grid has essentially no effect - the grid is sizing correctly horizontally with or without it
- setHeight(10) has an effect on the height (shrinks it to fit the rows), but also makes the grid render wider than it should.

We took the snippet you attached and made it runnable by hacking in a dummy dataSource and some dummy data for the grid, and resolving dependencies on other classes we don't have, etc.

In our test (using latest 2.5 branch code) we don't see this behavior.
It may be browser specific (we're testing on Firefox), or, more likely, it's due to some difference in your app to do with how the data is populated, draw order, etc.

Here's our standalone, runnable version of your test case - the best way to proceed would probably be for you to take this and firstly verify that you don't see the problem with it, and secondly, see if you can modify it to better fit you're live app's paradigm while keeping it runnable as a standalone entryPoint, so we can see the behavior you see.

package com.foo.moo.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.NumberFormat;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.DataSourceField;
import com.smartgwt.client.types.Autofit;
import com.smartgwt.client.types.FieldType;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.FormItemHoverFormatter;
import com.smartgwt.client.widgets.form.ValuesManager;
import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.HiddenItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.grid.*;
import com.smartgwt.client.widgets.layout.HLayout;

public class JayLayoutTest implements EntryPoint {
    public void onModuleLoad() {
        // Create a values manager for the different viewers to share the Order record.
        ValuesManager orderValuesManager = new ValuesManager();
    
        // Payments in a grid, which will be a CanvasItem
        ListGrid paymentsGrid = new ListGrid();
        
        // Quick fake DS to provide fields for the grid.
        DataSource orderPaymentDS = new DataSource();
        orderPaymentDS.setClientOnly(true);
        DataSourceField field1 = new DataSourceField("field1", FieldType.TEXT);
        DataSourceField field2 = new DataSourceField("field2", FieldType.TEXT);
        DataSourceField field3 = new DataSourceField("field3", FieldType.FLOAT);
        orderPaymentDS.setFields(field1,field2,field3);
        
        
        paymentsGrid.setDataSource(orderPaymentDS);
        
        // Random set of data so the grid has something to display.
        ListGridRecord[] testData = new ListGridRecord[] {
                new ListGridRecord() {{ setAttribute("field1", "A String"); setAttribute("field2", "Another string"); setAttribute("field3", 1202.44); }},
                new ListGridRecord() {{ setAttribute("field1", "Something else"); setAttribute("field2", "Another something"); setAttribute("field3", 99.9); }},
                
        };
        paymentsGrid.setData(testData);
        
        paymentsGrid.setShowHeader(false);
        paymentsGrid.setAutoFitData(Autofit.BOTH);
        paymentsGrid.setHeight(10);
        // ID to simplify JS debugging
        paymentsGrid.setID("testGrid");
        paymentsGrid.setAutoFitFieldWidths(true);
        paymentsGrid.setFields(
                new ListGridField("field1"),//OrderPayment.PAYMENT_TYPE_CODE),
                new ListGridField("field2"),//OrderPayment.REFERENCE_NUMBER),
                new ListGridField("field3") //OrderPayment.PAYMENT_AMOUNT)
                );

        paymentsGrid.getField("field3").setCellFormatter(new CellFormatter() {
    
            @Override
            public String format(Object value, ListGridRecord record, int rowNum,
                    int colNum) {
                if (value == null) return null;
                try {  
                    String currencyCode = null;//order.getAttribute(OrderLine.ORDER_CURRENCY);
                    NumberFormat formatter = currencyCode==null ? NumberFormat.getCurrencyFormat() : NumberFormat.getCurrencyFormat(currencyCode);
                    return formatter.format(Double.valueOf(value.toString()));  
                } catch (Exception e) {  
                    return value.toString();  
                } 
            }
        });
        CanvasItem paymentsItem = new CanvasItem();
        paymentsItem.setTitle("yyy");
        paymentsItem.setHeight("*");
        paymentsItem.setWidth("*");
        paymentsItem.setCanvas(paymentsGrid);
        
        // Order summary information is in 3 side-by-side detail viewers.
        DynamicForm orderSummaryView1 = getStandardForm(orderValuesManager);
        orderSummaryView1.setFields(
                new TextItem("a"),
                new TextItem("b"),
                new TextItem("c"),
                new TextItem("d"),
                new TextItem("e"),
                new TextItem("f")
//                getNoWrapTextItem(Order.BILL_TO_FULL_NAME),
//                getNoWrapTextItem(Order.BILL_TO_FULL_ADDRESS),
//                getNoWrapTextItem(Order.BILL_TO_EMAIL),
//                getNoWrapTextItem(Order.BILL_TO_AM_PHONE),
//                getNoWrapTextItem(Order.BILL_TO_PM_PHONE),
//                getNoWrapTextItem(Order.LIFETIME_VALUE)
                );
        DynamicForm orderSummaryView2 = getStandardForm(orderValuesManager);        
        orderSummaryView2.setFields(
                new TextItem("g"),
                new TextItem("h"),
                new TextItem("i"),
                new TextItem("j"),
                new TextItem("k"),
                new TextItem("l"),
//                getOrderCurrencyFormItem(Order.MERCHANDISE_TOTAL),
//                getOrderCurrencyFormItem(Order.SHIPPING_CHARGE),
//                getOrderCurrencyFormItem(Order.TOTAL_DISCOUNT),
//                getOrderCurrencyFormItem(Order.TOTAL_TAX_AMOUNT),
//                getOrderCurrencyFormItem(Order.GIFT_CHARGE_AMOUNT),
//                getOrderCurrencyFormItem(Order.ORDER_TOTAL),
                paymentsItem,
                new TextItem("m"), //getNoWrapTextItem(Order.CURRENCY_CODE),
                new TextItem("n")   //getNoWrapTextItem(Order.ORDER_CONVERSION_RATE)
                );
        DynamicForm orderSummaryView3 = getStandardForm(orderValuesManager);
        orderSummaryView3.setFields(
                new TextItem("o"),//getNoWrapTextItem(Order.ORDER_NUMBER),
                new TextItem("p"), //getNoWrapTextItem(Order.CUSTOMER_NUMBER),               
                new TextItem("q"), //getNoWrapTextItem(Order.RECEIVED_ON),
                new TextItem("r"), //getNoWrapTextItem(Order.ORDER_STATUS),              
                new TextItem("s"), //getNoWrapTextItem(Order.CHANNEL_CODE),
                new TextItem("t"), //getNoWrapTextItem(Order.CATALOG_CODE),
                new TextItem("u"), //getNoWrapTextItem(Order.SOURCE_CODE),
                new TextItem("v"), //getNoWrapTextItem(Order.ORDER_TYPE),
                new HiddenItem("w"),//Order.ENTERED_BY_USER),
                new HiddenItem("x"), //Order.ENTERED_DATE),
                new HiddenItem("y") //Order.ENTERED_TIME)
                );
//        orderSummaryView3.getField(Order.RECEIVED_ON).setItemHoverFormatter(new FormItemHoverFormatter() {
        orderSummaryView3.getField("q").setItemHoverFormatter(new FormItemHoverFormatter() {  
            
            @Override
            public String getHoverHTML(FormItem item, DynamicForm form) {       
                    return "qqq";//getEnteredByInfo(form.getValuesAsRecord());
            }
        });
//        orderSummaryView3.getField(Order.RECEIVED_ON).setItemTitleHoverFormatter(new FormItemHoverFormatter() { 
      orderSummaryView3.getField("q").setItemTitleHoverFormatter(new FormItemHoverFormatter() { 
            @Override
            public String getHoverHTML(FormItem item, DynamicForm form) {       
                    return "qqq";//getEnteredByInfo(form.getValuesAsRecord());
            }
        });
        
        // Three detail viewers across for customer and order summary info.
        HLayout summaryLayout = new HLayout();
        orderSummaryView1.setWidth("*");
        orderSummaryView2.setWidth("*");
        orderSummaryView3.setWidth("*");
        summaryLayout.setMembers(orderSummaryView1, orderSummaryView3, orderSummaryView2);  
        
        // Actually draw it.
        summaryLayout.setWidth100();
        summaryLayout.setHeight100();
        summaryLayout.draw();
    }
    private DynamicForm getStandardForm(ValuesManager valuesManager) {
        DynamicForm form = new DynamicForm();
        form.setWrapItemTitles(false);
        form.setCanSelectText(true);
        // We don't have this DS locally - shouldn't be required for testing though.
        //form.setDataSource(orderDS);
        form.setValuesManager(valuesManager);
        return form;
    }
}

[jay.l.fisher]

Sorry if I wasn't clear. This was running against the SGWT 3.0 build.

I tried using your refactored version and setting a minimal width on the CanvasItem has the desired effect. Not sure what was different in my case.

I've since taken a different approach, using the grid data to add extra fields to the form. That actually ends up looking a lot better anyway. But thanks again for looking in to this.

[Isomorphic]

No problem. Since we never got a reproducible case we're treating this as not a confirmed bug (may have been some logic issue with your old code). But if it does resurface for any reason and you can break it down to a case that indicates something wrong with the framework code, let us know

Thanks
Isomorphic Software