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;'> </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.