Drag and drop to reorder rows in grid

Thread is closed for posting
29 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 28 Nov 2006 Link to this post

    Requirements
    RadGrid for ASP .NET version

    4.0.3 and later
    .NET version

    2.0
    Visual Studio version

    2005
    Programming language

    C#, Javascript
    Browser support

    all supported by RadGrid for ASP .NET


    Note: The demonstrated functionality is supported automatically for RadControls for ASP .NET AJAX version 2008.2.826 and later as demonstrated in this online example.
     
    PROJECT DESCRIPTION
    The example demonstrates how to reorder grid rows. Event handlers for onmousedown, onmouseup and onmousemove (browser-dependant) for every row are hooked inside the RowCreated client-side event handler. After dragging (mouse down and mouse move) and dropping (mouse up) a request to the server is made. On the server (inside RaisePostBackEvent handler) both rows are accessed by their UniqueID (get/set from the DataKeyNames/DataKeyValues of the MasterTableView) and their positions are switched.
  3. 4B8885C9-D63A-45F6-B91A-ADD442376F96
    4B8885C9-D63A-45F6-B91A-ADD442376F96 avatar
    156 posts
    Member since:
    Jan 2006

    Posted 25 Jan 2007 Link to this post

    Can this be extended to to full reordering instead of just swapping, so when you move a row to a new position all the rows below it move down one to accomodate it?

    Cheers,

    Julian
  5. 23C72464-8FC9-43C3-9A12-B431B37B7758
    23C72464-8FC9-43C3-9A12-B431B37B7758 avatar
    11 posts
    Member since:
    Dec 2013

    Posted 26 Jan 2007 Link to this post

    Hello Julian,

    Basically, the functionality that you mentioned is achievable. The current approach is handled in the code-behind of the project, on the server. There, the items that will be swapped have their contents interchanged. If you decide to take a different approach, i.e.move all columns down by one, to accommodate the new one, you can use similar logic, but you will need to:

    1. preserve the contents of the row that will be moved
    2. delete the row that will be moved
    3. either swap all remaining rows, or insert them anew.

    This is the logical frame for the approach that you are looking for, and which is close to the code already available. However, such a scenario will impose a serious performance penalty, especially if the number of rows involved is bigger.

    I  hope this information helps.

    Regards,
    Yavor
    the telerik team
  7. EF1BF14C-F2C3-43F8-A764-051C3A43160B
    EF1BF14C-F2C3-43F8-A764-051C3A43160B avatar
    38 posts
    Member since:
    Feb 2006

    Posted 08 Feb 2007 Link to this post

    Thanks for the example this works very well. I just have one questions, is there anyway of hooking this up so that it does not fire for all controls when the mousedown event is fired on the gird. For example I have a checkbox control for some rows which I want to be able to select, but as the mousedown event is usually captured by the drag and drop script (unless you click really really quickly ;-)) I am unable to use the checkbox in the same grid.

    Woud this be best achieved by amending the mousedown eventhandler to check the ID of the control being clicked? or is there better method?

    Your help would be much appreciated.

    Thanks

    Greg
  9. 4B8885C9-D63A-45F6-B91A-ADD442376F96
    4B8885C9-D63A-45F6-B91A-ADD442376F96 avatar
    156 posts
    Member since:
    Jan 2006

    Posted 09 Feb 2007 Link to this post

    Hi Yavor,

    Thanks for that, in the end I have used the RadDockableObject approach and got that working although at some point I will revisit trying to do it with the RadGrid.

    Regards,

    Julian
  11. 97DF226D-579C-42A0-BB64-C01E3598A04D
    97DF226D-579C-42A0-BB64-C01E3598A04D avatar
    631 posts
    Member since:
    Sep 2012

    Posted 09 Feb 2007 Link to this post

    Hello Greg,

    You should check for the type of the control, fired the mouseDown event and if it is a checkbox control, to exit the function. So, just add the lines in bold from the following code in the mouseDownHandler of the DragDrop.js file:
    var mouseDownHandler = function(e) 
            { 
                if (!e) 
                    var e = window.event; 
                                 
                if(e.srcElement.type == "checkbox") 
                { 
                    currentRow = null; 
                    return; 
                } 
     
                if (!currentRow) 
                { 
                    currentRow = document.createElement("div"); 
                    currentRow.innerHTML = "<table><tbody><tr>"+row.Control.innerHTML+"</tr></tbody><table>"; 
                    document.body.appendChild(currentRow); 
                    currentRow.style.position = "absolute"; 
                    currentRow.style.display = "none"; 
                     
                    movedRow = row; 
                } 
                 
                ClearDocumentEvents();               
            }; 

    Let us know if you have further questions.

    Greetings,
    Petja Vassileva
    the telerik team
  13. 7798FEE9-CB56-4B64-8860-C2514306B3C1
    7798FEE9-CB56-4B64-8860-C2514306B3C1 avatar
    4 posts
    Member since:
    May 2007

    Posted 31 May 2007 Link to this post

     
      Dear , all!

      This article is very helpful for me to reference. I also using ragGrid for displaying data. In my situation I have a master/detail grid. Now I want to swap rows within detailgrid. How can I handle this?
       
           All your helps are appreciated!

       Thank you, all!
       
  15. 97DF226D-579C-42A0-BB64-C01E3598A04D
    97DF226D-579C-42A0-BB64-C01E3598A04D avatar
    631 posts
    Member since:
    Sep 2012

    Posted 02 Jun 2007 Link to this post

    Hi,

    If we understand you correctly, you want to reorder rows within a detail table of the grid, not between detail tables. Find attached the modified project for your review.
    Let us know if this is what you need.

    Regards,
    Petja
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  17. 7798FEE9-CB56-4B64-8860-C2514306B3C1
    7798FEE9-CB56-4B64-8860-C2514306B3C1 avatar
    4 posts
    Member since:
    May 2007

    Posted 03 Jun 2007 Link to this post

     Dear,

     Your example is very good for reference when swapping row within detail grid. Unforturnately, I still need swapping row between detail tables also. It's kind of moving an item from one subsection to another.
     
      Anyway, I'm very happy as I got your support.
          Thank you very much!
    BTW: Do you any example for swapping row within detail grid with data source is a list (List<T>)? I'd love to have this reference.


  19. 97DF226D-579C-42A0-BB64-C01E3598A04D
    97DF226D-579C-42A0-BB64-C01E3598A04D avatar
    631 posts
    Member since:
    Sep 2012

    Posted 04 Jun 2007 Link to this post

    Hi,

    То move an item from one subsection to another you should use the following code library as a reference:
    Drag and drop grid rows from one grid to another. Find attached a sample project for your convenience.
    Please, review it, and let us know what specific problems you have experienced with a generic list data source.
    It will be best if you open a support ticket and send it to us for further investigation.

    Greetings,
    Petja
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  21. 7798FEE9-CB56-4B64-8860-C2514306B3C1
    7798FEE9-CB56-4B64-8860-C2514306B3C1 avatar
    4 posts
    Member since:
    May 2007

    Posted 13 Jun 2007 Link to this post

     
       Dear PetJa,

      First of all, I want to say thanks for your support. I'm sorry for replying you late, just because I got a stuck with binding data to detail grid when moving to radGrid v4.6.1.

     With new version of radGrid, I implement as you did in example, except to I use MasterPage and List<T> in master/detail table data source.
    Could you pls give a an example on using List<T> as datasource?

           Best regards,

              Hung
  23. 97DF226D-579C-42A0-BB64-C01E3598A04D
    97DF226D-579C-42A0-BB64-C01E3598A04D avatar
    631 posts
    Member since:
    Sep 2012

    Posted 15 Jun 2007 Link to this post

    Hello,

    We have modified the last example to work with LList<T> and attached it for your review. Notice that we have changed only the code behind of the page (Default.aspx.cs).
    If this does not help, it will be best if you send us your project in another ticket, so we could review it locally.

    Greetings,
    Petja
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  25. F432571E-97C5-42AC-99AC-CD0E70A63950
    F432571E-97C5-42AC-99AC-CD0E70A63950 avatar
    4 posts
    Member since:
    Apr 2007

    Posted 02 Jul 2007 Link to this post

       Dear all,

      I'm very happy when I could drag and drop a row within detail grid properly. But I prefer to display a pop-up window to confirm the swapping happen. I drag a row then I drop it, an pop-up window will display to ask "Do you really want to reorder this row?" If I click yes, the changes should be made, otherwise the order of rows still remain.
      Could you please give me a solution for this? 

              Best regards,

                  Hung


     
  27. 6AB3838B-B392-4EDE-97F0-B3F5916D8900
    6AB3838B-B392-4EDE-97F0-B3F5916D8900 avatar
    11100 posts
    Member since:
    Jan 2017

    Posted 03 Jul 2007 Link to this post

    Hello Hung Mai,

    This can be achieve very easily in the mouseUpHandler. Here is an example:

            var mouseUpHandler = function(e)
            {
                  if(!confirm("Are you sure?"))
                       return;
                  ....

    Sincerely yours,
    Vlad
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
        
  29. F432571E-97C5-42AC-99AC-CD0E70A63950
    F432571E-97C5-42AC-99AC-CD0E70A63950 avatar
    4 posts
    Member since:
    Apr 2007

    Posted 03 Jul 2007 Link to this post


           Dear Vlad,

        Thanks for your help!

            Best regards,

                Hung
  31. A6917615-3580-43F3-A1F2-A1584065B3B5
    A6917615-3580-43F3-A1F2-A1584065B3B5 avatar
    85 posts
    Member since:
    Nov 2006

    Posted 15 Aug 2007 Link to this post

    Could I get a VB.Net sample of the RadGrid drag/drop rows?
    Thanks.
  33. A6917615-3580-43F3-A1F2-A1584065B3B5
    A6917615-3580-43F3-A1F2-A1584065B3B5 avatar
    85 posts
    Member since:
    Nov 2006

    Posted 15 Aug 2007 Link to this post

    Nevermind, I worked out the sample to VB.

    I do have another question though....when you try to drag a row and try to drag to the header, you end up getting a bunch of javascript "Object Required" errors...any way to fix this?
    Thanks again.
  35. 97DF226D-579C-42A0-BB64-C01E3598A04D
    97DF226D-579C-42A0-BB64-C01E3598A04D avatar
    631 posts
    Member since:
    Sep 2012

    Posted 16 Aug 2007 Link to this post

    Hello Sam,

    You should modify the mouseUp event handler in the DragDrop.js file like follows:
    var mouseUpHandler = function(e) 
    { 
        if (!e) 
            var e = window.event; 
     
        if (currentRow) 
        { 
            if (movedRow && currentRow.style.display != "none") 
            {                
                var targetElement = e.srcElement ? e.srcElement : e.target;                  
                var droppedRowIndex;  
                while(typeof(droppedRowIndex) == "undefined" && targetElement.parentNode != null) 
                { 
                    droppedRowIndex = targetElement.parentNode.RowIndex; 
                    targetElement = targetElement.parentNode;   //in case of controls in the row                     
                } 
                                     
                if(typeof(droppedRowIndex) != "undefined")        
                    ReorderRows(movedRow.RealIndex, droppedRowIndex); 
            } 
            document.body.removeChild(currentRow); 
            currentRow = null; 
            movedRow = null; 
        } 
        RestoreDocumentEvents(); 
    }; 

    Let us know if you have further questions.

    Sincerely yours,
    Petja
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  37. 2ACB61FB-7EA9-4C45-85D5-4AEF84BBFC6F
    2ACB61FB-7EA9-4C45-85D5-4AEF84BBFC6F avatar
    5 posts
    Member since:
    Nov 2005

    Posted 05 Oct 2007 Link to this post

    Hi,

    I downloaded the code, and changed it like this to suit my needs

                    object res = this.Session["_ds"];
                    if (res == null)
                    {
                        SqlConnection MainDbConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["MainSQLDatabase"].ConnectionString);
                       
                       
                        SqlCommand MyCommand = new SqlCommand("SELECT Text, OrderID FROM Menu2 WHERE CustomerID=999 ORDER BY [OrderID] DESC", MainDbConnection);
                        SqlDataAdapter MyDa = new SqlDataAdapter(MyCommand);

                        DataTable table = new DataTable();

    but the ORDER BY doesnt seems to work... any idea why ? It doesnt re-order the rows according to the orderid, eventhough the backend database  orderid is changed.

    Thanks,
    Aby
  39. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 08 Oct 2007 Link to this post

    Hello Aby,

    The more cleaner approach I can suggest is to use sort expressions in order to sort the data in ascending or descending order. Review the online resources linked below for more info:

    http://www.telerik.com/help/aspnet/grid/?grdSortingExpressions.html

    http://www.telerik.com/demos/aspnet/Grid/Examples/Programming/Sort/DefaultCS.aspx

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  41. 3B340CE4-B48B-4465-B330-A9DFABE8EDCB
    3B340CE4-B48B-4465-B330-A9DFABE8EDCB avatar
    11 posts
    Member since:
    Oct 2007

    Posted 08 Nov 2007 Link to this post

    Are there any suggestions for implementing this in a UserControl as opposed to a Page? The IPostBackEventHandler is implemented differently in the page as opposed to implementing in the UserControl (user control only takes 1 argument, on the page it takes 2), so the AsyncRequest doesn't hit the RaisePostBackEvent correctly. Any help would be appreciated.
  43. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 09 Nov 2007 Link to this post

    Hi Steve,

    How to trigger an ajax request from the client and intercept it in the code-behind when the grid resides in user control instance you can learn from this documentation article.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  45. F776071C-3D62-448F-B8A6-2F6EB58ECD5E
    F776071C-3D62-448F-B8A6-2F6EB58ECD5E avatar
    11 posts
    Member since:
    Dec 2006

    Posted 14 Jan 2008 Link to this post

    I used to posted change for the mouseUpHandler, however I am still getting Object Required errors.  I am using updated RadGrid (5.0.1.0), on IE7.  It appears something may have changed, but I'm not able to figure out exactly what.
  47. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 15 Jan 2008 Link to this post

    Hello jlucero,

    Can you please migrate to the latest release 5.1.0 of RadGrid to see whether this helps? If you continue to experience the problem, please start a formal support ticket and attach a subset of your project to it. We will review your implementation carefully and will advice you further.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  49. 0DF69A46-9A35-4BA0-9A8B-F224FCB714FE
    0DF69A46-9A35-4BA0-9A8B-F224FCB714FE avatar
    4 posts
    Member since:
    Feb 2008

    Posted 16 Feb 2008 Link to this post

    Hi ,

    I am having an issue with three or more levels of hierarchy and drag and drop between those detail tables.

    The issue is when I drag and drop from one detail table to other,  I would like the dragged row to get the primary key id of the row that it is being dropped and not the parent of the detail table.

    The DragDrop.js in these examples here seem to work only for 2 levels of hierarchies. I tried many ways to alter the .js file, but I am not able to get the correct reference to the row I am dropping the row onto.

    Could any one please help with this issue?

    Thanks!

    Vik
  51. A37EE6F1-7FC4-46EE-8125-5CF20A47C814
    A37EE6F1-7FC4-46EE-8125-5CF20A47C814 avatar
    1 posts
    Member since:
    Feb 2008

    Posted 24 Feb 2008 Link to this post

    This example showed that you can drag a row around in the same grid, what I want to know and see is if you can drag a row from Grid1 to a different container such as Grid2 or some other object.
  53. 6AB3838B-B392-4EDE-97F0-B3F5916D8900
    6AB3838B-B392-4EDE-97F0-B3F5916D8900 avatar
    11100 posts
    Member since:
    Jan 2017

    Posted 25 Feb 2008 Link to this post

    Hi George,

    You can check this thread for more info:
    http://www.telerik.com/community/forums/thread/b311D-kaahh.aspx

    Regards,
    Vlad
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  55. 0AC58159-8F02-4153-887D-E15517FAEF75
    0AC58159-8F02-4153-887D-E15517FAEF75 avatar
    44 posts
    Member since:
    Nov 2005

    Posted 11 Apr 2008 Link to this post

    Hi,

    this drag and drop function works really great. But how can I disable this functionality when I am in edit mode?

    Regards,
    Ingo
  57. FE7977D3-8E1C-418E-AD04-EA6D5106F9CE
    FE7977D3-8E1C-418E-AD04-EA6D5106F9CE avatar
    3253 posts
    Member since:
    Sep 2018

    Posted 14 Apr 2008 Link to this post

    Hello Ingo Oltmann,

    A possible solution will be to check what the currently dragged row's itemType is and eventually to cancel the drag. This can be done in mouseDownHandler javascript method similar to this:

            var mouseDownHandler = function(e)  
            {  
                if (!e)  
                    var e = window.event;  
                  
                if (!currentRow)  
                {  
                    if (row.ItemType == 'EditItem') return;  
                      
                    currentRow = document.createElement("div");  
                    currentRow.innerHTML = "<table><tbody><tr>"+row.Control.innerHTML+"</tr></tbody><table>";  
                    document.body.appendChild(currentRow);  
                    currentRow.style.position = "absolute";  
                    currentRow.style.display = "none";            
                      
                    movedRow = row;  
                }  
                  
                ClearDocumentEvents();                
            }; 

    Also I'm happy to inform you that in official release of Prometheus suite (which is expected this week) the items drag and drop functionality will be build-in into RadGrid control. Giving you both client-side and server-side events to precisely handle the behavior.

    All the best,
    Rosen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.