Adding a template to a node client side

[Nick]

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.

[Atanas Korchev]

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

[John]

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.