<%@ 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.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">       
    
   
      
    </style>
</head>
<body>
    <form id="form1" runat="server">
    
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
     
 <script type="text/javascript">

    var currentRow, movedRow = null;  
  
    function RowCreated(sender, eventArgs)  
    {  
        /// <summary> Row Created </summary>  
        var row = eventArgs.get_gridDataItem().get_element();  
  
        var mouseDownHandler = function(e)  
        {  
            if (!e)  
                var e = window.event;  
  
            if (!currentRow)  
            {  
                currentRow = document.createElement("div");  
                currentRow.innerHTML = "<table><tbody><tr>"+row.innerHTML+"</tr></tbody><table>";  
                document.body.appendChild(currentRow);  
                currentRow.style.position = "absolute";  
                currentRow.style.display = "none";  
                  
                movedRow = row;  
            }  
              
            ClearDocumentEvents();                
        };  
          
        var mouseUpHandler = function(e)  
        {  
            if (!e)  
                var e = window.event;  
  
            if (currentRow)  
            {  
                if (movedRow && currentRow.style.display != "none")  
                {                 
                    var targetElement = e.srcElement ? e.srcElement : e.target;                   
                    var droppedRowIndex;  
                    while(typeof(droppedRowIndex) == "undefined" && targetElement.parentNode != null)  
                    {  
                        droppedRowIndex = targetElement.parentNode.sectionRowIndex;  
                          
                        targetElement = targetElement.parentNode;   //in case of controls in the row  
                        if (targetElement.parentNode.nodeName == "BODY" || targetElement.parentNode.nodeName == "FORM")  
                        {  
                            droppedRowIndex = movedRow.sectionRowIndex; //If somehow we are in the wrong place, don't move.  
                        }  
                    }  
                    if (typeof(droppedRowIndex) != "undefined" && movedRow.sectionRowIndex != droppedRowIndex)  
                    {  
                        ReorderRows(movedRow.sectionRowIndex, droppedRowIndex);  
                    }  
                }  
                document.body.removeChild(currentRow);  
                currentRow = null;  
                movedRow = null;  
            }  
            RestoreDocumentEvents();  
        };  
        var mouseMoveHandler = function(e)  
        {  
            if (!e)  
                var e = window.event;  
            if (currentRow)  
            {  
                currentRow.style.display = "";  
                currentRow.style.top =  e.clientY +   
                                        document.documentElement.scrollTop +   
                                        document.body.scrollTop + 3 + "px";  
  
                currentRow.style.left = e.clientX +   
                                        document.documentElement.scrollLeft +   
                                        document.body.scrollLeft + 3 + "px";  
            }  
              
        };  
          
        if (row.attachEvent)  
        {  
            row.attachEvent("onmousedown", mouseDownHandler);  
            document.body.attachEvent("onmouseup", mouseUpHandler);  
            document.body.attachEvent("onmousemove", mouseMoveHandler);  
        }  
  
        if (row.addEventListener)  
        {  
            row.addEventListener("mousedown", mouseDownHandler, true);  
            document.body.addEventListener("mouseup", mouseUpHandler, true);  
            document.body.addEventListener("mousemove", mouseMoveHandler, true);  
        }  
    }  
      
    function ClearDocumentEvents()  
    {  
        if (document.onmousedown != this.mouseDownHandler)  
        {  
            this.documentOnMouseDown = document.onmousedown;  
        }  
  
        if (document.onselectstart != this.selectStartHandler)  
        {  
            this.documentOnSelectStart = document.onselectstart;  
        }  
  
        this.mouseDownHandler = function(e){return false;};  
        this.selectStartHandler = function(){return false;};  
  
        document.onmousedown = this.mouseDownHandler;  
        document.onselectstart = this.selectStartHandler;  
  
    };  
      
    function RestoreDocumentEvents()  
    {  
        if ((typeof(this.documentOnMouseDown) == "function") &&  
            (document.onmousedown != this.mouseDownHandler))  
        {  
            document.onmousedown = this.documentOnMouseDown;  
        }  
        else  
        {  
            document.onmousedown = "";  
        }  
          
        if ((typeof(this.documentOnSelectStart) == "function") &&  
            (document.onselectstart != this.selectStartHandler))  
        {  
            document.onselectstart = this.documentOnSelectStart;  
        }  
        else  
        {  
            document.onselectstart = "";  
        }  
    };  
      


    function ReorderRows(index1, index2)  
    {          
        var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");  
        var args = 'RowMoved,' + index1 + ',' + index2;  
        ajaxManager.AjaxRequest(args);  
    }  
    </script>  
</telerik:RadCodeBlock>  

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    
    
        <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView DataKeyNames="CustomerID">
        </MasterTableView>
        <ClientSettings>
        <ClientEvents OnRowCreated="RowCreated" />
        </ClientSettings>
        </telerik:RadGrid>
        
    </form>
</body>
</html>
