Topic
  • 9 replies
  • Latest Post - ‏2013-06-05T14:26:07Z by santhiramya
SystemAdmin
SystemAdmin
9029 Posts

Pinned topic dojo tree - multiple images

‏2011-06-26T17:04:54Z |
I have requirement that I need show different images before and after text in dojo tree.
Instead of folder open, folder close and leaf images I have to show different images. and it can be different images at folder open place.

I have just attached the test image what I am trying to achieve.

Please let me know how can I achieve this

Thanks
Updated on 2011-06-29T00:30:58Z at 2011-06-29T00:30:58Z by SystemAdmin
  • SystemAdmin
    SystemAdmin
    9029 Posts

    Re: dojo tree - multiple images

    ‏2011-06-27T13:07:39Z  
    Did you look at using the "Advanced: select image based on JavaScript expression." setting in the Item Icons section of Dojo Tree builder? Here you can use JavaScript to map to a specified image.

    Tom
  • SystemAdmin
    SystemAdmin
    9029 Posts

    Re: dojo tree - multiple images

    ‏2011-06-27T14:46:45Z  
    Did you look at using the "Advanced: select image based on JavaScript expression." setting in the Item Icons section of Dojo Tree builder? Here you can use JavaScript to map to a specified image.

    Tom
    I was trying with that advance option also but could not do much, may be I don't know how to implement that. If you have any example and if you can provide that would be great help.

    And I also need to show images after text. And dojo tree doesn't give any name or id element on the text or image otherwise we can use image builder to show the image.
    Thanks
  • SystemAdmin
    SystemAdmin
    9029 Posts

    Re: dojo tree - multiple images

    ‏2011-06-27T16:25:39Z  
    I was trying with that advance option also but could not do much, may be I don't know how to implement that. If you have any example and if you can provide that would be great help.

    And I also need to show images after text. And dojo tree doesn't give any name or id element on the text or image otherwise we can use image builder to show the image.
    Thanks
    The Dojo Tree builder does not itself have any method to add images after the label, but you can override the behavior of the Dojo tree using Dojo APIs. I've attached a simple example that uses the Item Icons section in the Dojo Tree builder to customize the leading image, and also overrides the Dojo tree node creation method to append a trailing image. Both of these images are made to depend on the tree data, so every tree node could have a different image if desired.
  • SystemAdmin
    SystemAdmin
    9029 Posts

    Re: dojo tree - multiple images

    ‏2011-06-27T23:16:08Z  
    The Dojo Tree builder does not itself have any method to add images after the label, but you can override the behavior of the Dojo tree using Dojo APIs. I've attached a simple example that uses the Item Icons section in the Dojo Tree builder to customize the leading image, and also overrides the Dojo tree node creation method to append a trailing image. Both of these images are made to depend on the tree data, so every tree node could have a different image if desired.
    Thanks mtr, this worked for me. I could have never imagine to do like this, thanks
  • SystemAdmin
    SystemAdmin
    9029 Posts

    Re: dojo tree - multiple images

    ‏2011-06-28T14:51:53Z  
    Thanks mtr, this worked for me. I could have never imagine to do like this, thanks
    Another question

    Here I have images which is size 22px, I can not resize it, And dojo tree uses css (Tree.css) which has 16/18 px images, when I change Tree.css under tundra and run stand alone (not on portal) it takes the 22px (works fine). But when I run it on portal, Portal overrides this Tree.css and uses its own Tree.css when I change in portal Tree.css (path of the file is /portal_dojo/dijit/themes/tundra) under wps.war. It doesn't change css at runtime.
    I saved default.jsp also and restarted server. but did not help

    Any idea

    thanks
  • SystemAdmin
    SystemAdmin
    9029 Posts

    Re: dojo tree - multiple images

    ‏2011-06-28T15:49:00Z  
    Another question

    Here I have images which is size 22px, I can not resize it, And dojo tree uses css (Tree.css) which has 16/18 px images, when I change Tree.css under tundra and run stand alone (not on portal) it takes the 22px (works fine). But when I run it on portal, Portal overrides this Tree.css and uses its own Tree.css when I change in portal Tree.css (path of the file is /portal_dojo/dijit/themes/tundra) under wps.war. It doesn't change css at runtime.
    I saved default.jsp also and restarted server. but did not help

    Any idea

    thanks
    I would not recommend trying to modify Dojo artifacts directly: you'll run into the sort of problems you described, and even if you get it working, you'll need to re-apply your changes any time you update Dojo directly or via a Portal and/or WPF upgrade.

    Instead, I'd suggest wrapping your tree in a div with a special class (e.g., "big_images") and then use the Style Sheet builder to insert rules that select elements based on their containment within this div. For example
    
    .big_images .dijitTreeIcon, .big_images .dijitTreeContent img 
    { width: 24px; height: 24px; 
    }
    

    This also has the benefit of only impacting that particular instance of the tree: if there were other portlets that used trees, they could still use the default styling.
  • SystemAdmin
    SystemAdmin
    9029 Posts

    Re: dojo tree - multiple images

    ‏2011-06-28T19:49:52Z  
    I would not recommend trying to modify Dojo artifacts directly: you'll run into the sort of problems you described, and even if you get it working, you'll need to re-apply your changes any time you update Dojo directly or via a Portal and/or WPF upgrade.

    Instead, I'd suggest wrapping your tree in a div with a special class (e.g., "big_images") and then use the Style Sheet builder to insert rules that select elements based on their containment within this div. For example <pre class="jive-pre"> .big_images .dijitTreeIcon, .big_images .dijitTreeContent img { width: 24px; height: 24px; } </pre>
    This also has the benefit of only impacting that particular instance of the tree: if there were other portlets that used trees, they could still use the default styling.
    I actually tried as you said, but did not help

    in my page I had
    what I wrapped this with one more div e.g.

    and I also added style sheet builder and added the style sheet you provided in head tag of the page. But still it takes the same

    if possible can you please changed the model you provided and send me the updated one.

    Appreciate your help, thanks
  • SystemAdmin
    SystemAdmin
    9029 Posts

    Re: dojo tree - multiple images

    ‏2011-06-29T00:30:58Z  
    I actually tried as you said, but did not help

    in my page I had
    what I wrapped this with one more div e.g.

    and I also added style sheet builder and added the style sheet you provided in head tag of the page. But still it takes the same

    if possible can you please changed the model you provided and send me the updated one.

    Appreciate your help, thanks
    I've attached my test model for this. The styles need some tweaking, but this is just to show the basic technique.
  • santhiramya
    santhiramya
    14 Posts

    Re: dojo tree - multiple images

    ‏2013-06-05T14:26:07Z  
    I've attached my test model for this. The styles need some tweaking, but this is just to show the basic technique.

    hi,

    I  do hav this kind of requirement ...so i tried to look into this sample attached ..but when i copy this model it has nothing

    can u give me a working sample.and can some body tell me how images can be changed on javascript expression .i see this  option in the dojo tree builder  at the icons change..

     

    Thanks & Regards

    Santhi...