Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > Add user control dynamically

• Timo

  Posted on Jan 29, 2012 (permalink)

  Hi,
  
  I want to add a usercontrol into a node from treeview dynamically, and I think that this node will be inserted in a nodetemplate. I searched through forum, but I didn't find about it.
  
  If someone knows please tell me.
  
  Thanks

  Reply

• Answer Princy MVP

  Posted on Jan 30, 2012 (permalink)

  Hello,
  
  Try the following code snippet.
  C#:
  

  protected void Page_Load(object sender, EventArgs e)

    {

        Panel pnl1 = new Panel();

        Control myControl = LoadControl("edit_WebUserControl.ascx");

        RadTreeNode newNode = new RadTreeNode();

        myControl.ID = "ucSection";

        pnl1.Controls.Add(myControl);

        newNode.Controls.Add(pnl1);

        RadTreeView1.Nodes.Add(newNode);

   }

  
  Thanks,
  Princy.

  Reply


• Timo

  Posted on Jan 30, 2012 (permalink)

  Hi,
  
  Thanks Princy for your solution.
  
  I want to work to a tree like in the picture.
  I want to use page methods to load the data. The usercontrol (here it's a  grid, but I want to add a listview) I have to add dynamically because it will be just to the last level of each node.
  I made it to add a usercontrol to OnNodeExpand event, but not in web method. And I saw that if I added the usercontrol to OnNodeExpand event, and I change the page of the grid(or anything else which make a postback), the grid is empty.
  
  Please give me some help how to do this.
  Thanks,
  Timo

  Attached files

  • TreeView.png

  Reply

• Plamen Zdravkov Plamen Zdravkov

  Posted on Feb 2, 2012 (permalink)

  Hello,

   
  I tested the functionality the you described but could not observe the issue. Would you please post the code that you are using because it is not very clear how exactly are you adding RadGrid in the node?
   

  All the best,
  Plamen Zdravkov
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply

• Timo

  Posted on Feb 2, 2012 (permalink)

  Hi,
  
  I made it to add userControl in a tree, but just using serverside, not page methods.
  But now I have another issue. The usercontrol is a grid, and if I select another page from grid or click on edit link from grid, the grid disappears, even that I put the grid in radAjaxPanel. I want that just the grid to refresh if I want to edit a row.
  Here is my code: 
  Default.aspx
  

  <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>            
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" />

  <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">

              <telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeExpand="RadTreeView1_NodeExpand">

              </telerik:RadTreeView>

  </telerik:RadAjaxPanel>

  
  Default.aspx.cs
  

  protected void Page_Load(object sender, EventArgs e)

      {

          if (!IsPostBack)

          {

              LoadRootNodes(RadTreeView1, TreeNodeExpandMode.ServerSide);

          }

      }

   

  private static void LoadRootNodes(RadTreeView treeView, TreeNodeExpandMode expandMode)

      {

          DataTable data = GetData(new SqlCommand("SELECT * FROM ProductCategories WHERE ParentId IS NULL"));

   

          foreach (DataRow row in data.Rows)

          {

              RadTreeNode node = new RadTreeNode();

              node.Text = row["Title"].ToString();

              node.Value = row["CategoryId"].ToString();

              node.Attributes["isLast"] = row["IsLast"].ToString();

              node.ExpandMode = expandMode;

              treeView.Nodes.Add(node);

          }

      }

  protected void RadTreeView1_NodeExpand(object sender, RadTreeNodeEventArgs e)

      {

          DataTable data = GetChildNodes(e.Node.Value);       

          bool isLast = Convert.ToBoolean(e.Node.Attributes["isLast"].ToString());      

   

          if (!isLast)

          {

              foreach (DataRow row in data.Rows)

              {

                  RadTreeNode node = new RadTreeNode();

                  node.Text = row["Title"].ToString();

                  node.Value = row["CategoryId"].ToString();

                  node.Attributes["isLast"] = row["IsLast"].ToString();

                  if (Convert.ToInt32(row["ChildrenCount"]) > 0)

                  {

                      node.ExpandMode = TreeNodeExpandMode.ServerSide;

                  }

                  e.Node.Nodes.Add(node);

              }

          }

          else

          {

              Control myControl = LoadControl("Grid.ascx");           

              RadTreeNode newNode = new RadTreeNode();

              newNode.Value = RadTreeView1.Nodes.Count.ToString();

              newNode.Attributes["isLast"] = "False";

              newNode.ExpandMode = TreeNodeExpandMode.ServerSide;

              myControl.ID = "ucSection";

   

              newNode.Controls.Add(myControl);

   

              e.Node.Expanded = true;

              e.Node.Nodes.Add(newNode);

               

          }

      }

  
  And the UserControl is: 
  

  <telerik:RadAjaxManagerProxy ID="radAjaxProxy" runat="server" />

   

  <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" />

  <telerik:RadAjaxPanel runat="server" ID="radAjaxPanel" LoadingPanelID= "LoadingPanel1">

      <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0"

          DataSourceID="SqlDataSource1" GridLines="None"

          AutoGenerateEditColumn="True" PageSize="3">

          <MasterTableView AutoGenerateColumns="False" DataKeyNames="CategoryId" DataSourceID="SqlDataSource1">

              <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

              <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

                  <HeaderStyle Width="20px"></HeaderStyle>

              </RowIndicatorColumn>

              <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

                  <HeaderStyle Width="20px"></HeaderStyle>

              </ExpandCollapseColumn>

              <Columns>

                  <telerik:GridBoundColumn DataField="CategoryId" DataType="System.Int64" FilterControlAltText="Filter CategoryId column"

                      HeaderText="CategoryId" ReadOnly="True" SortExpression="CategoryId" UniqueName="CategoryId">

                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="ParentId" DataType="System.Int64" FilterControlAltText="Filter ParentId column"

                      HeaderText="ParentId" SortExpression="ParentId" UniqueName="ParentId">

                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="Title" FilterControlAltText="Filter Title column"

                      HeaderText="Title" SortExpression="Title" UniqueName="Title">

                  </telerik:GridBoundColumn>

                  <telerik:GridCheckBoxColumn DataField="IsLast" DataType="System.Boolean" FilterControlAltText="Filter IsLast column"

                      HeaderText="IsLast" SortExpression="IsLast" UniqueName="IsLast">

                  </telerik:GridCheckBoxColumn>

              </Columns>

              <EditFormSettings>

                  <EditColumn FilterControlAltText="Filter EditCommandColumn column">

                  </EditColumn>

              </EditFormSettings>

          </MasterTableView>

          <FilterMenu EnableImageSprites="False">

          </FilterMenu>

      </telerik:RadGrid>

      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TELERIKConnectionString %>"

          SelectCommand="SELECT * FROM [ProductCategories]"></asp:SqlDataSource>

  </telerik:RadAjaxPanel>


  Thanks a lot,
  Timo
  
  

  Reply

• Plamen Zdravkov Plamen Zdravkov

  Posted on Feb 7, 2012 (permalink)

  Hi Timo,

   
  In such scenario where a RadTreeNode is loaded on demand and the control in the node template is added on NodeExpand, such behavior is expected after Postback. 
  
  Have you considered adding RadGrid as a Global Template of the nodes and override the nodes where you don't need the Grid with a node text template at run time?
  
  Hope this will be helpful.
  
  

  All the best,
  Plamen Zdravkov
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

• Timo

  Posted on Feb 7, 2012 (permalink)

  Hi,
  
  No, I didn't try this.
  Meanwhile I found an article that ajax is not working with some controls like treeview and gridview.
  Here is the link: http://telerikajax.blogspot.com/ .
  
  What do you know about this?
  
  Thanks,
  Timo
  
  

  Reply

• Plamen Zdravkov Plamen Zdravkov

  Posted on Feb 9, 2012 (permalink)

  Hello Timo,

   
  This article is based on our documentation and especially on this help topic.
  
  

  Regards,
  Plamen Zdravkov
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > Add user control dynamically