Image Overlay with ondemand hierarchial data

[Anamika]

Hello,

I have a treeview where the root nodes are loaded at first and evertime a node is clicked the children nodes are loaded. for each node the Image is also loaded dynamically. For some nodes we Show just one Image and for some nodes we load and Image which has to be overlapped with another Image with relative Position set to bottom right. Can we achieve this ? if i use treeviewmodel imageURL i can only provide one Image. Can i overlap 2 Images and Show them in treeview

Thanks

Anamika

[Daniel]

Hello,

The treeview supports a single image URL but it is possible to show an additional image by using one of the following approaches:

• Use the SpriteCssClasses property to set a class with the with the needed background image.
• Disable the encoding with the Encoded property and add the image to the item text.
• Use a template for the items.

Regards,
Daniel
Telerik

 

 

[Anamika]

Can you provide a working sample

[Daniel]

Hi,

I attached a sample project that demonstrates the suggested approaches.

Regards,
Daniel
Telerik

 

 

[Anamika]

Hello thank you for the sample. But the sample is putting Images side by side and my requirement is overlap second Image on first towards right conditionally or just Display imageurl when additionalurl is empty
Is it possible to achive?

Anamika

[Daniel]

Hello Anamika,

You can overlap the second image with CSS e.g.

item.Text = "<img class='overlap' src='" +  model.AdditionalImageUrl +"' />" + model.Text;

.overlap {
    position:relative;
    left: -10px;
    top: 5px;
}

Regards,
Daniel
Telerik