<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Common/example.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <telerik:RadAjaxManager runat="server" ID="radAjax" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="grdPendingOrders">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdPendingOrders" />
                    <telerik:AjaxUpdatedControl ControlID="grdShippedOrders" />
                    <telerik:AjaxUpdatedControl ControlID="msg" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="grdShippedOrders">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdShippedOrders" />
                    <telerik:AjaxUpdatedControl ControlID="msg" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadScriptBlock runat="server" ID="scriptBlock">
        <script type="text/javascript">
                <!--

            var dragging = false;
            function dragStarted(sender, args) {

                dragging = true;
            }

            function mouseOverRow(sender, args) {

                if (dragging) {
                    args.get_tableView().clearSelectedItems();
                    args.get_item().set_selected(true);
                }
            }
            function onRowDropping(sender, args) {
                if (sender.get_id() == "<%=grdPendingOrders.ClientID %>") {
                    var node = args.get_destinationHtmlElement();
                    if (!isChildOf('<%=grdShippedOrders.ClientID %>', node) && !isChildOf('<%=grdPendingOrders.ClientID %>', node)) {
                        args.set_cancel(true);
                    }
                }
                else {
                    var node = args.get_destinationHtmlElement();
                    if (!isChildOf('trashCan', node)) {
                        args.set_cancel(true);
                    }
                    else {
                        if (confirm("Are you sure you want to delete this order?"))
                            args.set_destinationHtmlElement($get('trashCan'));
                        else
                            args.set_cancel(true);
                    }
                }
            }

            function isChildOf(parentId, element) {
                while (element) {
                    if (element.id && element.id.indexOf(parentId) > -1) {
                        return true;
                    }
                    element = element.parentNode;
                }
                return false;
            }

            function rowDropped(sender, args) {

                dragging = false;
            }
                    -->
        </script>
    </telerik:RadScriptBlock>
    <div>
        <table>
            <tr>
                <td>
                    <h2 style="color: #9c3608">
                        Pending Orders</h2>
                    <telerik:RadGrid runat="server" ID="grdPendingOrders" OnNeedDataSource="grdPendingOrders_NeedDataSource"
                        AllowPaging="True" Width="350px" OnRowDrop="grdPendingOrders_RowDrop" AllowMultiRowSelection="true"
                        PageSize="30">
                        <MasterTableView DataKeyNames="OrderId" TableLayout="Fixed">
                        </MasterTableView>
                        <ClientSettings AllowRowsDragDrop="True">
                            <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                            <ClientEvents OnRowDropping="onRowDropping" OnRowDragStarted="dragStarted" OnRowDropped="rowDropped" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                        </ClientSettings>
                        <PagerStyle Mode="NumericPages" PageButtonCount="4" />
                    </telerik:RadGrid>
                </td>
                <td style="padding-left: 20px">
                    <h2 style="color: #3c8b04">
                        Shipped Orders</h2>
                    <telerik:RadGrid runat="server" AllowPaging="True" ID="grdShippedOrders" OnNeedDataSource="grdShippedOrders_NeedDataSource"
                        Width="350px" OnRowDrop="grdShippedOrders_RowDrop">
                        <MasterTableView DataKeyNames="OrderId" Width="100%">
                            <NoRecordsTemplate>
                                <div style="height: 30px; cursor: pointer;">
                                    No items to view</div>
                            </NoRecordsTemplate>
                            <PagerStyle Mode="NumericPages" PageButtonCount="4" />
                        </MasterTableView>
                        <ClientSettings AllowRowsDragDrop="True">
                            <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                            <ClientEvents OnRowMouseOver="mouseOverRow" OnRowDropping="onRowDropping" />
                        </ClientSettings>
                    </telerik:RadGrid>
                </td>
            </tr>
        </table>
        <div>
            <%--<a id="trashCan" href="#" onclick="return false;">Recycle Bin</a>--%>
            <div runat="server" id="msg" visible="false" enableviewstate="false">
                Order(s) successfully deleted!
            </div>
        </div>
    </div>
    <!-- content end -->
    </form>
</body>
</html>
