RadGrid as node to RadTreeView

10 posts, 0 answers
  1. Subramanyam
    Subramanyam avatar
    10 posts
    Member since:
    Sep 2010

    Posted 12 Oct 2010 Link to this post

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

  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts
    Member since:
    Mar 2013

    Posted 15 Oct 2010 Link to this post

    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

    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

  3. Subramanyam
    Subramanyam avatar
    10 posts
    Member since:
    Sep 2010

    Posted 18 Oct 2010 Link to this post

    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();
    }

  4. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts
    Member since:
    Mar 2013

    Posted 22 Oct 2010 Link to this post

    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

    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

  5. Subramanyam
    Subramanyam avatar
    10 posts
    Member since:
    Sep 2010

    Posted 25 Oct 2010 Link to this post

    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">
    <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.




  6. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts
    Member since:
    Mar 2013

    Posted 28 Oct 2010 Link to this post

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

  7. Subramanyam
    Subramanyam avatar
    10 posts
    Member since:
    Sep 2010

    Posted 28 Oct 2010 Link to this post

    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

  8. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts
    Member since:
    Mar 2013

    Posted 03 Nov 2010 Link to this post

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

  9. Aaron Spilman
    Aaron Spilman avatar
    6 posts
    Member since:
    Apr 2010

    Posted 03 Nov 2010 Link to this post

    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

  10. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts
    Member since:
    Mar 2013

    Posted 09 Nov 2010 Link to this post

    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

    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

Back to Top