Add user control dynamically

[Timo]

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

[Princy]

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.

[Timo]

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

[Plamen]

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

[Timo]

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

[Plamen]

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

[Timo]

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

[Plamen]

Hello Timo,

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

Regards,
Plamen Zdravkov
the Telerik team

[Aya]

I have problem 

I make user controll for upload file by "AsyncFileUpload"

when write that my user controller disappear:

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
                        <Scripts>
                            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                    </asp:ScriptReference>
                        </Scripts>
                    </asp:ScriptManagerProxy>

it is need to comment third reference but in case it is commented download file not finish. any help?