Dragging Node image and text

[Karthikeyan]

Hi,

Using Rad TreeView while dragging is it possible to drag both Node text and image/icon?

Currently while dragging tree node it is displaying Node text only.

Thanks & Regards,

Karthikeyan  

[Yana]

Hi Karthikeyan,

You can achieve this functionality by using templates and adding the image there like this:

<NodeTemplate>
    <img src="Images/icon.gif" /><%#DataBinder.Eval(Container, "Text") %>
</NodeTemplate>

Best wishes,
Yana
the Telerik team

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

[Quinten]

Hello!

I had the same issue: I want to display an image while dragging.  The solution you list above will attach the same image to all nodes in the tree.  I'm creating my tree dynamically, and it's heirarchical: the first level is a category (non-draggable), and the subordinate level is the nodes corresponding to that category (draggable).  So, I don't want an image on the non-draggable nodes. 

Is there a way to dynamically determine the template image that will be used, or to choose to *not* use an image for a node?

Here's the declarative code:

<telerik:RadTreeView ID="rtvWidgetMenu" runat="server" EnableDragAndDrop="True" BorderWidth="1px"
 Width="98%" CausesValidation="False" PersistLoadOnDemandNodes="False" ShowLineImages="False"
 SingleExpandPath="True">
   <NodeTemplate>
       <img src="Images/widget.png" /><%#DataBinder.Eval(Container, "Text") %>
    </NodeTemplate>
    <ExpandAnimation Type="None" />
</telerik:RadTreeView>

... and the codebehind:

        ''' <summary>
        ''' As widgets are added, update the attribute property with additional information
        ''' </summary>
        ''' <remarks>this event fires as each item is added to the widget menu</remarks>
        Protected Sub cRadTreeViewControl_NodeDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles cRadTreeViewControl.NodeDataBound
            Dim item As DashboardWidgetMenuItem = DirectCast(e.Node.DataItem, DashboardWidgetMenuItem)

            '*** add appropriate attributes to draggable items
            '*** TODO: set up CSS class for images; tie images to database
            If CType(e.Node.DataItem, DashboardWidgetMenuItem).ParentId IsNot Nothing Then
                e.Node.AllowDrag = True
                e.Node.AllowDrop = True
                ' e.Node.ImageUrl = "~\images\widget.png"
                ' e.Node.HoveredImageUrl = "~\images\widget.jpg"
                e.Node.Attributes.Add("ControlPath", item.ViewControlPath)
                e.Node.Attributes.Add("TitleText", item.Description)
                e.Node.Attributes.Add("ViewId", item.ViewId.ToString())
                e.Node.Attributes.Add("WidgetId", item.WidgetId.ToString())
            Else
                e.Node.AllowDrag = False
            End If
        End Sub

Thank you!

[Nikolay Tsenkov]

Hi Patrick Wirtz,

A solution to your problem would be to create your own template and to add it from the code-behind to the dynamically created nodes.
Here is a reference that should help you creating the server-side template class:
http://www.telerik.com/help/aspnet-ajax/tree_templatesruntime.html

Also, thank you for indicating that problem - we found a bug related to it (when image is assigned through ImageUrl of the RadTreeNode it's not displayed during Drag, but if it's added through NodeTemplate it shows up). The bug is being logged and will be fixed ASAP!
For now you can solve your problem (as spoken above) with dynamically added (server-side) templates.

Hope this is helpful!


Regards,
Nikolay Tsenkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.