Featured Grid Cell Widgets bug

[romain.vdk]

Hi,
I've followed the demo here : http://www.smartclient.com/smartgwt/showcase/#featured_grid_cell_widgets

Here is my code :

final ListGrid listGrid = new ListGrid() {
	@Override  
        protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
		String fieldName = this.getFieldName(colNum);
		if ( "remarks".equals(fieldName) ) {
			HLayout recordCanvas = new HLayout(2);
			recordCanvas.addMember(new Label("test"));
			return recordCanvas ;
		} else {
			return null;
		}
	}
};
ListGridField remarks = new ListGridField("remarks","Remarks");
remarks.setFrozen(true);
remarks.setAlign(Alignment.LEFT);
remarks.setWidth(180);

My problem is instead of displaying the label "test" as expected, smartGWT displays [Object object] instead. I do not understand because it's almost copy paste from the showcase ...

[Isomorphic]

This just suggests that you don't actually have a field named "remarks", so your code to add a component never runs.

[romain.vdk]

?? I don't understand ...

What is that line for : ListGridField remarks = new ListGridField("remarks","Remarks"); ?

this listgrid field is set in the ListGrid with the other fields just like this : listGrid.setFields(ituCode,lastStatus,remarks,refNumbers,actors,departureDate,terminals,controlNumbers,departureTerminal,destinationTerminal,active);

so when the code is executed the remarks field exists ... otherwise I couldn't see it in my listgrid, isn't it ?

[Isomorphic]

Since you originally didn't show the setFields() line, we don't know that for sure, and the most likely explanation was forgetting to include it in the setFields() call or in some other way not actually using the field (eg, more than one setFields() call).

In a situation like this, where you've got a working sample and you can't replicate the functionality, don't post partial code. Some detail is going to be wrong, so posting just the part that's clearly correct won't help.

[romain.vdk]

Ok, I just tried to avoid code overflow :)
If you want, I can put you the whole grid declaration :

		// ----- ITU Code
		ListGridField ituCode = new ListGridField("ituCode",messages.labelItuCode());
		ituCode.setType(ListGridFieldType.LINK);
		ituCode.setFrozen(true);
		ituCode.setWidth(100);
		// ----- Last Status image
		ListGridField lastStatus = new ListGridField("lastStatus",messages.labelLastStatus() );
		lastStatus.setAlign(Alignment.CENTER);  
		lastStatus.setType(ListGridFieldType.IMAGE);
		lastStatus.setImageURLPrefix("../../images/status/"); // lastStatus.setImageURLPrefix("/images/status/");
		lastStatus.setImageURLSuffix(".gif");  
		lastStatus.setImageWidth(32);
		lastStatus.setImageHeight(24);
		lastStatus.setFrozen(true);
		lastStatus.setWidth(75);
		lastStatus.setCanFilter(false);
		// ----- Remarks
		ListGridField remarks = new ListGridField("remarks","Remarks");
		remarks.setFrozen(true);
		remarks.setAlign(Alignment.LEFT);
		remarks.setWidth(180);
		// ----- Custommer & Operator Reference numbers
		ListGridField refNumbers = new ListGridField("refNumbers",messages.labelReferences());
		refNumbers.setCanFilter(false);
		refNumbers.setFrozen(false);
		refNumbers.setWidth(150);
		// ----- Full / Empty
		ListGridField fullOrEmpty = new ListGridField("fullOrEmpty",messages.labelFullOrEmpty());
		fullOrEmpty.setWidth(100);
		fullOrEmpty.setCanFilter(false);
		fullOrEmpty.setFrozen(false);
		// ----- Custommers (actors)
		ListGridField actors = new ListGridField("actors",messages.labelActors());
		actors.setCanFilter(false);
		actors.setWidth(250);
		actors.setFrozen(false);
		// ----- Departure Date
		final ListGridField departureDate = new ListGridField("departureDate",messages.labelDepartureDate());
		departureDate.setCanFilter(true);
		departureDate.setType(ListGridFieldType.DATE);
		departureDate.setWidth(120);
		departureDate.setFrozen(false);
		// ----- Terminals 
		ListGridField terminals = new ListGridField("terminals",messages.labelTerminals());
		terminals.setWidth(175);
		terminals.setCanFilter(false);
		terminals.setFrozen(false);
		// ----- Control numbers
		ListGridField controlNumbers = new ListGridField("controlNumbers",messages.labelControlNumbers());
		controlNumbers.setWidth(200);
		controlNumbers.setCanFilter(false);
		// ----- HIDDEN - Departure Terminal
		final ListGridField departureTerminal = new ListGridField("departureTerminal",messages.labelDepartureTerminal());
		departureTerminal.setCanFilter(true);
		departureTerminal.setHidden(true);
		departureTerminal.setWidth(150);
		// ----- HIDDEN - Destination Terminal
		final ListGridField destinationTerminal = new ListGridField("destinationTerminal",messages.labelDestinationTerminal());
		destinationTerminal.setCanFilter(true);
		destinationTerminal.setHidden(true);
		destinationTerminal.setWidth(150);
		// ----- HIDDEN - Active transports
		ListGridField active = new ListGridField("active",messages.labelShowOnlyActiveShort());
		active.setType(ListGridFieldType.BOOLEAN);
		active.setHidden(true);
		active.setCanFilter(true);
		active.setWidth(75);
		
		final ListGrid listGrid = new ListGrid() {
			@Override  
            protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
				String fieldName = this.getFieldName(colNum);
				if ( "remarks".equals(fieldName) ) {
					return new IButton("test") ;
				} else {
					return null;
				}
			}
		};
		listGrid.setFields(ituCode,lastStatus,remarks,refNumbers,actors,departureDate,terminals,controlNumbers,departureTerminal,destinationTerminal,active);
		listGrid.setWidth100();
		listGrid.setHeight("530px");
		listGrid.setHeaderHeight(50);
		listGrid.setCellHeight(50);
		listGrid.setDataPageSize(50);
		listGrid.setAutoFetchData(true);
		listGrid.setShowFilterEditor(false);
		listGrid.setDataSource(LoadingUnitDataSource.getInstance());
		listGrid.addDataArrivedHandler(new DataArrivedHandler() {
			@Override
			public void onDataArrived(DataArrivedEvent event) {
				if ( event.getStartRow() != event.getEndRow() ) {
					if ( searchClicked.isValue() ) {
						toggleTabs();
						searchClicked.setValue(false);
					}
				}
			}
			native void toggleTabs() /*-{
				$wnd.toggleTabsContent();
			}-*/;
		});
		layout.addChild(listGrid);

[Isomorphic]

Thanks, avoiding code overflow is usually a good idea, just not in this case, where the problem was outside of the code you posted.

The problem is that you didn't enable the recordComponents feature at all. Note from the sample:

         countryGrid.setShowRecordComponents(true);          
         countryGrid.setShowRecordComponentsByCell(true);

[romain.vdk]

Thanks, I'll test that asap and let you know the result :)

[romain.vdk]

Ok, it's almost working.
I've added the two lines you specify, but [object Object] is still visible under the button (see sceenshot)
Do you have an idea?

[Isomorphic]

You're delivering an Object as data for the field (look in the RPC tab to see what it is).

See also recordComponentPosition, and consider setting a height on the components you're embedding (currently they are making the row taller, you may not want that).

[romain.vdk]

I don't understand the first part of your response, do you want to say that my datasource's reply is displayed here as the string "[object Object]" ?

For the second part, the tall size is what I want :) I just still have to set the vertical alignment on this field.

[Isomorphic]

Again, look in the RPC tab at what your DataSource is returning for the "remarks" field. Whatever you are returning on the server for the "remarks" field, it's not an atomic type (like a String or Date), so it's being rendered as [Object object].

You may have a server problem where you are returning the wrong thing, or if you are returning the data as you intended, you may want to define a CellFormatter to customize how the "remarks" field is rendered.

[romain.vdk]

oooow sorry, I just understand that the RPC tab you're talking about is the developer console's one, sorry.
I take a look at it

[romain.vdk]

Hi,
I come back with this problem (I was working on another project). I tried to display the RPC return in the developer console, but when loading the data the console just crashes (I get the custom google chrome crash page).

Firefox is more explicit : Script : http://localhost:8888/com.alea.Alea/sc/system/development/ISC_Core.js?isc_version=SC_SNAPSHOT-2010-09-23.js:238

If I say "Continue executing script" firefox just stop responding ...

[Isomorphic_Paul]

That's odd - there's no obvious reason for the RPC tab to cause a browser hang like this - most likely it's trying to serialize some huge object, or something with circular references which are confusing it.

Ultimately the question is - what data is being sent to the client as that field value? The "[object Object]" implies its some complex javascript object rather than a simple string or integer value or other atomic type.

Are you working with a SQL DataSource, a custom server DataSource or something else? What is the specified type of the "remarks" field, and how is it being populated in the data sent from the server? Do you see anything in the server logs that might explain what's going on?

Ultimately you could look at the field value directly by selecting a record in the grid and using the Results tab of the dev console to evaluate the javascript expression

isc_ListGrid_0.getSelectedRecord().remarks

(You may need to replace isc_listGrid_0 with the ID of your ListGrid - if you have difficulty determining this you can always apply an explicit ID to the grid in your java source and use that)

[romain.vdk]

I finally found what was wrong. It was because my XML file has a <remarks> tag so it was loaded as [Object object].

I rmoved that tag and I do not have the problem. I've another question now. As this tag may have multiple contents like this :

<transportRemarks>
       <remark>stopping</remark>
       <remark>goods</remark>
</transportRemarks>

How should I write the code to display the different remarks (as simple button label for example).
What I do now is this:

protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
	String fieldName = this.getFieldName(colNum);
	if ( "remarks".equalsIgnoreCase(fieldName) ) {
		Record[] remarks = record.getAttributeAsRecordArray("transportRemarks");
		int firstLevel = remarks.length;
		String str = "";
		for ( Record r : remarks ) {
			str += r.getAttribute("remark");
		}
		return new IButton(str) ;
	} else {
		return null;
	}
}