node.set_imageUrl(null) bug:

[N]

I tried the following client-side code without success. If the node has no image, you can successfully set  the node to point to an image but you cannot remove the image after that. In other words, the following does not change anything, the current image remains assigned:

node.set_imageUrl(null);
node.set_expandedImageUrl(null);

Setting the value to an empty string (instead of null) does not work either. Any suggestions?

Thanks,
Nuri

[Atanas Korchev]

Hi Nuri,

This currently is not supported. Maybe you can remove the image by removing it from the DOM tree:

var img = node.get_imageElement();
img.parentNode.removeChild(img).

I hope this helps,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[N]

Thanks Albert,

I need to re-enable the image on the client-side though, so removing the image object seems a bit extreme. For the benefit of others I ended up hiding the image like this:

var img = node.get_imageElement();
img.style.display="none";

and later showing it again like this:

var img = node.get_imageElement();
img.style.display="block";

Regards,
Nuri

[Andy]

I had to use:

 

dependentNode.get_imageElement().style.display = "inline";

 

to show the image, otherwise the layout got messed up when repeatedly hiding / showing. On IE7, other browsers might not need this.

 

[Sky]

Removing image or hiding image will not work with trackChanges(). Anytime postback occurs, the image will be shown again. Any other solution?

Thanks.

[Kamen Bundev]

Hello Sky,

Currently it is not possible to track the RadTreeView ImageURL removal using this hack, it is client-only. We will investigate for a possible solution for this issue, but I can't give you a specific time frame for that.

All the best,
Kamen Bundev
the Telerik team

[Roberto]

I'm trying to remove an image from a node.

Is this still the only way?

[Peter Milchev]

Hello Roberto,

The client changes now can be accessed in the code behind as explained in https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/client-side-programming/accessing-client-changes-on-the-server-side. Here is an example that works as below:

<script>
    function OnClientClicked(sender, args) {
        var treeview = $find("<%= RadTreeView1.ClientID %>");
        treeview.trackChanges();
        var node = treeview.findNodeByText("MyNode");
        node.set_imageUrl("")
        treeview.commitChanges();
    }
</script>

<telerik:RadButton runat="server" ID="RadButton2" autopostback="true" Text="Postback"></telerik:RadButton>
<telerik:RadButton runat="server" ID="RadButton1" autopostback="false" OnClientClicked="OnClientClicked" Text="Remove Image"></telerik:RadButton>
<telerik:RadTreeView runat="server" ID="RadTreeView1" OnLoad="RadTreeView1_Load">
    <Nodes>
        <telerik:RadTreeNode Text="MyNode" ImageUrl="https://placeimg.com/32/32/any"></telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

protected void RadTreeView1_Load(object sender, EventArgs e)
{

    var treeview = RadTreeView1;
    foreach (ClientOperation<RadTreeNode> operation in treeview.ClientChanges)
    {
        RadTreeNode node = operation.Item;

        switch (operation.Type)
        {
            case ClientOperationType.Insert:
                break;
            case ClientOperationType.Remove:
                break;
            case ClientOperationType.Update:
                UpdateClientOperation<RadTreeNode> update = operation as UpdateClientOperation<RadTreeNode>;
                if (update.PropertyName == "ImageUrl")
                {
                    treeview.FindNodeByText(update.Item.Text).ImageUrl = update.Item.ImageUrl;
                }

                break;
            case ClientOperationType.Clear:
                break;
        }
    }
}

Regards,
Peter Milchev
Progress Telerik