ListGridField setWidth no effect on Databound ListGrid

[toggle57]

I have tried numerous purmutations to get the setWidth method on my ListGridFields that are part of a Databound ListGrid to work but for some reason 3 of the fields are not being sized correctly.

I have provided all my source code files below - but the piece that attempts to set field widths is just below. I should set all the grid columns to the same length - all but 3 of them are being set that way:

private void gridWidthColumns() {
		ListGridField[] fields = grid.getAllFields();

		for (int i = 0; i < fields.length; i++) {
			ListGridField field = grid.getField(fields[i].getName());
			field.setWidth("*");
		}

	}

All grid fields are being correctly populated from my database and the developer console is clean of errors except for:

18:05:58.496:INFO:Log:initialized
18:05:58.605:WARN:AutoObserver:Use addInterfaceProperties() to add methods to interface [Class AutoObserver]
18:05:58.792:INFO:Log:isc.Page is loaded

package com.innotek.vantage.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuBar;
import com.smartgwt.client.widgets.menu.MenuItem;
import com.smartgwt.client.widgets.menu.events.ClickHandler;
import com.smartgwt.client.widgets.menu.events.MenuItemClickEvent;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Vantage implements EntryPoint {
	private Globals globals = Globals.getInstance();
	private VantageConstants constants = globals.getConstants();
	private VLayout vLayout = new VLayout();
	private VStack appWin = new VStack();

	public Vantage() {
	}

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		MenuBar menuBar = createMenuBar();

		vLayout.setWidth100();
		vLayout.setHeight100();
		vLayout.addMember(menuBar);
		vLayout.addMember(appWin);
		vLayout.draw();
	}

	private MenuBar createMenuBar() {
		MenuBar menuBar = new MenuBar();
		menuBar.setWidth("100%");
		menuBar.setStyleName("menubar");

		// File Menu
		Menu menuFile = new Menu();
		menuFile.setTitle(constants.MenuFile());
		menuFile.setWidth("75");

		// Applications Menu
		Menu menuApplications = new Menu();
		menuApplications.setTitle(constants.MenuApplications());
		menuApplications.addItem(createMenuItem(constants
				.MenuApplications_Products(), Applications_Products
				.getInstance()));

		menuBar.setMenus(menuFile, menuApplications);

		return menuBar;
	}

	private MenuItem createMenuItem(final String title, final Layout item) {
		MenuItem menuItem = new MenuItem(title);
		menuItem.addClickHandler(new ClickHandler() {
			public void onClick(MenuItemClickEvent event) {
				if (!appWin.hasMember(item)) {
					appWin.addMember(item);
				}
				item.show();
			}
		});

		return menuItem;
	}
}

package com.innotek.vantage.client;

import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.Side;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.CloseClickHandler;
import com.smartgwt.client.widgets.events.CloseClientEvent;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;

public class Applications_Products extends VLayout {
	static Layout theInstance;
	static VantageConstants constants = Globals.getInstance().getConstants();
	final TabSet tabSet = new TabSet();
	
	private Applications_Products() {
        
		super();
		tabSet.setTabBarPosition(Side.TOP);
		tabSet.setWidth100();
		tabSet.setHeight100();

		// Tab tabAssemblies = createTab(constants.TabProducts_Assemblies());
		// Tab tabBulkGlass = createTab(constants.TabProducts_BulkGlass());
		Tab tabCartons = createTab(constants.TabProducts_Cartons(), ProductCartonDs.getInstance());
		// Tab tabDividers = createTab(constants.TabProducts_Dividers());

		// tabSet.addTab(tabAssemblies);
		// tabSet.addTab(tabBulkGlass);
		tabSet.addTab(tabCartons);
		// tabSet.addTab(tabDividers);

		Window window = new Window();
		window.setTitle("Products");
		window.setWidth100();
		window.setHeight100();
		window.setCanDragResize(true);
		window.addItem(tabSet);
		window.setShowMinimizeButton(false);
		window.addCloseClickHandler(new CloseClickHandler() {
			public void onCloseClick(CloseClientEvent close) {
				theInstance.hide();
			}
		});

		setMembersMargin(10);
		addMember(window);
		setWidth100();
		setHeight100();
	}

	static public Layout getInstance() {
		if (theInstance == null) {
			theInstance = new Applications_Products();
		}

		return theInstance;
	}

	private Tab createTab(String title, DataSource datasource) {
		Tab tab = new Tab(title);

		final CompoundDbTableEditor editor = new CompoundDbTableEditor(datasource);

		tab.setPane(editor);
		return tab;
	}
	
	public void show() {
		super.show();
		Tab tab = tabSet.getSelectedTab();
		CompoundDbTableEditor editor = (CompoundDbTableEditor)tab.getPane();
		editor.gridHideColumns();
	}
}

package com.innotek.vantage.client;

import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Autofit;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.events.RecordClickEvent;
import com.smartgwt.client.widgets.grid.events.RecordClickHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class CompoundDbTableEditor extends HLayout {
	private DataSource datasource;
	private DynamicForm form = new DynamicForm();
	private ListGrid grid = new ListGrid();
	private IButton saveButton = new IButton("Save");

	public CompoundDbTableEditor(DataSource datasource) {
		super();
		this.datasource = datasource;
	}

	public void onInit() {
		super.onInit();

		form.setDataSource(datasource);

		saveButton.setLayoutAlign(Alignment.CENTER);
		saveButton.disable();
		saveButton.addClickHandler(new ClickHandler() {

			public void onClick(ClickEvent event) {
				form.saveData();
			}
		});

		VLayout editorLayout = new VLayout(5);
		editorLayout.addMember(form);
		editorLayout.addMember(saveButton);
		editorLayout.setWidth(280);

		grid.setWidth100();
		grid.setHeight100();
		
		grid.setDataSource(datasource);
		grid.setShowResizeBar(true);
		grid.setAutoFetchData(true);
		gridWidthColumns();
		grid.setAutoFitData(Autofit.HORIZONTAL);
		

		grid.addRecordClickHandler(new RecordClickHandler() {
			public void onRecordClick(RecordClickEvent event) {
				form.clearErrors(true);
				form.editRecord(event.getRecord());
				saveButton.enable();
			}

		});

		addMember(grid);
		addMember(editorLayout);
	}

	public DataSource getDatasource() {
		return datasource;
	}

	public void gridHideColumns() {
		ListGridField[] fields = grid.getAllFields();

		for (int i = 0; i < fields.length; i++) {
			boolean hide = fields[i].getAttributeAsBoolean("gridHide");

			if (hide) {
				grid.hideField(fields[i].getName());
			}
		}

	}

	private void gridWidthColumns() {
		ListGridField[] fields = grid.getAllFields();

		for (int i = 0; i < fields.length; i++) {
			ListGridField field = grid.getField(fields[i].getName());
			field.setWidth("*");
		}

	}

}

package com.innotek.vantage.client;

import com.smartgwt.client.data.RestDataSource;
import com.smartgwt.client.data.fields.DataSourceIntegerField;
import com.smartgwt.client.data.fields.DataSourceTextField;

abstract public class ProductDs extends RestDataSource {

	protected ProductDs(String id) {
        
		super();
		setID(id);

		DataSourceTextField prodType = new DataSourceTextField("prodType",
				"Prod Type", 1, true);
		prodType.setAttribute("gridHide", false);
			
		DataSourceTextField prodMF = new DataSourceTextField("prodMf", "MF id",
				2, true);
		prodMF.setAttribute("gridHide", false);

		DataSourceTextField prodMFCode = new DataSourceTextField("prodMfCode",
				"MF Code", 25, true);
		prodMFCode.setAttribute("gridHide", false);

		DataSourceTextField prodOther = new DataSourceTextField("prodOther",
				"Suffix");
		prodOther.setAttribute("gridHide", false);

		DataSourceTextField pk = new DataSourceTextField("pk", "Key", 4);
		pk.setPrimaryKey(true);
		pk.setAttribute("gridHide", false);

		DataSourceTextField prodDesc = new DataSourceTextField("prodDesc",
				"Description", 80, true);
		prodDesc.setAttribute("gridHide", false);

		DataSourceIntegerField custId = new DataSourceIntegerField("custId",
				"CustId");
		custId.setRequired(false);
		custId.setAttribute("gridHide", true);
		
		setFields(prodType, prodMF, prodMFCode, prodOther, pk, prodDesc, custId);
	}

}

package com.innotek.vantage.client;

import com.smartgwt.client.data.fields.DataSourceTextField;

public class ProductCartonDs extends ProductDs {

	private static ProductCartonDs theInstance;
	private static Globals globals = Globals.getInstance();

	public static ProductCartonDs getInstance() {
		if (theInstance == null) {
			theInstance = new ProductCartonDs("cartonDS");
		}
		return theInstance;
	}

	private ProductCartonDs(String id) {

		super(id);
				
		DataSourceTextField cartonPrint = new DataSourceTextField(
				"cartonPrint", "Carton Print");
		cartonPrint.setAttribute("gridHide", false);		

		DataSourceTextField topFlaps = new DataSourceTextField("topFlaps",
				"Top Flaps", 3, true);
		topFlaps.setValueMap("RSC", "AFM");
		topFlaps.setAttribute("gridHide", false);		

		DataSourceTextField bottomFlaps = new DataSourceTextField(
				"bottomFlaps", "Bottom Flaps", 3, true);
		bottomFlaps.setValueMap("RSC", "AFM");
		bottomFlaps.setAttribute("gridHide", false);		

		DataSourceTextField board = new DataSourceTextField("board", "Board");
		board.setRequired(true);
		board.setAttribute("gridHide", false);		

		DataSourceTextField outerLiner = new DataSourceTextField("outerLiner",
				"Outer Liner");
		outerLiner.setRequired(true);
		outerLiner.setAttribute("gridHide", false);		

		DataSourceTextField innerLiner = new DataSourceTextField("innerLiner",
				"Inner Liner");
		innerLiner.setRequired(true);
		innerLiner.setAttribute("gridHide", false);		

		DataSourceTextField printType = new DataSourceTextField("printType",
				"Print Type");
		printType.setAttribute("gridHide", true);		
		
		DataSourceTextField inkColours = new DataSourceTextField("inkColours",
				"Ink Colours");
		inkColours.setRequired(true);
		inkColours.setAttribute("gridHide", true);		

		DataSourceTextField other = new DataSourceTextField("other", "Other");
		other.setRequired(false);
		other.setAttribute("gridHide", true);		

		setFields(cartonPrint, topFlaps, bottomFlaps, board, outerLiner,
				innerLiner, printType, inkColours, other);

		setDataURL(globals.getServerUrl() + "_product_carton_ds.php");
	}
}

[toggle57]

Bump...

Thoughts anyone? This is really driving me nuts.

I cant understand why the call to grid.setAutoFitData(Autofit.HORIZONTAL); alone would not solve this issue.

One of the frustrations I have found, is that it is not always clear/documented whether a smartgwt api function must be called before or after draw to have an effect.

Any function that is sequense sensitive should be documented as such.

[toggle57]

It appears that setting the length on the datasource field (which I thought was only for setting a data keying input limit) also affects the sizing of columns on the grid.

It is not a problem if the length set is wider than the autosizing set on the grid, but if it is smaller, this length appears to override the autosizing.

I find this behavior surprising because I was explicitly setting the grids column sizing *after* the datasource was created and associated with the grid.

I find it confusing that this presentation specific aspect of the grid is overridden by the datasource - I had thought that the presentation aspects would be covered by ListGridField.

[toggle57]

I am still having trouble getting ListGridField.setWidth() to have any effect on my Grid. At present, all fields are formatted to the same length but all attempts to explicitly set a width using this method are doing nothing.

I have tried percentages, and pixel widths to no avail.

Does the setWidth() method have environmental or sequense related requirements to make it work?

Any help appreciated.

[toggle57]

For the benefit of others...

It appears that the problem I was experiencing was because I was getting my ListGridField objects from the Datasource objects and not explicitly creating them.

This was done based on one of the SmartGwt samples (pattern reuse sample) that did not set widths and just used the Datasource.

So if you want ListGridField.setWidths() to work you must instantiate them and not get the ones that are provided from Datasource.

[rabubakar]

How can I set the length DataSourceTextField for setting the length of the field in the grid. Please I need help

[rabubakar]

I am able to set the DataSourceTextField width using setAttribute method. Here is example

DataSourceTextField titleField = new DataSourceTextField("CaseTitle", "TITLE");
titleField.setAttribute("width", "30%");

[davidj6]

Length is set on DataSourceTextField with .setLength(). That is the maximum length in characters that can be entered. Width is the visual UI width of the form field or list grid column and should not generally be specified on a DataSource which is UI agnostic.

[ask]

Am not able to set width

Am not able to set width of datasourcetextField using textBox1.setAttribute("width", "4%");

can you please help me