[CLOSED] Add an image as icon

[Sharon]

I would need some more icons for the treepanel. Is there some way to add them?

Thanks,
Sharon

[methode]

Hi Sharon,

if you set it in codebehind you need to set ScriptManager.RegisterIcon(Icon.x) at page_load.

If you search "treepanel icon" in search box you'll find various posts also for client code.

Hope it helps

Matteo

[Sharon]

My problem is that I need a new image. That is not an icon in coolite at the moment. (Naturally, I just created it...)
I want to use this image as an icon with the normal code coolite uses to handle icons.

I know how to work with icons in coolite. I don't know how to integrate a new image as an icon into coolite.

[Vladimir]

Hi,

If you need to use icon which is not presening in Icon enum then need use IconCls property (preffered way) or IconFile property


IconCls - A css class to be added to the nodes icon element for applying css background images
IconFile - The path to an icon for the node. The preferred way to do this is to use the cls or iconCls attributes and add the icon via a CSS background image.


The example of class for IconCls

.icon-add{background-image:url(myicon.png) !important;}

[Sharon]

Ok, I created a class:

.node-delete
{
    background: transparent url(/images/page_bin.png) no-repeat important!;
}

And I set it like this:

                        Coolite.Ext.Web.TreeNode node = new Coolite.Ext.Web.TreeNode();
                        node.NodeID = BinderTreeHandler.CreateNodeId(nodeId, doc.Id);
                        node.Text = prop.TemplateName;
                        node.Qtip = prop.TemplateNumber;
                        node.IconCls = "node-delete";
                        node.Leaf = true;
                        nodes.Add(node);

But I don't see my picture in the tree, just the default icon. :(

[Vladimir]

Hi,

Try to use 'background-image' only, like in my post

[Sharon]

I changed it to

.node-delete
{
    background-image: url(/images/page_bin.png) important!;
}

No change.

[Vladimir]

Hi,

The 'exclamation point' symbol must be before 'important' word

!important

[abhishek_agrawal]

iconCls worked. But how do the icon will get adjusted based on the image height and width. Currently I can see that it is always 18X16(x-tree-node-icon). It is possible to change the icon height and width? If yes then how?

[Vladimir]

Hi,

You can add width and height to the css rule which you set for IconCls property.

.node-delete
{
    background-image: url(/images/page_bin.png) !important;    width:32px;    height:32px;
}

But I am not sure about UI (it can be ugly in this case) because tree was not designed to work with large icons


If you have additional questions then please create new topic (this topic is marked as CLOSED)