TreeGrid: Displaying Icon for hierachy column

I want to display different icons depending on type of object that I have in my tree grid. For example, if I have a folder name, I want to display a folder icon before the name and if I have a document I want to display a document icon before the name. I was trying to use a TemplateRenderer but the TreeGrid addHierarchyColumn method does not support a TemplateRenderer.

Any ideas?

Thanks,
Eugene

Hi!
I took code from addHierarchyColumn method, and created my own using TemplateRenderer.

			TemplateRenderer.<OutlineDataEntry> of("<vaadin-grid-tree-toggle "
					+ "leaf='[[item.leaf]
]' expanded='{{expanded}}' level='[[level]
]'>"
					+ "<img src='" + "[[item.icon]
]" + "' alt=''>&nbsp;&nbsp;" 
					+ "[[item.name]
]"
					+ "</vaadin-grid-tree-toggle>")
			.withProperty("leaf", item -> !outlineTree.getDataCommunicator().hasChildren(item))
			.withProperty("icon", icon -> String.valueOf(iconProvider.apply(icon)))
			.withProperty("name", value -> String.valueOf(valueProvider.apply(value))));

So how do I use this template renderer if addHierarchyColumn doesn’t support it? See https://github.com/vaadin/vaadin-grid-flow/issues/431

Thanks.

Use treeGrid.addColumn with this TemplateRenderer.
Check code of addHierarchyColumn method - you will see same call of addColumn.

I used to leverage similar trick for a couple of months. It really works.

<vaadin-grid-tree-toggle leaf='[[item.leaf]
]' expanded='{{expanded}}' level='[[level]
]'>[[item.nameValue]
]
	<iron-icon icon='vaadin:[[item.IconName]
]' style='fill:[[item.iconColor]
]; height: 10px'>
</vaadin-grid-tree-toggle>

But now I need to show two icons.

<vaadin-grid-tree-toggle leaf='[[item.leaf]
]' expanded='{{expanded}}' level='[[level]
]'>[[item.nameValue]
]
	<iron-icon icon='vaadin:[[item.IconName1]
]' style='fill:[[item.iconColor1]
]; height: 10px'>
	<iron-icon icon='vaadin:[[item.IconName2]
]' style='fill:[[item.iconColor2]
]; height: 10px'>
</vaadin-grid-tree-toggle>

Unfortunately, only the first icon is displayed. Any ideas, how to display more than one icon ?

Have you tried this?

<vaadin-grid-tree-toggle leaf='[[item.leaf]
]' expanded='{{expanded}}' level='[[level]
]'>[[item.nameValue]
]
	<iron-icon icon='vaadin:[[item.IconName1]
]' style='fill:[[item.iconColor1]
]; height: 10px'></iron-icon>
	<iron-icon icon='vaadin:[[item.IconName2]
]' style='fill:[[item.iconColor2]
]; height: 10px'></iron-icon>
</vaadin-grid-tree-toggle>