[Solved] Drag & Drop between two grids

[bdk0172]

I'm attempting to modify your drag & drop grid sample to allow dropping back and forth between both grids rather than just allowing drag from one grid to the other.  I can get it to work dragging from the left to the right grid, but when I attempt to drag from the right to the left, the row is removed from the right grid, but does not show up in the left until I do a refresh of the page.

Modified JavaScript:

function onRowDropping(sender, args) {
    debugger;
    if (sender.get_id() == '<%=grdAvailable.ClientID %>')
    {
        var node = args.get_destinationHtmlElement();
        if(!isChildOf('<%=grdSelected.ClientID %>', node) && !isChildOf('<%=grdAvailable.ClientID %>', node) )
        {
            args.set_cancel(true);
        }
    }
    if (sender.get_id() == '<%=grdSelected.ClientID %>')
    {
        var node = args.get_destinationHtmlElement();
        if(!isChildOf('<%=grdAvailable.ClientID %>', node) && !isChildOf('<%=grdSelected.ClientID %>', node) )
        {
            args.set_cancel(true);
        }
    }
}

Grids:

<table>
    <tr>
        <td style="width: 100%; padding-left: 5px; padding-right: 5px;">
            <div style="float: left; padding: 0 6px 0 10px">
                <h2>
                    Available</h2>
                <telerik:RadGrid runat="server" ID="grdAvailable" Skin="Office2007" OnNeedDataSource="grdAvailable_NeedDataSource"
                    Width="550px" AllowMultiRowSelection="true" AutoGenerateColumns="false" OnRowDrop="grdAvailable_RowDrop">
                    <MasterTableView DataKeyNames="fieldname" Width="95%" TableLayout="Fixed">
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="Field Name"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Column Description"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Column Width"></telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings AllowRowsDragDrop="True">
                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" />
                        <ClientEvents OnRowDropping="onRowDropping" />
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    </ClientSettings>
                    <PagerStyle Mode="NextPrevAndNumeric" />
                </telerik:RadGrid>
            </div>
        </td>
        <td valign="top">
            <div style="float: right; padding: 0 10px 0 6px">
                <h2>
                    Selected</h2>
                <telerik:RadGrid runat="server" ID="grdSelected" Skin="Office2007" OnNeedDataSource="grdSelected_NeedDataSource"
                    Width="550px" AllowMultiRowSelection="true" AutoGenerateColumns="false" OnRowDrop="grdSelected_RowDrop">
                    <MasterTableView DataKeyNames="fieldname" Width="100%">
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="Field Name"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Column Description"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Column Width"></telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings AllowRowsDragDrop="True">
                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" />
                        <ClientEvents OnRowDropping="onRowDropping" />
                    </ClientSettings>
                </telerik:RadGrid>
            </div>
            <div style="clear: both;">
                <!-- -->
            </div>
        </td>
    </tr>
</table>

C# code(I have commented out the sql query that populates grdAvailable and hard-coded 2 rows, eventually I will need to query to populate both grids):

        protected void grdAvailable_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            grdAvailable.DataSource = AvailableFields;
        }
        protected void grdSelected_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            grdSelected.DataSource = SelectedFields;
        }

        protected IList<Field> AvailableFields
        {
            get
            {
                try
                {
                    object obj = Session["AvailableFields"];
                    if (obj == null)
                    {
                        obj = GetAvailableFields();
                        if (obj != null)
                        {
                            Session["AvailableFields"] = obj;
                        }
                        else
                        {
                            obj = new List<Field>();
                        }
                    }
                    return (IList<Field>)obj;
                }
                catch
                {
                    Session["AvailableFields"] = null;
                }
                return new List<Field>();
            }
            set { Session["AvailableFields"] = value; }
        }

        protected IList<Field> SelectedFields
        {
            get
            {
                try
                {
                    object obj = Session["SelectedFields"];
                    if (obj == null)
                    {
                        Session["SelectedFields"] = obj = new List<Field>();
                    }
                    return (IList<Field>)obj;
                }
                catch
                {
                    Session["SelectedFields"] = null;
                }
                return new List<Field>();
            }
            set { Session["SelectedFields"] = value; }
        }

        protected IList<Field> GetAvailableFields()
        {
            IList<Field> results = new List<Field>();
            //using (IDbConnection connection = DbProviderFactories.GetFactory("System.Data.SqlClient").CreateConnection())
            //{
            //    connection.ConnectionString =
            //        ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            //    using (IDbCommand command = connection.CreateCommand())
            //    {
            //        command.CommandText =
            //            "SELECT o.OrderID, o.CustomerID, o.RequiredDate, c.CompanyName FROM orders o INNER JOIN customers c on o.customerID = c.customerID";
            //        connection.Open();
            //        try
            //        {
            //            IDataReader reader = command.ExecuteReader();
            //            while (reader.Read())
            //            {
            //                string fieldName = (!reader.IsDBNull(reader.GetOrdinal("fieldname")))
            //                                        ? (string)reader.GetValue(reader.GetOrdinal("CustomerID"))
            //                                        : string.Empty;
            //                string description = (!reader.IsDBNull(reader.GetOrdinal("description")))
            //                                            ? (string)reader.GetValue(reader.GetOrdinal("RequiredDate"))
            //                                            : string.Empty;
            //                string width = (!reader.IsDBNull(reader.GetOrdinal("width")))
            //                                         ? (string)reader.GetValue(reader.GetOrdinal("CompanyName"))
            //                                         : string.Empty;
                            results.Add(new Field("jobid", "Ticket", "150"));
                            results.Add(new Field("status", "S", "150"));
            //            }
            //        }
            //        catch
            //        {
            //            results.Clear();
            //        }
            //    }
            //}
            return results;
        }

        protected void grdAvailable_RowDrop(object sender, GridDragDropEventArgs e)
        {
            if (string.IsNullOrEmpty(e.HtmlElement))
            {
                if (e.DraggedItems[0].OwnerGridID == grdAvailable.ClientID)
                {
                    // items are drag from available to selected grid
                    if ((e.DestDataItem == null && SelectedFields.Count == 0) ||
                        e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdSelected.ClientID)
                    {
                        IList<Field> selectedFields = SelectedFields;
                        IList<Field> availableFields = AvailableFields;
                        foreach (GridDataItem draggedItem in e.DraggedItems)
                        {
                            Field tmpField = GetField(availableFields, (string)draggedItem.GetDataKeyValue("fieldname"));
                            if (tmpField != null)
                            {
                                selectedFields.Add(tmpField);
                                availableFields.Remove(tmpField);
                            }
                        }
                        SelectedFields = selectedFields;
                        AvailableFields = availableFields;
                        grdAvailable.Rebind();
                        grdSelected.Rebind();
                    }
                    else if (e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdAvailable.ClientID)
                    {
                        //reorder items in available  grid
                        IList<Field> availableFields = AvailableFields;
                        Field field = GetField(availableFields, (string)e.DestDataItem.GetDataKeyValue("fieldname"));
                        int destinationIndex = availableFields.IndexOf(field);
                        List<Field> fieldsToMove = new List<Field>();
                        foreach (GridDataItem draggedItem in e.DraggedItems)
                        {
                            Field tmpField = GetField(availableFields, (string)draggedItem.GetDataKeyValue("fieldname"));
                            if (tmpField != null)
                                fieldsToMove.Add(tmpField);
                        }
                        foreach (Field fieldToMove in fieldsToMove)
                        {
                            availableFields.Remove(fieldToMove);
                            availableFields.Insert(destinationIndex, fieldToMove);
                        }
                        AvailableFields = availableFields;
                        grdAvailable.Rebind();
                        e.DestDataItem.Selected = true;
                    }
                }
            }
        }

        private static Field GetField(IEnumerable<Field> fieldsToSearchIn, string fieldName)
        {
            foreach (Field field in fieldsToSearchIn)
            {
                if (field.fieldName == fieldName)
                {
                    return field;
                }
            }
            return null;
        }

        protected void grdSelected_RowDrop(object sender, GridDragDropEventArgs e)
        {
            if (string.IsNullOrEmpty(e.HtmlElement))
            {
                if (e.DraggedItems[0].OwnerGridID == grdSelected.ClientID)
                {
                    // items are drag from selected to available grid
                    if ((e.DestDataItem == null && AvailableFields.Count == 0) ||
                        e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdAvailable.ClientID)
                    {
                        IList<Field> availableFields = AvailableFields;
                        IList<Field> selectedFields = SelectedFields;
                        foreach (GridDataItem draggedItem in e.DraggedItems)
                        {
                            Field tmpField = GetField(selectedFields, (string)draggedItem.GetDataKeyValue("fieldname"));
                            if (tmpField != null)
                            {
                                availableFields.Add(tmpField);
                                selectedFields.Remove(tmpField);
                            }
                        }
                        AvailableFields = availableFields;
                        SelectedFields = selectedFields;
                        grdSelected.Rebind();
                        grdAvailable.Rebind();
                    }
                    else if (e.DestDataItem != null && e.DestDataItem.OwnerGridID == grdSelected.ClientID)
                    {
                        //reorder items in selected  grid
                        IList<Field> selectedFields = SelectedFields;
                        Field field = GetField(selectedFields, (string)e.DestDataItem.GetDataKeyValue("fieldname"));
                        int destinationIndex = selectedFields.IndexOf(field);
                        List<Field> fieldsToMove = new List<Field>();
                        foreach (GridDataItem draggedItem in e.DraggedItems)
                        {
                            Field tmpField = GetField(selectedFields, (string)draggedItem.GetDataKeyValue("fieldname"));
                            if (tmpField != null)
                                fieldsToMove.Add(tmpField);
                        }
                        foreach (Field fieldToMove in fieldsToMove)
                        {
                            selectedFields.Remove(fieldToMove);
                            selectedFields.Insert(destinationIndex, fieldToMove);
                        }
                        AvailableFields = selectedFields;
                        grdSelected.Rebind();
                        e.DestDataItem.Selected = true;
                    }
                }
            }
        }

        #region Nested type: Field
        protected class Field
        {
            private string _fieldName;
            private string _description;
            private string _width;
            public Field(string fieldName, string description, string width)
            {
                _fieldName = fieldName;
                _description = description;
                _width = width;
            }
            public string fieldName
            {
                get { return _fieldName; }
            }
            public string description
            {
                get { return _description; }
            }
            public string width
            {
                get { return _width; }
            }
        }

        #endregion

[Rosen]

Hello,

Can you please check your ajax setting? Note that the grdSelected should update grdAvailable. Therefore your AjaxSetting should be similar to following:

<telerik:RadAjaxManager runat="server" ID="radAjax">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="grdAvailable">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdAvailable" />

<telerik:AjaxUpdatedControl ControlID="grdSelected" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="grdSelected">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdSelected" />                             <telerik:AjaxUpdatedControl ControlID="grdAvailable" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Regards,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[bdk0172]

That was it.  I'm sure I would've been banging my head on my desk because I wasn't even looking at that piece of code.  Thanks for your help and the quick reply.