Adding a template to a node client side

3 posts, 0 answers
  1. Nick
    Nick avatar
    13 posts
    Member since:
    Oct 2007

    Posted 07 Feb 2008 Link to this post

    Is it possible to add a template to a node when the node is being created client side? I'm looking for something similar to setting a nodes NodeTemplate property server side.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 Feb 2008 Link to this post

    Hello Nick,

    At the time being it is not possible to assign a template to a client-side node. Templates are rendered on the server side hence the limitation. If you need just some additional HTML (no server controls) you can "inject" it in the node html. Here is a JavaScript code sample to get you started:

                var treeView = $find("<%= RadTreeView1.ClientID %>"); 
                var node = new Telerik.Web.UI.RadTreeNode(); 
                node.set_text("Test"); 
                treeView.get_nodes().add(node); 
                //The html you would like to use as a template 
                var html = "<table border='1'><tr><td>One</td><td>Two</td></tr></table>"
                //Get the DOM element which represents the node's contents 
                var contentElement = node.get_contentElement(); 
                //Update its html with the template 
                contentElement.innerHTML = html; 
     


    I hope this helps,
    Albert
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. John
    John avatar
    18 posts
    Member since:
    Nov 2006

    Posted 07 Apr 2009 Link to this post

    I have a solution for this client side template. I found the the server can get the new added node's value (When I test, I find the the server cannot find its new added text value or Attributes["key1"], so I make the cliend side's scripts all working on changing the node's value, then when the user save his changes, the code behind can find the new node's value(actually, all new added new nodes' value) and save the changes.

    1. First, add a button that will have this javascript event:

     

    OnClientClick="return addNode();" //this is a server linkbutton, so don't forget to include "return" in this call to avoid postback.
    //If you are using HTML controls, then OnClientClick="addNode();" is all right.

     

    The addNode javascript function is as follows:

     

    function addPage()

     

    {

     

    var tree = $find("<%= RadTreeView0.ClientID %>");

     

     

    var i=tree.get_nodes().get_count();
    tree.trackChanges();

     

     

    var node = new Telerik.Web.UI.RadTreeNode();

     

    node.set_text(

    "");

     

    node.set_value(i.toString());

     

     

    var nodes = tree.get_nodes();

     

    nodes.add(node);

     

    var index=nodes.get_count()-1;

     

     

    //add templates

     

     

    var template="<img src='drag.gif' style='float:left;' /><div style='float:left; width:80px;'><input type='text' value='page"+i+"' style='width: 72px; height:14px; font-size:10px;' onchange='setAttr("+index+",\"newName\",this.value)' /></div><div style='float:left;'>&nbsp;</div><div style='float:left; width:200px;'><input type='text' value='' style='width: 192px; height:14px; font-size:11px;' onchange='setAttr("+index+",\"newLink\",this.value)' /></div>";

     

    node.get_contentElement().innerHTML=template;

     

    //end adding templates

     

    tree.commitChanges();

    showSavePage();

     

    return false;

     

    }


     

    function setAttr(index,attrName,val)

     

    {

     

    var tree = $find("<%= RadTreeView0.ClientID %>");

     

    tree.trackChanges();

     

    var nodes = tree.get_nodes();

     

     

    var arrValue = nodes.getNode(index).get_value().split(",");

     

     

    var newValue;

     

     

    if(arrValue.length==3)

     

    {

     

    if(attrName=="newName")

     

    arrValue[1]=val;

     

    else if(attrName=="newLink")

     

    arrValue[2]=val;

    newValue=arrValue.join();

    }

     

    else

     

    {

     

    if(attrName=="newName")

     

    newValue=arrValue[0]+

    ","+val+",";

     

     

    else if(attrName=="newLink")

     

    newValue=arrValue[0]+

    ",page"+arrValue[0]+","+val;

     

    }

     

    //nodes.getNode(index).get_attributes().setAttribute(attrName,val);

     

    nodes.getNode(index).set_value(newValue);

    tree.commitChanges();

    }


    2. Second, In the code behind, we can detect the new added node and tackle with it:

     

    protected void lbSavePage_Click(object sender, EventArgs e)

     

    {

     

        List<w_1int2str> pgs = new List<w_1int2str>();

     

     

        foreach (RadTreeNode node in RadTreeView0.Nodes)

     

        {

     

            if (!node.Value.Contains(","))

     

                pgs.Add(

    new w_1int2str { Col0 = int.Parse(node.Value), Col1 = ((TextBox)node.FindControl("txtName")).Text.Trim(), Col2 =     ((TextBox)node.FindControl("txtLink")).Text.Trim() });

     

     

            else //case of Added new node which doesn's have template and TextBox controls

     

            {

     

                string[] newValue = node.Value.Split(',');

     

                pgs.Add(

    new w_1int2str { Col0 = int.Parse(newValue[0]), Col1 = newValue[1], Col2 = newValue[2] });

     

            }
        }
    .......
    }


    Hope this will be helpful for those who really want to manipulate the template at the client side.

Back to Top