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

Drag and drop from radgrid to treeview

1 Answer 157 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 27 Oct 2010, 03:03 PM
Hi.

Is it possible to drag and drop a row from a radgrid to a tree view, detect if the treenode has a parent id and if not do some server side processing (basically save the dragged rows ID against the treeview nodes ID.

The examples provided do not show this. This example:http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx

specifically DOES NOT show how to drag a grid row back to the tree view.

thanks

james

1 Answer, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 01 Nov 2010, 12:29 PM
Hi James,

Here is an example of bi-directional DragAndDrop between RadGrid and RadTreeView:
1. Markup and JavaScript:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ 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>Untitled Page</title>
</head>
<body>
    <script type="text/javascript">
        /* <![CDATA[ */
        var gridId = "<%= RadGrid1.ClientID %>";
                 
        //Handles the OnNodeDropping event of RadTreeView.
        function onNodeDropping(sender, args)
        {
            var dest = args.get_destNode();
             
            if (dest)
            {
                //Handle dropping on a Node if required.
            }
            else
            {
                dropOnHtmlElement(args);
            }
        }
         
        //Handles the case when a Node is dropped onto an HTML element.
        function dropOnHtmlElement(args)
        {                  
            if(droppedOnGrid(args))
                return;                
        }
         
        //Checks whether a Node is being dropped onto the RadGrid with ID: 'gridId'.
        //If not, the OnClientDropping event is canceled.
        function droppedOnGrid(args)
        {
            var target = args.get_htmlElement();
             
            while(target)
            {
                if(target.id == gridId)
                {
                    args.set_htmlElement(target);
                     
                    return;                                                                                
                }
                 
                target = target.parentNode;
            }
             
            args.set_cancel(true);
        }
        /* ]]> */
    </script>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="ScriptManager1">
        </asp:ScriptManager>
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <div style="float: left; width: 20%;">
                <telerik:RadTreeView
                    runat="server"
                    Skin="Vista"
                    ID="RadTreeView1"
                    Width="200px"
                    OnClientMouseOver="onNodeMouseOver"
                    OnClientMouseOut="onNodeMouseOut"
                    OnClientNodeDropping="onNodeDropping"
                    EnableDragAndDrop="True"
                    LoadingStatusPosition="BeforeNodeText" OnNodeDrop="RadTreeView1_NodeDrop">
                    <CollapseAnimation Duration="100" Type="OutQuint" />
                    <ExpandAnimation Duration="100" Type="OutQuart" />
                </telerik:RadTreeView>
            </div>
            <div style="float: left; width: 80%;">
                <telerik:RadGrid runat="server" Skin="Vista" ID="RadGrid1" OnItemCreated="RadGrid1_ItemCreated"
                    GridLines="None" AllowMultiRowSelection="True" OnNeedDataSource="RadGrid1_NeedDataSource">
                    <MasterTableView>
                        <RowIndicatorColumn Visible="False">
                            <HeaderStyle Width="20px" />
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn Resizable="False" Visible="False">
                            <HeaderStyle Width="20px" />
                        </ExpandCollapseColumn>
                    </MasterTableView>
                    <ClientSettings>
                        <ClientEvents OnRowMouseOver="onRowMouseOver" />
                    </ClientSettings>
                </telerik:RadGrid>
            </div>
            <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
 
           <script type="text/javascript">
                /* <![CDATA[ */
                var currentDraggedRow = null;
                var dataSetIndex = null;
                var visualClue = null;
                var currentNode = null;        
                 
                function onNodeMouseOver(sender, args)
                {
                debugger;
                    //gets the node upon mousing over the node
                    currentNode = args.get_node();
                }
                 
                function onNodeMouseOut(sender, args)
                {
                debugger;
                    //resets the currentNode value upon mousing out
                    currentNode = null;
                }
                 
                function onRowMouseOver(sender, args)
                {
                    //gets the grid to be draggaed from
                    grid = sender;
                }
                 
                function onMouseDown(e, element, dataIndex)
                {
                debugger;
                    //Store the currently dragged row (TR)
                    currentDraggedRow = element;
                    //Store the data key value of the dragged data grid row
                    dataSetIndex = dataIndex;
     
                    //Attach events to support rendering the visual clue
                    $addHandler(document, "mousemove", mouseMove);
                    $addHandler(document, "mouseup", mouseUp);
                     
                    //Prevent selection of text while dragging
                     
                    //Internet Explorer
                    $addHandler(document, "selectstart", preventSelect);
                     
                    //Other browsers
                    if (e.preventDefault)
                        e.preventDefault();
                }
                 
                function preventSelect(e)
                {
                debugger;
                    e.preventDefault();
                }
                 
                function createVisualClue()
                {
                debugger;
                    var div = document.createElement("div");
                    div.style.position = "absolute";
                    div.className = $get("<%= RadGrid1.ClientID %>").className;
                    div.innerHTML = String.format("<table class='{0}'><tr>{1}</tr></table>",
                        $get("<%= RadGrid1.MasterTableView.ClientID %>").className,
                    currentDraggedRow.innerHTML);
                     
                    return div;
                }
                 
                function mouseMove(e)
                {
                debugger;
                    if (!visualClue)
                    {
                        visualClue = createVisualClue();
                        document.body.insertBefore(visualClue, document.body.firstChild);
                    }
                     
                    visualClue.style.left = e.clientX + 10 + "px";
                    visualClue.style.top = e.clientY + 10 + "px";
                }
                 
                function mouseUp(e)
                {
                debugger;
                    if (visualClue)
                    {
                        //Remove the visual clue
                        visualClue.parentNode.removeChild(visualClue);
                        visualClue = null;
                    }
                    //Detach the events supporting the visual clue
                    $removeHandler(document, "mousemove", mouseMove);
                    $removeHandler(document, "mouseup", mouseUp);
                     
                    //Detach the event preventing selection in Internet Explorer
                    $removeHandler(document, "selectstart", preventSelect);
                     
                    if (currentNode && currentDraggedRow)
                    {                  
                        //Store the value of the node on which the mouse is over
                        $get("<%=TreeNodeText.ClientID%>").value = currentNode.get_text();
                         
                        //Store the data key value of the dragged data grid row
                        $get("<%= DataSetIndex.ClientID %>").value = dataSetIndex;                 
                         
                         
                        //Initiate AJAX request to update the page                             
                        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                        ajaxManager.ajaxRequest();                 
                    }
                }                  
                /* ]]> */
            </script>
 
            </telerik:RadScriptBlock>
            <asp:HiddenField runat="server" ID="DataSetIndex" />
            <asp:HiddenField runat="server" ID="TreeNodeText" />
        </div>     
    </form>
</body>
</html>
2. Code-behind:
using System;
using System.Data;
using Telerik.Web.UI;
 
public partial class _Default : System.Web.UI.Page
{
         
    //Creates a datatable and adds it to the session to be used later .
    //The datatable is added to the session as it is being modified during the Drag And Drop operations.
    //Therefore, the "data" object always contains the proper rows and columns.
    private DataTable DataSource
    {
        get
        {
            DataTable data = (DataTable)Session["DataSource"];
            if (data == null)
            {
                data = new DataTable();
                data.Columns.Add("Column1");
                data.Columns.Add("Column2");
                data.Rows.Add(new object[] { "item1", "value1" });
                data.Rows.Add(new object[] { "item2", "value2" });
                data.Rows.Add(new object[] { "item3", "value3" });
                Session["DataSource"]  = data;
            }
             
            return data;
        }
    }
 
 
    protected override void OnLoad(EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadTreeView1.Nodes.Add(new RadTreeNode("root1", "rootValue1"));
            RadTreeView1.Nodes.Add(new RadTreeNode("root2", "rootValue2"));
        }
 
        base.OnLoad(e);
    }  
     
 
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataItem = e.Item as GridDataItem;
            //Registers the onmousedown event to be fired upon selecting a grid's row and passes arguments to the event handler
            e.Item.Attributes["onmousedown"] = string.Format("onMouseDown(event, this,{0})", dataItem.DataSetIndex);
            e.Item.Style["cursor"] = "move";
        }
    }
 
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        //This ajax request is fired upon dropping a grid's row onto a TreeNode
         
        //Finds the node, onto which the grid's row should be dropped, by text using the previously stored value of the "TreeNodeText" hidden field
        RadTreeNode destinationNode = RadTreeView1.FindNodeByText(TreeNodeText.Value);
        DataRow sourceRow = DataSource.Rows[Convert.ToInt32(DataSetIndex.Value)];
 
        //Creates a new node using the respective grid's row information. The text of the TreeNode is set to be the value of the needed cell in the grid's datasource
        RadTreeNode sourceNode = new RadTreeNode((string)sourceRow["Column1"], (string)sourceRow["Column2"]);
 
        destinationNode.Nodes.Add(sourceNode);
        destinationNode.Expanded = true;
 
        //Removes the row that has been dropped onto the treeview
        DataSource.Rows.Remove(sourceRow);
 
        //Rebinds the grid to address the changes made to its datasource
        RadGrid1.Rebind();
    }
 
    protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {      
        RadGrid1.DataSource = DataSource;
    }
 
    /// <summary>
    /// Fires when a Node is dropped onto the <see cref="RadTreeView"/> 'RadTreeView1'.
    /// </summary>
    /// <param name="sender">The 'RadTreeView1' object.</param>
    /// <param name="e">Event arguments.</param>
    protected void RadTreeView1_NodeDrop(object sender, RadTreeNodeDragDropEventArgs e)
    {
        if (e.DestDragNode != null)
        {
            //Handle when dropped on another Node.
        }
        else if (e.HtmlElementID == RadGrid1.ClientID)
        {
            DataTable dt = (DataTable)Session["DataSource"];
 
            foreach (RadTreeNode node in e.DraggedNodes)
            {
                AddRowToGrid(dt, node);
 
                AddRowsToGrid(dt, node.Nodes);
 
                node.Remove();
            }
        }       
    }
 
    /// <summary>
    /// Adds rows to the specified Data Table for
    /// every Node in the specified list of nodes and its child Nodes.
    /// </summary>
    /// <param name="dt">The <see cref="DataTable"/> object where rows are added.</param>
    /// <param name="nodes">A <see cref="RadTreeNodeCollection"/> for Nodes.</param>
    private void AddRowsToGrid(DataTable dt, RadTreeNodeCollection nodes)
    {
        foreach (RadTreeNode node in nodes)
        {
            AddRowToGrid(dt, node);
 
            AddRowsToGrid(dt, node.Nodes);
        }
    }
 
    /// <summary>
    /// Adds a new Row to the specified <see cref="DataTable"/> using data
    /// from the specified <see cref="RadTreeNode"/> object and
    /// binds the <see cref="RadGrid"/> 'RadGrid1'.
    /// </summary>
    /// <param name="dt"></param>
    /// <param name="node"></param>
    private void AddRowToGrid(DataTable dt, RadTreeNode node)
    {
        string[] values = { node.Text, node.Value };
        dt.Rows.Add(values);
 
        RadGrid1.DataSource = dt;
        RadGrid1.DataBind();
    }
}

Hope this is going to help you to figure this out!


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
James
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
Share this question
or