Treegrid with icons/images on the right side of text

[coryendle]

Hello,

I am using SmartGWT 3.0.

I have a treegrid and the display node (first column) needs to display an icon/image decorator to the RIGHT of the text (just at the end of the text) for certain nodes based on some criteria.

Is there a way to display icons/images just to the right of the text that is displayed for a treenode?

Any examples or pointers would be appreciated!

Thanks,
Cory

[Isomorphic]

You can use either valueIcons or the CellFormatter APIs to do this.

[coryendle]

Thanks.

I am using a CellFormatter to display the text and add an image icon on the right side. That works fine. Here is what I have:

 
TreeGridField nameField = new TreeGridField("PropertyName");  
                      
        nameField.setCellFormatter(new CellFormatter() {
			public String format(Object value, ListGridRecord record,
					int rowNum, int colNum) {
				if (colNum == 0) {
					
					return "<b>" + value + "</b> <img src=\"images/star_blue.png\" width=\"12\" height=\"12\" /> ";
				} else {
					return value.toString();

				} 
			}
		});

This will display the image to the right of the text, but I also need the image to be clickable. When a user clicks on the image, I need to display a pop up dialog.

Is there a way I can add a click handler to this image?

I tried to create an ImgButton and add a click handler to it and then use this in the CellFormatter. I called ImageButton.getInnerHTML(). This displayed the image, but the image didn't respond to any clicks.

Thanks,
Cory

[coryendle]

I still haven't been able to find a solution to show hover text for these icons and handle mouse click events with valueIcons or cellFormatters.

Any help would be greatly appreciated.

Thanks!

[RAS]

Hello Coryendle,
Please take a look at the following link:

http://www.smartclient.com/smartgwt/...lover_controls

In this example your requirements are implemented on a ListGrid. Now TreeGrid extends ListGrid, so the same functionality can be achieved in TreeGrid also.

[coryendle]

Thanks RAS!

This helps, but there is one more requirement. I need the canvas with the image on it to be just to the right of the text in that cell.

Is there any way to place the image to the right of the text? I see you can set alignment on the canvas, but I somehow need determine the length of the text for each cell and then place this image to the right of it.

For example, in the tree below, the "*" indicates the image and where I need it to be placed.

- Top level tree node
+ node 1 *
+ node 2 with a lot of text *
+ node 3 *

Thanks,
Cory

[RAS]

Hello Cory,
Even I'm facing the same issue. The images I've used in my tree are appeared at the same place irrespective of the text length. I haven't tried to sort it out yet because of low priority. But whenever I'll find the solution, I'll definitely post it here. And before that if you find the solution, please post here for me.
Thanks.