This is a migrated thread and some comments may be shown as answers.

Image Overlay with ondemand hierarchial data

5 Answers 140 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 12 Aug 2014, 08:49 AM
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

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 14 Aug 2014, 08:31 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Anamika
Top achievements
Rank 1
answered on 14 Aug 2014, 08:51 AM
Can you provide a working sample
0
Daniel
Telerik team
answered on 18 Aug 2014, 07:44 AM
Hi,

I attached a sample project that demonstrates the suggested approaches.

Regards,
Daniel
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Anamika
Top achievements
Rank 1
answered on 19 Aug 2014, 09:20 AM
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
0
Daniel
Telerik team
answered on 21 Aug 2014, 07:33 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TreeView
Asked by
Anamika
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Anamika
Top achievements
Rank 1
Share this question
or