Hi all,
i use the TreeView Control with templates and node expand mode ServerSide.
The problem now is that after a postback the treenodes are not the same as before added ???
For example i've got the following structure with one parent and three childs:
Main
-Val1
-Val2
-Val3
After postback i got: Main
-Val1
-Val1
-Val2
The node Val 1 is duplicated and Val 3 is missing.
Here is a sample:
Code Behind:
Any ideas ?
i use the TreeView Control with templates and node expand mode ServerSide.
The problem now is that after a postback the treenodes are not the same as before added ???
For example i've got the following structure with one parent and three childs:
Main
-Val1
-Val2
-Val3
After postback i got: Main
-Val1
-Val1
-Val2
The node Val 1 is duplicated and Val 3 is missing.
Here is a sample:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeLoadOnDemand.aspx.cs" Inherits="TreeLoadOnDemand" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head id="Head1" runat="server"> |
<title></title> |
<style type="text/css"> |
table.stats |
{ |
border-collapse:collapse; |
background:#EFF4FB url(teaser.gif) repeat-x; |
border-left:1px solid #686868; |
border-right:1px solid #686868; |
font:1em/145% 'Trebuchet MS',helvetica,arial,verdana; |
color: black; |
} |
.textbox |
{ |
font-family: Verdana, Arial, Helvetica, sans-serif; |
font-style:normal; |
text-align: right; |
} |
</style> |
</head> |
<body> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="uxRadScriptManager" runat="server"></telerik:RadScriptManager> |
<telerik:RadTreeView ID="uxRadTreeView" runat="server" OnNodeExpand="uxRadTreeView_NodeExpand" > |
</telerik:RadTreeView> |
<telerik:RadTreeView ID="uxRadTreeViewTest" runat="server" OnNodeExpand="uxRadTreeViewTest_NodeExpand" > |
</telerik:RadTreeView> |
<script type="text/javascript"> |
var changedData = new Array(); |
function CheckIfNumber(sender, args) { |
try { |
var el = args; |
} catch (e) { |
alert(e); |
} |
} |
function ValueChanged(sender, e) { |
try { |
var chngedItem = new Object(); |
chngedItem.oldValue = e.get_oldValue(); |
chngedItem.newValue = e.get_newValue(); |
chngedItem.id = sender.get_id(); |
changedData.push(chngedItem); |
var div = document.getElementById("div1"); |
div.innerHTML = |
"Key= " + sender.get_id() + "; OldValue=" + e.get_oldValue() + "; NewValue=" + e.get_newValue() + ";"; |
e.set_cancel(true); |
} catch (e) { |
alert(e); |
} |
} |
function ButtonClick(sender, e) { |
var radTextBox = sender; |
radTextBox.raisePostBackEvent(); |
} |
function ShowChangedValues() { |
try { |
var txt = ''; |
debugger; |
for (var i = 0; i < changedData.length; i++) { |
txttxt = txt + 'ID: ' + changedData[i].id + '; Old: ' + changedData[i].oldValue + '; New: ' + changedData[i].newValue + '<br />'; |
} |
var div = document.getElementById("div1"); |
div.innerHTML = txt; |
} catch (e) { |
alert(e); |
} |
} |
</script> |
</form> |
</body> |
</html> |
Code Behind:
using System; |
using System.Diagnostics; |
using System.Collections.Generic; |
using System.Linq; |
using System.Web; |
using System.Web.UI; |
using System.Web.UI.WebControls; |
using Telerik.Web.UI; |
public partial class TreeLoadOnDemand : System.Web.UI.Page |
{ |
protected void Page_Load(object sender, EventArgs e) |
{ |
try { |
if (!IsPostBack) { |
Session.Clear(); |
GenerateTreeView(); |
RadTreeNode nd = new RadTreeNode("Main", "Main"); |
for (int i = 0; i < 4; i++) { |
RadTreeNode ndChild = new RadTreeNode("Child " + i.ToString(), "Child " + i.ToString()); |
ndChild.ExpandMode = TreeNodeExpandMode.ServerSide; |
nd.Nodes.Add(ndChild); |
} |
nd.Expanded = true; |
uxRadTreeViewTest.Nodes.Add(nd); |
} else { |
foreach (RadTreeNode node in uxRadTreeView.GetAllNodes()) { |
Debug.WriteLine(string.Format("Node Key:{0} Text:{1}", node.Value, node.Text)); |
BudgetNode nd = (BudgetNode)Session[node.Value]; |
if (nd != null) { |
MyNodeTemplate Temp = new MyNodeTemplate(); |
Temp.text = nd.Text; |
Temp.key = nd.Key; |
Temp.val1 = nd.Val1; |
Temp.level = nd.Level; |
Temp.editableVal1 = nd.IsEditable; |
Temp.val2 = nd.Val5; |
Temp.val3 = nd.Val6; |
Temp.val4 = nd.Val3; |
Temp.val5 = nd.Val4; |
Temp.val6 = nd.Val2; |
node.NodeTemplate = Temp; |
Temp.InstantiateIn(node); |
} |
} |
} |
} catch (Exception ex) { |
string _err = ex.ToString(); |
} |
} |
protected void uxRadTreeView_NodeExpand(object sender, RadTreeNodeEventArgs e) { |
if(e.Node.Nodes.Count == 0) |
CreateChilds(e.Node); |
} |
protected void uxRadTreeViewTest_NodeExpand(object sender, RadTreeNodeEventArgs e) { |
if (e.Node.Nodes.Count == 0) { |
for (int i = 0; i < 2; i++) { |
RadTreeNode child = new RadTreeNode(e.Node.Text + " - Child " + i.ToString(), e.Node.Value + " - Child " + i.ToString()); |
child.ExpandMode = TreeNodeExpandMode.ServerSide; |
e.Node.Nodes.Add(child); |
} |
} |
} |
void GenerateTreeView() { |
uxRadTreeView.Nodes.Clear(); |
RadTreeNode main = new RadTreeNode(); |
main.Value = "Main"; |
main.Text = "Main"; |
BudgetNode ndMain = new BudgetNode("Main", "Main", 0, 0,0,0,0,0,0,false); |
MyNodeTemplate mainTemp = new MyNodeTemplate(); |
mainTemp.text = ndMain.Text; |
mainTemp.key = ndMain.Key; |
mainTemp.val1 = ndMain.Val1; |
mainTemp.level = ndMain.Level; |
mainTemp.editableVal1 = ndMain.IsEditable; |
mainTemp.val5 = ndMain.Val5; |
mainTemp.val6 = ndMain.Val6; |
mainTemp.val3 = ndMain.Val3; |
mainTemp.val4 = ndMain.Val4; |
mainTemp.val2 = ndMain.Val2; |
Session[ndMain.Key] = ndMain; |
main.NodeTemplate = mainTemp; |
main.Expanded = true; |
for (int i = 0; i < 4; i++) { |
BudgetNode ndChild = new BudgetNode("Nd " + i.ToString(), "Main|Nd " + i.ToString(), 1, 100,55,12,14,4,58,true); |
RadTreeNode sampleRadTreeNode = new RadTreeNode(); |
sampleRadTreeNode.Value = "Main|Nd " + i.ToString(); |
sampleRadTreeNode.Text = "Nd " + i.ToString(); |
MyNodeTemplate item = new MyNodeTemplate(); |
item.text = ndChild.Text; |
item.key = ndChild.Key; |
item.val1 = ndChild.Val1; |
item.level = ndChild.Level; |
item.editableVal1 = ndChild.IsEditable; |
item.val5 = ndChild.Val5; |
item.val6 = ndChild.Val6; |
item.val3 = ndChild.Val3; |
item.val4 = ndChild.Val4; |
item.val2 = ndChild.Val2; |
Session[ndChild.Key] = ndChild; |
sampleRadTreeNode.NodeTemplate = item; |
sampleRadTreeNode.ExpandMode = TreeNodeExpandMode.ServerSide; |
main.Nodes.Add(sampleRadTreeNode); |
} |
uxRadTreeView.Nodes.Add(main); |
} |
void CreateChilds(RadTreeNode parent) { |
try { |
int childs = 2; |
int level = ((MyNodeTemplate)parent.NodeTemplate).level + 1; |
Console.WriteLine("Create {0} childs level {1}.", childs, level); |
for (int i = 0; i < childs; i++) { |
BudgetNode ndChild = new BudgetNode(parent.Value + " - Nd " + i.ToString(), parent.Value + "|Nd " + i.ToString(), level, 695, 45, 85, 898, 36, 4, true); |
RadTreeNode nd = new RadTreeNode(); |
nd.Value = ndChild.Key; |
nd.Text = ndChild.Text; |
MyNodeTemplate item = new MyNodeTemplate(); |
item.text = ndChild.Text; |
item.key = ndChild.Key; |
item.val1 = ndChild.Val1; |
item.level = ndChild.Level; |
item.editableVal1 = ndChild.IsEditable; |
item.val5 = ndChild.Val5; |
item.val6 = ndChild.Val6; |
item.val3 = ndChild.Val3; |
item.val4 = ndChild.Val4; |
item.val2 = ndChild.Val2; |
nd.NodeTemplate = item; |
Session[ndChild.Key] = ndChild; |
nd.ExpandMode = TreeNodeExpandMode.ServerSide; |
parent.Nodes.Add(nd); |
} |
} catch (Exception ex) { |
Console.WriteLine(ex.ToString()); |
} |
} |
} |
class BudgetNode { |
private string text; |
private string key; |
private int level; |
private decimal val1; |
private decimal val2; |
private decimal val3; |
private decimal val4; |
private decimal val5; |
private decimal val6; |
private bool editableVal1 = false; |
public string Text { |
get { return text; } |
set { text = value; } |
} |
public string Key { |
get { return key; } |
set { key = value; } |
} |
public int Level { |
get { return level; } |
set { level = value; } |
} |
public decimal Val6 { |
get { return val6; } |
set { val6 = value; } |
} |
public bool IsEditable { |
get { return editableVal1; } |
set { editableVal1 = value; } |
} |
public decimal Val5 { |
get { return val5; } |
set { val5 = value; } |
} |
public decimal Val4 { |
get { return val4; } |
set { val4 = value; } |
} |
public decimal Val3 { |
get { return val3; } |
set { val3 = value; } |
} |
public decimal Val2 { |
get { return val2; } |
set { val2 = value; } |
} |
public decimal Val1 { |
get { return val1; } |
set { val1 = value; } |
} |
public BudgetNode() { |
} |
public BudgetNode(string Txt, string Ky, int Lev, decimal val1, decimal val2, decimal val3, decimal val4, decimal val5, decimal val6, bool Val1IsEditable) { |
this.text = Txt; |
this.key = Ky; |
this.level = Lev; |
this.val1 = val1; |
this.val6 = val2; |
this.val5 = val3; |
this.val4 = val4; |
this.val3 = val5; |
this.val2 = val6; |
this.editableVal1 = Val1IsEditable; |
} |
} |
class MyNodeTemplate : ITemplate { |
public RadTextBox radTxt; |
public RadTextBox radTxtVal1; |
public string text; |
public string key; |
public int level; |
public decimal val1; |
public decimal val2; |
public decimal val3; |
public decimal val4; |
public decimal val5; |
public decimal val6; |
public int size = 200; |
public int cellWidth = 80; |
public bool editableVal1 = false; |
public MyNodeTemplate() { |
this.radTxt = new RadTextBox(); |
this.radTxtVal1 = new RadTextBox(); |
} |
public MyNodeTemplate(string text, string key, int level, decimal val1, decimal val2, decimal val3, decimal val4, decimal val5, decimal val6) { |
this.text = text; |
this.key = key; |
this.level = level; |
this.val1 = val1; |
this.val2 = val2; |
this.val3 = val3; |
this.val4 = val4; |
this.val5 = val5; |
this.val6 = val6; |
this.radTxt = new RadTextBox(); |
this.radTxtVal1 = new RadTextBox(); |
} |
public MyNodeTemplate(string text, string key, int level, decimal val1, decimal val2, decimal val3, decimal val4, decimal val5, decimal val6, bool EditablePlan) { |
this.editableVal1 = EditablePlan; |
this.text = text; |
this.key = key; |
this.level = level; |
this.val1 = val1; |
this.val2 = val2; |
this.val3 = val3; |
this.val4 = val4; |
this.val5 = val5; |
this.val6 = val6; |
this.radTxt = new RadTextBox(); |
this.radTxtVal1 = new RadTextBox(); |
} |
public void InstantiateIn(Control container) { |
try { |
if (this.key != "") { |
int coeff = 20; |
Random r = new Random(6); |
Table table = new Table(); |
table.CssClass = "stats"; |
table.CellPadding = 0; |
table.CellSpacing = 0; |
TableRow tableRow = new TableRow(); |
tableRow.ID = "rw" + key; |
// Tree Item |
Label lblTitle = new Label(); |
lblTitle.Text = text; |
lblTitle.ID = "lblTitle" + key; |
TableCell tableTextCell = new TableCell(); |
tableTextCell.Width = size - coeff * level; |
tableTextCell.Controls.Add(lblTitle); |
tableRow.Cells.Add(tableTextCell); |
if (level > 0) { |
tableRow.Cells.Add(GetEditTextBoxTableCell("txtPlan" + this.key, r.Next().ToString() + " €", "Val 1")); |
tableRow.Cells.Add(GetTextBoxTableCell("txt2" + this.key, r.NextDouble().ToString() + " €", "Val 2", false)); |
tableRow.Cells.Add(GetTextBoxTableCell("txt3" + this.key, r.Next().ToString() + " €", "Val 3", false)); |
tableRow.Cells.Add(GetTextBoxTableCell("txt4" + this.key, r.NextDouble().ToString() + " €", "Val 4", false)); |
tableRow.Cells.Add(GetTextBoxTableCell("txt5" + this.key, r.Next().ToString() + " €", "Val 5", false)); |
tableRow.Cells.Add(GetTextBoxTableCell("txt6" + this.key, r.NextDouble().ToString() + " €", "Val 6", false)); |
} else { |
tableRow.Cells.Add(GetLabelTableCell("ItemLabel1" + this.key, "Val 1")); |
tableRow.Cells.Add(GetLabelTableCell("ItemLabel2" + this.key, "Val 2")); |
tableRow.Cells.Add(GetLabelTableCell("ItemLabel3" + this.key, "Val 3")); |
tableRow.Cells.Add(GetLabelTableCell("ItemLabel4" + this.key, "Val 4")); |
tableRow.Cells.Add(GetLabelTableCell("ItemLabel5" + this.key, "Val 5")); |
tableRow.Cells.Add(GetLabelTableCell("ItemLabel6" + this.key, "Val 6")); |
tableRow.CssClass = "hed"; |
} |
table.Rows.Add(tableRow); |
container.Controls.Add(table); |
} else { |
Console.WriteLine("Empty Key."); |
} |
} catch (Exception ex) { |
Console.WriteLine(ex.ToString()); |
} |
} |
TableCell GetTextBoxTableCell(string id, string text, string tooltip, bool Editable) { |
TableCell txt = new TableCell(); |
txt.Width = cellWidth; |
if (!Editable) { |
TextBox txt_ = new TextBox(); |
txt_.ID = id; |
txt_.Text = text; |
txt_.ToolTip = tooltip; |
txt_.Enabled = Editable; |
txt_.Width = cellWidth - 5; |
txt_.CssClass = "textbox"; |
txt.Controls.Add(txt_); |
} else { |
radTxtVal1.ID = id; |
radTxtVal1.Text = text; |
radTxtVal1.Width = cellWidth - 5; |
radTxtVal1.InvalidStyleDuration = 100; |
radTxtVal1.ClientEvents.OnButtonClick = "ButtonClick"; |
radTxtVal1.ClientEvents.OnValueChanged = "ValueChanged"; |
radTxtVal1.ClientEvents.OnValueChanging = "CheckIfNumber"; |
radTxtVal1.CssClass = "textbox"; |
txt.Controls.Add(radTxtVal1); |
} |
return txt; |
} |
TableCell GetEditTextBoxTableCell(string id, string text, string tooltip) { |
TableCell txt = new TableCell(); |
txt.Width = cellWidth; |
radTxt.ID = id; |
radTxt.Text = text; |
radTxt.Width = cellWidth - 5; |
radTxt.InvalidStyleDuration = 100; |
radTxt.ClientEvents.OnButtonClick = "ButtonClick"; |
radTxt.ClientEvents.OnValueChanged = "ValueChanged"; |
radTxt.ClientEvents.OnValueChanging = "CheckIfNumber"; |
radTxt.CssClass = "textbox"; |
txt.Controls.Add(radTxt); |
return txt; |
} |
TableCell GetLabelTableCell(string id, string text) { |
TableCell lblCell = new TableCell(); |
lblCell.Width = cellWidth; |
Label _text = new Label(); |
_text.ID = id; |
_text.Text = "<div align='Center'>" + text + "</div>"; |
_text.CssClass = "label"; |
lblCell.Controls.Add(_text); |
return lblCell; |
} |
} |
Any ideas ?