[Solved] RadGrid as node to RadTreeView

[Subramanyam]

Hi, 
I have a requirement where i have to provide Grid as tree nodes with drag drop support.
I have Put grid under "NodeTemplate", the tree view shows the grid properly.
Problem comes when i rearrange them in the tree nodes.
eg; Node 1 has 2 sub nodes and Node 2 has 2 sub nodes. moving nodes from Parent node 1 to Parent Node 2 works fine, but when i agin move other/same nodes to other node (grid does not display values)

I am using the below code pls help me if i am missing something.

<telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" MultipleSelect="true"
            OnNodeDrop="RadTreeView1_HandleDrop" EnableDragAndDropBetweenNodes="true"  CheckBoxes="true" TriStateCheckBoxes="true" >
<Nodes>
<telerik:RadTreeNode Text="Parent1" Expanded="True">
<Nodes>
<telerik:RadTreeNode Text="Parent1 Child1">
<NodeTemplate>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
</telerik:RadGrid>
</NodeTemplate>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Parent1 Child2">
<NodeTemplate>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
</telerik:RadGrid>
</NodeTemplate>
</telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent2" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent2 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent2 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent3">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent3 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent3 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent3">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent3 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent3 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent4">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent4 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent4 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
            SelectCommand="SELECT TOP (5) AddressID, AddressLine1, AddressLine2, City, StateProvinceID, PostalCode, rowguid, ModifiedDate FROM Person.Address">
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
            SelectCommand="SELECT TOP (5) AddressID, AddressLine1, AddressLine2, City, StateProvinceID, PostalCode, rowguid, ModifiedDate FROM Person.Address Order By AddressID Desc">
        </asp:SqlDataSource>

protected void RadTreeView1_HandleDrop(object sender, Telerik.Web.UI.RadTreeNodeDragDropEventArgs e)
        {
            foreach (var node in e.DraggedNodes)
            {
                if (node.ParentNode != e.DestDragNode)
                e.DestDragNode.Nodes.Add(node);
            }
        }

[Nikolay Tsenkov]

Hi Subramanyam,

Could you please, try to rebind the grid, right after you add it's node to the new parent in "RadTreeView1_HandleDrop" handler?

Please, let me know the results!

Hope this going to help you!


Regards,
Nikolay Tsenkov
the Telerik team

[Subramanyam]

Hi nickole,
I have changed my forloop as follows. It did not work. Am i missing something?
Here is my for loop.

foreach (var node in e.DraggedNodes)
{

   if (node.ParentNode != e.DestDragNode)
        e.DestDragNode.Nodes.Add(node);

      // Added this to load the grids in the Treenodes.
RadGrid RadGrid1 = (RadGrid)node.FindControl("RadGrid1");
      string DataSourceID = RadGrid1.DataSourceID;
RadGrid1.DataSourceID  = DataSourceID;
      RadGrid1.DataBind();
}

[Nikolay Tsenkov]

Hi Subramanyam,

Could you, please, post the complete page - markup and code-behind?
Thanks!

Hope that soon we will resolve the problem!


Regards,
Nikolay Tsenkov
the Telerik team

[Subramanyam]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace MyTelerikSamples
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void RadTreeView1_HandleDrop(object sender, Telerik.Web.UI.RadTreeNodeDragDropEventArgs e)
        {
            foreach (var node in e.DraggedNodes)
            {

                if (node.ParentNode != e.DestDragNode)
                    e.DestDragNode.Nodes.Add(node);

                // To rebind the grid
                RadGrid RadGrid1 = (RadGrid)node.FindControl("RadGrid1");
                //if (RadGrid1 != null)
                {
                    string DataSourceID = RadGrid1.DataSourceID;
                    RadGrid1.DataSourceID = DataSourceID;
                    RadGrid1.DataBind();
                }
            }
        }
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyTelerikSamples.WebForm1" %>

<%@ 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" MultipleSelect="true"
            OnNodeDrop="RadTreeView1_HandleDrop" EnableDragAndDropBetweenNodes="true" CheckBoxes="true"
            TriStateCheckBoxes="true">
            <Nodes>
                <telerik:RadTreeNode Text="Parent1" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent1 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent1 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent2" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent2 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent2 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent3">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent3 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent3 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent4">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent4 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent4 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent5">
                    <Nodes>
                        <telerik:RadTreeNode Text="Parent5 Child1">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Parent5 Child2">
                            <NodeTemplate>
                                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                </telerik:RadGrid>
                            </NodeTemplate>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
            SelectCommand="SELECT TOP (5) AddressID, AddressLine1, AddressLine2, City, StateProvinceID, PostalCode, rowguid, ModifiedDate FROM Person.Address">
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
            SelectCommand="SELECT TOP (5) AddressID, AddressLine1, AddressLine2, City, StateProvinceID, PostalCode, rowguid, ModifiedDate FROM Person.Address Order By AddressID Desc">
        </asp:SqlDataSource>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="TreeNodes"
            TypeName="MyTelerikSamples.TreeSample"></asp:ObjectDataSource>
    </div>
    </form>
</body>
</html>

I event want to access the Templated node to bind the grid explecitly my own function aswell.

RadTreeNode node = RadTreeView1.Nodes[0];
            lbl1.Text = node.Value;
            RadGrid RadGrid1 = (RadGrid)node.FindControl("RadGrid1");
            RadGrid1.DataSourceID = "SqlDataSource1";

I am looking into http://www.telerik.com/help/aspnet-ajax/treeview-templates-accessing-controls-inside-templates.html
It did not work for me.

[Nikolay Tsenkov]

Hi Subramanyam,

"I event want to access the Templated node to bind the grid explecitly my own function aswell.

RadTreeNode node = RadTreeView1.Nodes[0];
lbl1.Text = node.Value;
RadGrid RadGrid1 = (RadGrid)node.FindControl("RadGrid1");
RadGrid1.DataSourceID = "SqlDataSource1";

"
This isn't working, because you try to access a control of another node's template - this one takes a root node, which doesn't have a template. You need to perform FindControl for a specific node having Grid directly in its template.

About the handler of NodeDrop event:
 - Could you, please try to debug the code with a break point at the line where you get the DataSourceId and determine, whether it' correctly returned? And then, is that control being binded at all? You can handle the ItemDataBound event of grid and debug to determine whether an actual data is being fed or not.
Please, let me know the results when you finish with the suggested testing.

Hope that we will resolve this one soon!


Regards,
Nikolay Tsenkov
the Telerik team

[Subramanyam]

Hi nickole,
The data is bound to the grid and i am able to drag and drop the grids to another node.

Consider my tree as follows

1 -  Parent
1.1  - Child 1
(grid with data)
1.2 - Child 2
(grid with data) 2 -  Parent
2.1  - Child 1
(grid with data)
2.2 - Child 2
(grid with data) When i move 1.1 to 2 or 2.1 or 2.2 i am able to see that grid moves to the destination, next when i do another operation similar to that i am loosing the data for the grid which I had moved earlier. If the data was not present i should not be able to do the first two operations. "This isn't working, because you try to access a control of another node's template - this one takes a root node, which doesn't have a template. You need to perform FindControl for a specific node having Grid directly in its template." I even tried to access the templates in the nodes and tried findcontrols on templates and i have checked even controls.count all of them show "Nothing" - Subramanyam

[Nikolay Tsenkov]

Hello Subramanyam,

I spent some time to prepare an example that you can use in order to determine what seems to be the problem with your implementation.
Here it goes:
1. Markup:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <telerik:RadTreeView runat="server" ID="RadTreeView1" OnTemplateNeeded="RadTreeView1_TemplateNeeded"
        EnableDragAndDrop="true" OnNodeDrop="RadTreeView1_NodeDrop">
    </telerik:RadTreeView>
</telerik:RadAjaxPanel>
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="LinqToSql.NorthwindDataContext"
    TableName="Categories" />

2. Code-behind:

using Telerik.Web.UI;

using System.Web.UI;

public partial class DefaultCS : System.Web.UI.Page

{

 

    protected void Page_Load(object sender, System.EventArgs e)

    {

        if (!IsPostBack)

        {

            for (int i = 0; i < 3; i++)

            {

                var rootNode = new RadTreeNode("RootNode " + i);

                for (int j = 0; j < 3; j++)

                {

                    var childNode = new RadTreeNode("ChildNode " + j);

                    rootNode.Nodes.Add(childNode);

                }

                RadTreeView1.Nodes.Add(rootNode);

            }

        }

    }

 

    protected void RadTreeView1_TemplateNeeded(object sender, RadTreeNodeEventArgs e)

    {

        var node = e.Node;

 

        node.NodeTemplate = new GridTemplate();

    }

    protected void RadTreeView1_NodeDrop(object sender, RadTreeNodeDragDropEventArgs e)

    {

        e.DestDragNode.Nodes.AddRange(e.DraggedNodes);

    }

}

 

public class GridTemplate : ITemplate

{

    RadGrid _grid;

    public void InstantiateIn(Control control)

    {

        _grid = new RadGrid();

        _grid.ID = "RadGrid1";

        _grid.DataSourceID = "LinqDataSource1";

        _grid.AllowPaging = true;

        _grid.ShowStatusBar = true;

        _grid.PagerStyle.AlwaysVisible = true;

        control.Controls.Add(_grid);

    }

}

I have used this demo's LinqDataSource, so if you want to run and try it, you can edit the demo (which comes by default with purchased controls) with the provided markup and code-behind.

My advice for you would be to implement this scenario in the manner stated above - class implementing ITemplate, creating the nodes only on first load in PageLoad handler, templating the nodes on TemplateNeeded event and definitely not placing nodes in the markup.

Hope this will help you to resolve the problem!


Regards,
Nikolay Tsenkov
the Telerik team

[Aaron Spilman]

Nikolay,

I am trying your example but I don't see OnTemplateNeeded as part of the telerik:RadTreeView  Is this an undocumented event? Should I just type it in as you have it and pray for a little magic? :)
(My Telerik.Web.UI.dll is version 2010.1.415.40)
Oh I'm using vb.net not C# would that be the differance?

Thanks,
--Aaron

[Nikolay Tsenkov]

Hello Aaron Spilman,

Well you specified different version in the Version field of this ticket - "2010.2 929", which has the event implemented.

You can upgrade to the new version in order to use the TemplateNeeded server event, not only for RadTreeView, but for several other controls like RadPanelBar, RadTabStrip, RadListBox, RadToolBar etc.

Hope you will like this and all the other new features we have implemented for RadControls for ASP.NET AJAX!


Regards,
Nikolay Tsenkov
the Telerik team