Text & Image on node

11 posts, 1 answers
  1. Andy Green
    Andy Green avatar
    120 posts
    Member since:
    Jul 2009

    Posted 12 Oct 2009 Link to this post

    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
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 13 Oct 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy Green
    Andy Green avatar
    120 posts
    Member since:
    Jul 2009

    Posted 13 Oct 2009 Link to this post

    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
  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 14 Oct 2009 Link to this post

    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.
  6. Andy Green
    Andy Green avatar
    120 posts
    Member since:
    Jul 2009

    Posted 15 Oct 2009 Link to this post

    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
  7. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 16 Oct 2009 Link to this post

    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.
  8. Andy Green
    Andy Green avatar
    120 posts
    Member since:
    Jul 2009

    Posted 16 Oct 2009 Link to this post

    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
  9. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 19 Oct 2009 Link to this post

    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.
  10. Andy Green
    Andy Green avatar
    120 posts
    Member since:
    Jul 2009

    Posted 19 Oct 2009 Link to this post

    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
  11. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 21 Oct 2009 Link to this post

    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.
  12. Andy Green
    Andy Green avatar
    120 posts
    Member since:
    Jul 2009

    Posted 21 Oct 2009 Link to this post

    Fantastic - thank you.

    I can see a lot of uses for this.

    Andy
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017