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

[Solved] RadGrid Drag And Drop inside dynamically loaded user control breaks

2 Answers 208 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 09 Jun 2009, 08:07 PM
I am building a page that will dynamically load user controls based on database input.

As an experiment, I put the RadGrid drag and drop example into a user control and placed it on a test page. The page and demo operated as expected.

I then replaced the user control element with a placeholder element and in the Page_Load of the test page, dynamically loaded the web user control with the RadGrid drag and drop demo on it.

The drag and drop seems to work ONCE. But then the controls basically freeze after this. The only thing that works seems to be the pager on the pending orders grid. All of the drag and drop is gone. Is there a way to make this work?

Greg

Test.aspx
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> 
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<%@ Reference Control="~/Advanced Library.ascx" %> 
<!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 id="Head1" runat="server"> 
</head> 
<body class="BODY"> 
    <form id="mainForm" method="post" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager>  
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 
    </form> 
</body> 
</html> 
 

Test.aspx.cs
using System; 
using System.Collections.Generic; 
using System.Configuration; 
using System.Data; 
using System.Data.Common; 
using System.Data.SqlClient; 
using System.Web.UI; 
 
public partial class Test : System.Web.UI.Page 
{ 
        protected void Page_Load(object sender, System.EventArgs e) 
        { 
            CMS_UserControls_Advanced_Library ctrl = (CMS_UserControls_Advanced_Library)Page.LoadControl("~/Advanced Library.ascx"); 
            PlaceHolder1.Controls.Add(ctrl); 
    } 
} 
 
 

Advanced Library.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Advanced Library.ascx.cs" 
    Inherits="CMS_UserControls_Advanced_Library" ClassName="CMS_UserControls_Advanced_Library" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<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"> 
                <!-- 
        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; 
                } 
                elementelement = element.parentNode; 
            } 
            return false; 
        } 
                    --> 
    </script> 
 
</telerik:RadScriptBlock> 
<div class="exWrap"> 
    <div style="float: left; padding: 0 6px 0 10px"> 
        <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" Width="95%" TableLayout="Fixed"> 
            </MasterTableView> 
            <ClientSettings AllowRowsDragDrop="True"> 
                <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" /> 
                <ClientEvents OnRowDropping="onRowDropping" /> 
                <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
            </ClientSettings> 
            <PagerStyle Mode="NextPrevAndNumeric" /> 
        </telerik:RadGrid> 
    </div> 
    <div style="float: right; padding: 0 10px 0 6px"> 
        <h2 style="color: #3c8b04"> 
            Shipped Orders</h2> 
        <telerik:RadGrid runat="server" AllowPaging="True" ID="grdShippedOrders" OnNeedDataSource="grdShippedOrders_NeedDataSource" 
            Width="350px" OnRowDrop="grdShippedOrders_RowDrop" AllowMultiRowSelection="true"> 
            <MasterTableView DataKeyNames="OrderId" Width="100%"> 
                <NoRecordsTemplate> 
                    <div style="height: 30px; cursor: pointer;"> 
                        No items to view</div> 
                </NoRecordsTemplate> 
            </MasterTableView> 
            <ClientSettings AllowRowsDragDrop="True"> 
                <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" /> 
                <ClientEvents OnRowDropping="onRowDropping" /> 
            </ClientSettings> 
        </telerik:RadGrid> 
    </div> 
    <div style="clear: both;"> 
        <!-- --> 
    </div> 
    <div class="exFooter"> 
        <a id="trashCan" href="#" onclick="return false;">Recycle Bin</a> 
        <div class="exMessage" runat="server" id="msg" visible="false" enableviewstate="false"> 
            Order(s) successfully deleted! 
        </div> 
    </div> 
    <br /> 
</div> 
 

Advanced Library.ascx.cs
using System; 
using System.Collections; 
using System.Configuration; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Xml.Linq; 
using System.Collections.Generic; 
using Telerik.Web.UI; 
 
public partial class CMS_UserControls_Advanced_Library : System.Web.UI.UserControl 
{ 
    protected IList<Order> PendingOrders 
    { 
        get 
        { 
            try 
            { 
                object obj = Session["PendingOrders"]; 
                if (obj == null) 
                { 
                    obj = GetOrders(); 
                    if (obj != null) 
                    { 
                        Session["PendingOrders"] = obj; 
                    } 
                    else 
                    { 
                        obj = new List<Order>(); 
                    } 
                } 
                return (IList<Order>)obj; 
            } 
            catch 
            { 
                Session["PendingOrders"] = null; 
            } 
            return new List<Order>(); 
        } 
        set { Session["PendingOrders"] = value; } 
    } 
 
    protected IList<Order> ShippedOrders 
    { 
        get 
        { 
            try 
            { 
                object obj = Session["ShippedOrders"]; 
                if (obj == null) 
                { 
                    Session["ShippedOrders"] = obj = new List<Order>(); 
                } 
                return (IList<Order>)obj; 
            } 
            catch 
            { 
                Session["ShippedOrders"] = null; 
            } 
            return new List<Order>(); 
        } 
        set { Session["ShippedOrders"] = value; } 
    } 
 
    protected void grdPendingOrders_NeedDataSource(object source, GridNeedDataSourceEventArgs e) 
    { 
        grdPendingOrders.DataSource = PendingOrders; 
    } 
 
    protected IList<Order> GetOrders() 
    { 
        IList<Order> results = new List<Order>(); 
        results.Add(new Order(1, "A", "B", "C")); 
        results.Add(new Order(2, "A", "B", "C")); 
        results.Add(new Order(3, "A", "B", "C")); 
        results.Add(new Order(4, "A", "B", "C")); 
        results.Add(new Order(5, "A", "B", "C")); 
        results.Add(new Order(6, "A", "B", "C")); 
        results.Add(new Order(7, "A", "B", "C")); 
        results.Add(new Order(8, "A", "B", "C")); 
        results.Add(new Order(9, "A", "B", "C")); 
        results.Add(new Order(10, "A", "B", "C")); 
        results.Add(new Order(11, "A", "B", "C")); 
        return results; 
    } 
 
    protected void grdShippedOrders_NeedDataSource(object source, GridNeedDataSourceEventArgs e) 
    { 
        grdShippedOrders.DataSource = ShippedOrders; 
    } 
 
    protected void grdPendingOrders_RowDrop(object sender, GridDragDropEventArgs e) 
    { 
        if (string.IsNullOrEmpty(e.HtmlElement)) 
        { 
            if (e.DraggedItems[0].OwnerGridID == grdPendingOrders.ClientID) 
            { 
                // items are drag from pending to shipped grid 
                if ((e.DestDataItem == null && ShippedOrders.Count == 0) || 
                    e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdShippedOrders.ClientID) 
                { 
                    IList<Order> shippedOrders = ShippedOrders; 
                    IList<Order> pendingOrders = PendingOrders; 
                    int destinationIndex = -1; 
                    if (e.DestDataItem != null) 
                    { 
                        Order order = GetOrder(shippedOrders, (int)e.DestDataItem.GetDataKeyValue("OrderId")); 
                        destinationIndex = (order != null) ? shippedOrders.IndexOf(order) : -1; 
                    } 
 
 
                    foreach (GridDataItem draggedItem in e.DraggedItems) 
                    { 
                        Order tmpOrder = GetOrder(pendingOrders, (int)draggedItem.GetDataKeyValue("OrderId")); 
 
                        if (tmpOrder != null) 
                        { 
                            if (destinationIndex > -1) 
                            { 
                                shippedOrders.Insert(destinationIndex, tmpOrder); 
                            } 
                            else 
                            { 
                                shippedOrders.Add(tmpOrder); 
                            } 
 
                            pendingOrders.Remove(tmpOrder); 
                        } 
                    } 
 
                    ShippedOrders = shippedOrders; 
                    PendingOrders = pendingOrders; 
                    grdPendingOrders.Rebind(); 
                    grdShippedOrders.Rebind(); 
                } 
                else if (e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdPendingOrders.ClientID) 
                { 
                    //reorder items in pending grid 
                    IList<Order> pendingOrders = PendingOrders; 
                    Order order = GetOrder(pendingOrders, (int)e.DestDataItem.GetDataKeyValue("OrderId")); 
                    int destinationIndex = pendingOrders.IndexOf(order); 
 
                    if (e.DropPosition == GridItemDropPosition.Above && e.DestDataItem.ItemIndex > e.DraggedItems[0].ItemIndex) 
                    { 
                        destinationIndex -= 1; 
                    } 
                    if (e.DropPosition == GridItemDropPosition.Below && e.DestDataItem.ItemIndex < e.DraggedItems[0].ItemIndex) 
                    { 
                        destinationIndex += 1; 
                    } 
 
                    List<Order> ordersToMove = new List<Order>(); 
                    foreach (GridDataItem draggedItem in e.DraggedItems) 
                    { 
                        Order tmpOrder = GetOrder(pendingOrders, (int)draggedItem.GetDataKeyValue("OrderId")); 
                        if (tmpOrder != null) 
                            ordersToMove.Add(tmpOrder); 
                    } 
 
                    foreach (Order orderToMove in ordersToMove) 
                    { 
                        pendingOrders.Remove(orderToMove); 
                        pendingOrders.Insert(destinationIndex, orderToMove); 
                    } 
                    PendingOrders = pendingOrders; 
                    grdPendingOrders.Rebind(); 
                    e.DestDataItem.Selected = true; 
                } 
            } 
        } 
    } 
 
    private static Order GetOrder(IEnumerable<Order> ordersToSearchIn, int orderId) 
    { 
        foreach (Order order in ordersToSearchIn) 
        { 
            if (order.OrderID == orderId) 
            { 
                return order; 
            } 
        } 
        return null; 
    } 
 
    protected void grdShippedOrders_RowDrop(object sender, GridDragDropEventArgs e) 
    { 
        if (!string.IsNullOrEmpty(e.HtmlElement) && e.HtmlElement == "trashCan") 
        { 
            IList<Order> shippedOrders = ShippedOrders; 
            bool deleted = false; 
            foreach (GridDataItem draggedItem in e.DraggedItems) 
            { 
                Order tmpOrder = GetOrder(shippedOrders, (int)draggedItem.GetDataKeyValue("OrderId")); 
 
                if (tmpOrder != null) 
                { 
                    shippedOrders.Remove(tmpOrder); 
                    deleted = true; 
                } 
            } 
            if (deleted) 
            { 
                msg.Visible = true; 
            } 
            ShippedOrders = shippedOrders; 
            grdShippedOrders.Rebind(); 
        } 
    } 
    #region Nested type: Order 
 
    protected class Order 
    { 
        private string _companyName; 
        private string _customerId; 
        private int _orderId; 
        private string _date; 
 
        public Order(int orderId, string customerId, string companyName, string requiredDate) 
        { 
            _orderId = orderId; 
            _customerId = customerId; 
            _companyName = companyName; 
            _date = requiredDate; 
        } 
 
        public int OrderID 
        { 
            get { return _orderId; } 
        } 
 
        public string CustomerID 
        { 
            get { return _customerId; } 
        } 
 
        public string Company 
        { 
            get { return _companyName; } 
        } 
 
        public string Date 
        { 
            get { return _date; } 
        } 
    } 
    #endregion 
 
} 
 

2 Answers, 1 is accepted

Sort by
0
Greg
Top achievements
Rank 1
answered on 12 Jun 2009, 02:29 PM
No one has a clue on this one?
0
Sebastian
Telerik team
answered on 12 Jun 2009, 02:32 PM
Hello Greg,

You need to clear the Controls collection of the placeholder each time before adding the user control programmatically on PageLoad to ensure that no duplicate user controls will be present and the viewstate of that control will remain consistent. Namely:

   protected void Page_Load(object sender, System.EventArgs e)    
        {    
            PLaceHolder1.Controls.Clear();   
            CMS_UserControls_Advanced_Library ctrl = (CMS_UserControls_Advanced_Library)Page.LoadControl("~/Advanced Library.ascx");    
            PlaceHolder1.Controls.Add(ctrl);    
    }    
 

Different approach presenting how to load user controls programmatically is explained here.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
Grid
Asked by
Greg
Top achievements
Rank 1
Answers by
Greg
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or