Drag/Drop error: Unable to get value of the property 'rows': object is null or undefined

[Chris]

Hi,

I am testing out the Drag/Drop capabilities of the RadGrid (dragging from one grid to another), and I've come across a problem. It works great when the grid I'm dragging from has more than one row, but if there's one row I get the following JScript error thrown:

Microsoft JScript runtime error: Unable to get value of the property 'rows': object is null or undefined

Here's my ASPX markup:

    <script type="text/javascript">

        function OnClientUpdated(sender, args) {
            var message = "Update (check) was done!";
            var newMsgs = sender.get_value();
            if (newMsgs != 0) {
                sender.show();
                message += (newMsgs == 1) ? (" There is 1 new message!") : (" There are " + newMsgs + " new messages!");
            }
            else {
                message += " There are no new messages!";
            }
        }

    </script>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadScriptBlock runat="server" ID="scriptBlock">

        <script type="text/javascript">
                <!--
            function onRowDropping(sender, args) {
                if (sender.get_id() == "<%=RadGrid1.ClientID %>") {
                    var node = args.get_destinationHtmlElement();
                    if (!isChildOf('<%=RadGrid2.ClientID %>', node) && !isChildOf('<%=RadGrid1.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;
            }
                    -->
        </script>

    </telerik:RadScriptBlock>
     <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
         <telerik:RadSplitter ID="RadSplitter1" Width="100%" runat="server">
         <telerik:RadPane runat="server">
   <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="true"
                 onneeddatasource="RadGrid1_NeedDataSource" onrowdrop="RadGrid1_RowDrop">
   <MasterTableView AllowCustomSorting="true" AllowPaging="true" DataKeyNames="ID" AllowSorting="true" PageSize="20">

   </MasterTableView>
     <ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                    <Resizing AllowColumnResize="true" />
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"/>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                          <ClientEvents OnRowDropping="onRowDropping" />
                </ClientSettings>
</telerik:RadGrid>
         </telerik:RadPane>
         <telerik:RadSplitBar runat="server"></telerik:RadSplitBar>
         <telerik:RadPane runat="server">
   <telerik:RadGrid ID="RadGrid2" runat="server" AllowFilteringByColumn="true"
                 onneeddatasource="RadGrid2_NeedDataSource" onrowdrop="RadGrid2_RowDrop">
   <MasterTableView AllowCustomSorting="true" DataKeyNames="ID" AllowPaging="true" AllowSorting="true" PageSize="20">

   </MasterTableView>
     <ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                    <Resizing AllowColumnResize="true" />
                             <ClientEvents OnRowDropping="onRowDropping" />

                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"/>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                </ClientSettings>
</telerik:RadGrid>

         </telerik:RadPane>

         </telerik:RadSplitter>

</telerik:RadAjaxPanel>

  <telerik:RadNotification ID="RadNotification1" runat="server" LoadContentOn="TimeInterval"
        Width="300" Animation="Fade" EnableRoundedCorners="true" EnableShadow="true"
        OnClientUpdated="OnClientUpdated" Title="Notifications" OffsetX="-20" OffsetY="-20"
        TitleIcon="none" UpdateInterval="10000" AutoCloseDelay="1500" OnCallbackUpdate="OnCallbackUpdate">
        <ContentTemplate>
            <asp:Literal ID="lbl" runat="server"></asp:Literal>
        </ContentTemplate>
    </telerik:RadNotification>

Here's my code behind:

public IList<Delivery> _Deliveries
        {
            get { return (List<Delivery>)Session["Deliveries"]; }
            set { Session["Deliveries"] = value; }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                _Deliveries = new List<Delivery>();
                _Deliveries.Add(new Delivery { ID = 1, Assigned = false, Customer = "Micross", TripDate = DateTime.Today });
                _Deliveries.Add(new Delivery { ID = 2, Assigned = false, Customer = "Test", TripDate = DateTime.Today });
                _Deliveries.Add(new Delivery { ID = 3, Assigned = false, Customer = "Micross3", TripDate = DateTime.Today });
                _Deliveries.Add(new Delivery { ID = 4, Assigned = false, Customer = "Test3", TripDate = DateTime.Today });

                RadGrid1.DataBind();
            }
        }

        private void BindMain()
        {
            RadGrid1.DataBind();
        }

        private void BindSecond()
        {
            RadGrid2.DataSource = _Deliveries.Where(a => a.Assigned == true);
            RadGrid2.DataBind();
        }



        protected void OnCallbackUpdate(object sender, RadNotificationEventArgs e)
        {
            int newMsgs = DateTime.Now.Second % 10;
            if (newMsgs == 5 || newMsgs == 7 || newMsgs == 8 || newMsgs == 9) newMsgs = 0;
            lbl.Text = String.Concat(new object[] { "You have ", newMsgs, " new invoices to process!" });
            RadNotification1.Value = newMsgs.ToString();
        }

        protected void RadGrid2_RowDrop(object sender, GridDragDropEventArgs e)
        {
                foreach (GridDataItem draggedItem in e.DraggedItems)
                {
                    var tmpOrder = _Deliveries.Where(a => a.ID == (long)draggedItem.GetDataKeyValue("ID")).Single();
                    tmpOrder.Assigned = false;
                }

                RadGrid1.Rebind();
                RadGrid2.Rebind();

        }

        protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = _Deliveries.Where(a => a.Assigned == false);

        }

        protected void RadGrid2_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            RadGrid2.DataSource = _Deliveries.Where(a => a.Assigned == true);

        }

        protected void RadGrid1_RowDrop(object sender, GridDragDropEventArgs e)
        {

                foreach (GridDataItem draggedItem in e.DraggedItems)
                {
                    var tmpOrder = _Deliveries.Where(a => a.ID == (long)draggedItem.GetDataKeyValue("ID")).Single();
                    tmpOrder.Assigned = true;
                }
                RadGrid1.Rebind();
                RadGrid2.Rebind();

        }

Thanks! 

[Richard]

Chris:

I copied over the Grid/Items Drag-and-Drop demo, as is,  to Visual Studio 2010, and modified the SQL to feed only a single row into the "Pending Orders" table.

As you can see in this video, I'm able drag the last row from this table to the Shipped Orders table without encountering any errors:

http://screencast.com/t/DlWcrweS

Can you let me know what line of code is throwing the error? You can use FireBug (or a comparable browser debugger) to gather this info.

Hope this helps.