Node images via CSS?

[rwozniak]

I recently submitted a forum post asking how I could set images on my menu items via CSS (using sprites):

http://www.telerik.com/community/forums/thread/b311D-behdtb.aspx

The recommended solution did work, the only downside being that, in order to make it work, I had to assign an ImageUrl that pointed to a clear gif image on every menu item (without an ImageUrl the img tag isn't even rendered). This is inconvenient, but at least it does work and allows me to have a single sprite image for all of my menus and context menus.

I now want to achieve the same effect with my tree nodes. Rather than assigning a different image to each node via the ImageUrl property, I want to have a single sprite image. The problem is that when I set the CssClass on each node, it ends up being applied to the span tag surrounding the text of the node, instead of the div tag that surrounds the text and the image of the node as I would've expected. Given this, I now do not know/if I can achieve the result I desire.

I love where Telerik has gone w/ the sprite approach, and the performance benefits that developers can gain from it, but it seems that your support for it is not quite complete in your control set. As I recommended in my other forum post, I think that the RadMenuItem and RadTreeNode objects should have ImageCssClass properties to make it easy for us to consolidate all of our images for our RadMenus and RadTreeViews into a single sprite image.

Please let me know if you have a recommended workaround for doing sprite-based RadTreeView images.

Thanks,
Ross

[Alex Gyoshev]

Hello Ross,

Great question! I've published a blog post about it - you can read it on Telerik Blogs.

I recommend downloading the sample project and going through the CSS styles - if any questions arise, comments are more than welcome.

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[rwozniak]

The only problem is that I want to have the ability to apply different CSS style to the icon and the text. Basically, when the node is selected, I want the text to look selected and have a border around it, but not the icon...like in a standard Windows tree. I don't believe there is currently a way to achieve this because the icon and the text both share the same container.

When the ImageUrl is set it generates an img tag separate from the text. This at least provides a separate element that style can be applied to.

I think it would be much better if you had something like an ImageCssClass property on objects like RadTreeNode (RadMenuItem, etc.), and it was applied to an inner container that the icon would appear in.

I'm also not sure how I could have a different 'expanded' node icon with the markup it currently generates. Ultimately there should also be an ImageExpandedCssClass property as well (and DisabledImageCssClass for that matter).

Ross

[Alex Gyoshev]

Hi Ross,

You can use the following Javascript in order to move the CSS classes (rendered through the CssClass property) to the list items within the RadTreeView:

function pageLoad()
{
    (function iterateTreeView (root) {
        var treeNodes = root.get_nodes();

        var item, textElement;

        for (var i = 0, len = treeNodes.get_count(); i < len; i++)
        {
            item = treeNodes.getItem(i);

            var textElement = item.get_textElement();

            if (textElement.className != "rtIn")
            {
                item.get_element().className += " " + textElement.className.replace('rtIn', '');

                textElement.className = "rtIn";
            }

            if (item._hasChildren())
            {
                iterateTreeView(item);
            }
        }
    })($find('<%= RadTreeView1.ClientID %>'));
}

Then, if you use a spacer image (transparent gif/8-bit-png) as ImageUrl, you can easily set the background-image CSS property of the <img> tag using a .myCustomCssClass .rtImg selector.

Sincerely yours,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[rwozniak]

I finally had a chance to implement the solution you recommended. Although it does work, sort of, running a JavaScript on load that modifies the DOM is a pretty serious hack.

The other problem is, because my tree loads its child nodes on demand, I have to run the script each time a node is expanded...at the time the callback completes. Each time the script executes, there is a very noticable flash on the screen where the node icons are not there, and then a second later they are (once the script has finished executing). Basically, it is so noticeable and unsightly that I am not going to be able to ship my product this way. I'm in a situation where I need to implement the CSS sprite technique across my app, but cannot live with a flashing tree view.

I think it's great that Telerik is a strong supporter of the CSS sprite approach, but unfortunately your support for it  is only about 80-90% complete. This is one example of a hole that must be filled in order to claim 100% support, and I hope it is something you are addressing in your next release.

Ross

[Alex Gyoshev]

Hello Ross,

While you are definitely right about the rendering of the CSS class names, this decision has been made to make an easier setting of font-styles using only one CSS class (and not a more complex selector in the form of .customClass .rtIn). Changing this behavior would cause many existing skins and modifications to break, and therefore, we cannot afford it.

The functionality that you request can be achieved by modifying the very renderer of the RadTreeView nodes to change the rendering logic. However, this could introduce numerous bugs in the client-side scripting, so it is rather not supported.

Sincerely yours,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[rwozniak]

Thanks for the information Alex. Unfortunately, it sounds like you are saying that there is really no good, or safe, way to implement the css sprite technique for RadTreeView nodes.

Some of my trees utilize a different image for each node, so without a css sprite solution it requires a very large number of individual requests from cache. The flashing that I am experiencing each time the tree renders is just too visually distracting.

Does Telerik have a plan to address this in an upcoming release? Until addressed, it will not be possible to claim comprehensive css sprite support.

Thanks again,
Ross

[Alex Gyoshev]

Hello Ross,

While we cannot change the behavior of the CssClass property of the RadTreeNodes due to backwards compatibility (a lot of clients rely on it), we could introduce a new property that will control the CSS class of an upper element (the <div> wrapper). After a short discussion we decided to introduce it - it will be available with the Q3 release.

Thank you for guiding us towards that decision; your Telerik points have been updated.

Sincerely yours,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[rwozniak]

That sounds great Alex. Thanks very much for being so responsive on this.

I knew we chose the Telerik suite for good reason.

Ross

[Alex Gyoshev]

Hi rwozniak,

I'm glad that you are pleased with your choice.

Actually, we took the time and implemented it today - it will be available with the upcoming beta release of Q3.2008. If you want us to change something, you will be welcome to provide feedback.

Regards,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[rwozniak]

Outstanding. Thanks again Alex.

Ross

[Softec]

Hi

Has the Css Property for the Div Wrapper been added? I'm using Q1 2009 and can't find such a thing, shouldn't it be on the RadTreeNode itself?

Thanks for advice!

[Atanas Korchev]

Hello Studach Joerg,

We have implemented the ContentCssClass property for the RadTreeNode object.

Best wishes,
Albert
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.