Text & Image on node

[Andy Green]

Hi

I'm using the tree view to display names and on clickin the name I'm able to load that persons data into a form. The top level node is the group the person belongs to. This is all driven from code behind with the data coming from a class.

This is my load code to populate the tree.

.DataValueField = 1

.DataSource = dt

.DataFieldID =

"ID"

 

 

 

.DataFieldParentID = "ParentID"

 

 

 

.DataTextField = "Node"

 

 

 

.DataValueField = "ChildID"

 

 

 

.DataBind()

 

 

What I'd like to do now is add an image to the person name - this is the secon level node, and have that fire a separate event, so not to load the paersons details into a form, but rather load their data into a report.

How can I add this image just to the persons name node and fire 2 separate routines.

Andy

[Yana]

Hello Andy,

I'm not sure I understand this requirement. You can use NodeDataBound event to map additional columns from the datasource as it's explained here.

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Green]

What I have is the persons name that I click on to get the data for that person, what I want to do is have an image nest to the persons name, that when clicked, rund a report.

I need to add the image, and then handle the on click in a different way to the text onclick.

Andy

[Veselin Vasilev]

Hi Andy Green,

To have an image next to the node you need to set the ImageUrl property of the node. This could be done in the NodeDataBound event as stated above.
Then you can use the following javascript code (just copy it to your aspx page) to subscribe to the click event of the image:

<script type="text/javascript">
   window.$ = $telerik.$;
   $(document).ready(function () {
       $(".rtImg").click(imageClick); });


   function imageClick()
   {
      // image click handler
   }
</script>

Hope this helps

Regards,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Green]

Thanks

Nearly there, this puts an image on every node, I want them just against the names on the second level, how would I achieve this.

Also when I click in the image, it runs the node click event, not the javascript.

Bad week so far what with this and the reporting issues I have, not as easy to do as it first appears.

Andy

[Veselin Vasilev]

Hi Andy Green,

Here is a sample:

<telerik:RadTreeView ID="RadTreeView1" runat="server"
    DataFieldID="idResource"
    DataFieldParentID="idResourceParent"
    DataSourceID="SqlDataSource1"
    DataTextField="name"
    DataValueField="idResource"
    onnodeclick="RadTreeView1_NodeClick"
    onnodedatabound="RadTreeView1_NodeDataBound" >
</telerik:RadTreeView>

<script type="text/javascript">
    window.$ = $telerik.$;
    $(document).ready(function() {
        $(".rtImg").click(imageClick);
    });

    function imageClick() {
        // image click handler
        alert("click image");
        return false;
    }
</script>

protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)
{
    if (e.Node.Level == 1)
    {
        e.Node.ImageUrl = "Telerik.ico";
    }
}

Hope this helps.

Greetings,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Green]

Thanks

This worked OK, I think my mistake was putting the javascript in with the main javascript inclued. If I place it in one of the content areas it's ok. (Sorry forgot to say I'm using masterpages)

This fires the JS OK, but I need the ID of the node at the server, is there any more help you can offer.

In the meantime does the control diferentiate between what part of the node is clicked, before posting back.

Could I do this easier with a node template?

Andy

[Veselin Vasilev]

Hi Andy Green,

The postback will happen no matter where you click in the node.

You can store the ID to the Value property of the node (by using the DataValueField property) and then use node.Value to get the ID.

Hope this helps.

Kind regards,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Green]

Thanks Veselin

I'm using the e.node.value already on the server, and this is giving me what I want when the user clicks the node, what I want to do is run some other server side code when the user clicks the image, the exampe you have given me fires a client side event for the image click.

How do I get this (with the node id) back to the server so I can have 2 different events from the same node? (text click and image click)

These controls are new to use here, we have 3 licences but I'm the only one trying to use them, perhaps when other developers pick them up we can help each other, but for now you guys are all I have.

I'm begining to think I cant do alot of what I want and for some reason all my gremlins have come at once, with this and my reporting problems. I've painted myself into a corner, thinking the controls would do what I wanted easily, but inspite of great forum help and the docs and videos, the help does seem some what disjointed.

ANdy

[Veselin Vasilev]

Hi Andy Green,

Here is what you can do - add a hidden field which will hold whether the image or the node text was clicked.
Here is the complete code:

<telerik:RadTreeView ID="RadTreeView1" runat="server"
    DataFieldID="idResource"
    DataFieldParentID="idResourceParent"
    DataSourceID="SqlDataSource1"
    DataTextField="name"
    DataValueField="idResource"
    onnodeclick="RadTreeView1_NodeClick"
    onnodedatabound="RadTreeView1_NodeDataBound" >
</telerik:RadTreeView>

<asp:HiddenField ID="hdnImageClicked" runat="server" Value="false" />

<script type="text/javascript">
    window.$ = $telerik.$;
    $(document).ready(function() {
        $(".rtImg").click(imageClick);
    });

    function imageClick() {
        // image click handler
        $get("hdnImageClicked").value = "true";
    }
</script>

Then in the server NodeClick event you can check the value of the hidden field and perform different actions:

protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e)
{
    if (hdnImageClicked.Value == "true")
    {
        //image clicked
        Response.Write("Image clicked");
        hdnImageClicked.Value = "false";
    }
    else
    {
        //node text clicked
        Response.Write("Node text clicked");
    }
}

Hope this helps.

Greetings,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Green]

Fantastic - thank you.

I can see a lot of uses for this.

Andy