Drag and drop to reorder rows in grid

Thread is closed for posting
29 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 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.
  2. Julian Voelcker
    Julian Voelcker 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
  3. Yavor
    Admin
    Yavor avatar
    11 posts

    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
  4. Greg Duffield
    Greg Duffield 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
  5. Julian Voelcker
    Julian Voelcker 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
  6. Petja
    Admin
    Petja avatar
    631 posts

    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
  7. bugu
    bugu 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!
       
  8. Petja
    Admin
    Petja avatar
    631 posts

    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
  9. bugu
    bugu 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.


  10. Petja
    Admin
    Petja avatar
    631 posts

    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
  11. bugu
    bugu 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
  12. Petja
    Admin
    Petja avatar
    631 posts

    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
  13. Hung Mai
    Hung Mai 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


     
  14. Vlad
    Admin
    Vlad avatar
    11100 posts

    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
        
  15. Hung Mai
    Hung Mai avatar
    4 posts
    Member since:
    Apr 2007

    Posted 03 Jul 2007 Link to this post


           Dear Vlad,

        Thanks for your help!

            Best regards,

                Hung
  16. Sam Tran
    Sam Tran avatar
    83 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.
  17. Sam Tran
    Sam Tran avatar
    83 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.
  18. Petja
    Admin
    Petja avatar
    631 posts

    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
  19. Aby
    Aby 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
  20. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    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
  21. Susan
    Susan 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.
  22. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    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
  23. jlucero
    jlucero 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.
  24. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    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
  25. Vik
    Vik 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
  26. George
    George 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.
  27. Vlad
    Admin
    Vlad avatar
    11100 posts

    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
  28. Ingo Oltmann
    Ingo Oltmann 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
  29. Rosen
    Admin
    Rosen avatar
    3237 posts

    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