Image Overlay with ondemand hierarchial data

6 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 12 Aug 2014 Link to this post

    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
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Aug 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 14 Aug 2014 in reply to Daniel Link to this post

    Can you provide a working sample
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 18 Aug 2014 Link to this post

    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.

     
  6. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 19 Aug 2014 in reply to Daniel Link to this post

    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
  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Aug 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready