This is a migrated thread and some comments may be shown as answers.

Drag & Drop between two grids

2 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
bdk0172
Top achievements
Rank 1
bdk0172 asked on 04 Sep 2008, 02:20 PM
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  
 

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 05 Sep 2008, 11:22 AM
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.
0
bdk0172
Top achievements
Rank 1
answered on 05 Sep 2008, 12:54 PM
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.
Tags
Grid
Asked by
bdk0172
Top achievements
Rank 1
Answers by
Rosen
Telerik team
bdk0172
Top achievements
Rank 1
Share this question
or