Drag and drop custom control on RadGrid

[samuel]

Hi,
I have website where people are able to drag and drop custom WebUserControl on a Radgrid. I'm using jQuery-ui to do that but the problem is when i have too much row on my grid, the draggable animation is slow and the control is not moving with the cursor. He teleports to the cursor when we stop moving.

Is there a way to set the Grid's cells "droppable" on the server-side ?

The css class "drag" is on each WebUserControl.
The css class "drop2" is on the <ItemStyle> markup for each columns except the first column.

Javascript :

jQuery.noConflict();

                function pageLoad(sender, args) {
                    jQuery(document).ready(function ($) {

                        var title;
                        var col, row, preCol, preRow;

                        // set the element draggable (WebUserControl)
                        $(".drag").draggable({
                            drag: function (event, ui) {
                                title = this.title;
                            }
                        });

                        // set the element droppable (each cells of RadGrid but not on the first column
                        $(".drop2").droppable({
                            drop: function (event, ui) {
                                col = $(this).parent().children().index($(this));
                                row = $(this).parent().parent().children().index($(this).parent());
                                dropped();
                                alert('Ligne: ' + row + ', Colonne: ' + col);
                            }
                        });

                        // AjaxRequest with cell indexes and control's id <== title property
                        function dropped() {
                            $find('<%= RadAjaxManager1.ClientID%>').ajaxRequest("Drop;" + title + ";" + col + ";" + row);
                        }
                    });
                }

 

Code-behind :

public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Create a List of half day for the next 3 months
            List<string> Montableau = new List<string>();
            DateTime monHeure = DateTime.Now.AddDays(-1).AddHours(-DateTime.Now.Hour).AddMinutes(-DateTime.Now.Minute).AddSeconds(-DateTime.Now.Second).AddMilliseconds(-DateTime.Now.Millisecond);
            while (monHeure < DateTime.Now.AddMonths(3))
            {
                Montableau.Add(monHeure.ToShortDateString() + " " + monHeure.ToShortTimeString());
                monHeure = monHeure.AddHours(12);
            }

            RadGrid1.DataSource = Montableau;
            RadGrid1.DataBind();

            for (int i = 0; i < Montableau.Count; i++)
            {
                RadGrid1.Items[i].Cells[2].Text = Montableau[i];
                RadGrid1.Items[i].Cells[3].Text = "";
                RadGrid1.Items[i].Cells[4].Text = "";
                RadGrid1.Items[i].Cells[5].Text = "";
            }

            // Creating 2 WebUserControl dynamically
            WebUserControl1 ctrl = (WebUserControl1)LoadControl("~/WebUserControl1.ascx");
            ctrl.idControl = "wuc9";
            ctrl.ID = "wuc9";
            ctrl.numeroAffaire = "9";
            ctrl.leSite = "Test";
            ctrl.idControl = ctrl.ID;
            ctrl.couleurFond = Color.Aqua;
            Panel2.Controls.Add(ctrl);

            WebUserControl1 ctrl2 = (WebUserControl1)LoadControl("~/WebUserControl1.ascx");
            ctrl2.idControl = "wuc10";
            ctrl2.ID = "wuc10";
            ctrl2.numeroAffaire = "10";
            ctrl2.leSite = "Test";
            ctrl2.idControl = ctrl2.ID;
            ctrl2.couleurFond = Color.Lime;
            Panel2.Controls.Add(ctrl2);
        }

        protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            if (e.Argument.StartsWith("Drop"))
            {
                string[] mesArg = e.Argument.Split(';');

                // Search the control with the id (title attributes)
                WebUserControl1 user = this.FindControl(mesArg[1]) as WebUserControl1;

                // Search the RadGrid
                RadGrid rg = (RadGrid)FindControl("RadGrid1");
                if (rg != null)
                {
                    // Add control in the correct cell
                    if (rg.Items[int.Parse(mesArg[3])].Cells[int.Parse(mesArg[2]) + 2].Controls.Count == 0)
                    {
                        rg.Items[int.Parse(mesArg[3])].Cells[int.Parse(mesArg[2]) + 2].Controls.Add(user);
                    }
                    else
                    {
                        RadAjaxManager1.Alert("Cette case contient deja un control");
                    }
                }
                UpdatePanel1.Update();
            }
        }
    }

Thanks !

[Antonio Stoilkov]

Hello Samuel,

Unfortunately, the cells droppable is jQuery UI extension and could not be set from a ASP.NET Server-side code. You could improve the performance of your application by lowering the number of rows in your grid. Additionally, we are currently working on performance improvements for the grid that will be available in the next beta release.

Regards,
Antonio Stoilkov
Telerik

[samuel]

Hi Antonio,

Thank you for your reply. I will try to lower the number of  rows.