Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

ServerSide Node Expand Mode Error Duplicated and Missing TreeNodes

5 Answers 109 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
PTS Group AG
Top achievements
Rank 2
PTS Group AG asked on 12 May 2010, 02:14 PM
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:
<%@ 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 ?







5 Answers, 1 is accepted

Sort by
0
PTS Group AG
Top achievements
Rank 2
answered on 17 May 2010, 08:42 AM
No one an idea ? Telerik ?
0
Nikolay Tsenkov
Telerik team
answered on 17 May 2010, 10:46 AM
Hello Stefan Handke,

Thank you for the descriptive information about your issue. This is really needed in order to provide you with the support that will be of most help.

The problem is that this issue does not replicate at my end when I try out your code. Maybe the best way to go about this is to try reproducing it with as few lines of code as possible.

Please, try again the code that you already sent to me. Maybe you already solved the problem without knowing it?

Anyway I will be happy to provide support if there is an example that reproduces the issue.


Regards,
Nikolay Tsenkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
PTS Group AG
Top achievements
Rank 2
answered on 18 May 2010, 09:25 AM
treeerror.jpg
Hello Nikolay,

I use the telerik version 2010.1.309.35.
The attached treeerror.jpg shows the strange behavior.

Here is the code:

ASPX

<%@ 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> 
 

CS
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; 
    } 
} 
 

If needed I can also send you a sample project via mail.

Regards Arne
0
PTS Group AG
Top achievements
Rank 2
answered on 19 May 2010, 11:27 AM
Hi Nikolay,
can you reproduce the issue ?


0
Nikolay Tsenkov
Telerik team
answered on 19 May 2010, 02:37 PM
Hi Stefan Handke,

Yes, I reproduced the issue (I probably didn't sаw it the last time, because the code is the same). The problem here is, that you create the initial structure of the treeView too late in the life-cycle (too late because you have custom dynamic template). You are creating it in the Page_Load, instead in the Page_Init. So the viewstate tries to apply itself when there is no provided tree structure, and this causes the invalid state of the treeview which comes in the Page_Load handler.

The solution for that problem can not be made just by few changes.

My advice is to create a template in the markup, something like the following:
<telerik:RadTreeView ID="uxRadTreeView" runat="server" OnNodeExpand="uxRadTreeView_NodeExpand" > 
   <NodeTemplate>
       <asp:TextBox runat="server"></asp:TextBox>
       <br />
       <asp:Button runat="server" Text="Submit" />
       ...
   </NodeTemplate>
</telerik:RadTreeView>
You will have to remove your current (the class implementing ITemplate) one.
This way you don't need to apply templates explicitly - it will be automatic. So you will only need to fill the right values in the nodes (in their templates) - you still can use the BudgetNode data-objects.

Having template in the markup makes the recreation of the tree not needed since it's implicitly getting a template over every node. Therefore you don't need to place anything in the Page_Init - everything is Page_Load and you create the tree only when it's not a postback.

Whit the current scenario you will only need this in your Page_Load handler:
if (!IsPostBack)
{
    Session.Clear();
    GenerateTreeView();
}

Because there is a lot of changes that you have to do, here is a short list of articles that I would recommend you to read:

Hope this will help you!


Regards,
Nikolay Tsenkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
TreeView
Asked by
PTS Group AG
Top achievements
Rank 2
Answers by
PTS Group AG
Top achievements
Rank 2
Nikolay Tsenkov
Telerik team
Share this question
or