Drag row from one radgrid to another?

24 posts, 1 answers
  1. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 26 Mar 2009 Link to this post

    Is it possible to drag one or more rows from one radgrid to another radgrid on a form?


    I saw there was a property allowdrop so i'm guessing that it is possible.

    Is there some example code on how to do this?

    thanks

  2. Answer
    Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 30 Mar 2009 Link to this post

    Hello gerbrand,

    Thank you for this question.

    Currently RadGridView doesn't support this operation directly. We will consider adding this feature in one of our upcoming releases. However, you could achieve the same effect with a few lines of code. You should handle the MouseDown, MouseMove and MouseUp events.

    Please consider the code snippet below:

    Point downPt; 
    bool dragging; 
     
    void radGridView1_MouseDown(object sender, MouseEventArgs e) 
    {             
        downPt = e.Location;     
     
    void radGridView1_MouseMove(object sender, MouseEventArgs e) 
        if (e.Button == MouseButtons.Left) 
        { 
            if (!dragging && IsRealDrag(e.Location, downPt)) 
            { 
                RadElement element = this.radGridView1.ElementTree.GetElementAtPoint(e.Location); 
                GridDataCellElement cell = element as GridDataCellElement; 
                if (cell != null && cell.RowElement is GridDataRowElement) 
                { 
                    dragging = true
                    this.radGridView1.Capture = true
                    this.radGridView1.Cursor = Cursors.Hand; 
                } 
            }                 
        } 
     
    void radGridView1_MouseUp(object sender, MouseEventArgs e) 
        if (dragging) 
        { 
            Point pt = this.radGridView1.PointToScreen(e.Location); 
            pt = this.PointToClient(pt); 
            if (this.radGridView2.Bounds.Contains(pt)) 
            { 
                foreach (GridViewDataRowInfo row in this.radGridView1.RowsToDragDrop) 
                { 
                    this.radGridView2.Rows.Add(row.Cells[0].Value, row.Cells[1].Value, row.Cells[2].Value); 
                    this.radGridView1.Rows.Remove(row); 
                } 
            }                 
            this.radGridView1.Cursor = Cursors.Arrow; 
            this.radGridView1.Capture = false
            dragging = false
        } 
     
    private static bool IsRealDrag(Point mousePosition, Point initialMousePosition) 
        return (Math.Abs(mousePosition.X - initialMousePosition.X) >= SystemInformation.DragSize.Width) || 
            (Math.Abs(mousePosition.Y - initialMousePosition.Y) >= SystemInformation.DragSize.Height); 
     

    You should also inherit RadGridView and process it's OnMouseDown event if you want to drag & drop multiple rows:

    public class MyGrid : RadGridView 
        List<GridViewDataRowInfo> rowsToDragDrop = new List<GridViewDataRowInfo>(); 
     
        public override string ThemeClassName 
        { 
            get { return typeof(RadGridView).FullName; } 
            set {} 
        } 
     
        public List<GridViewDataRowInfo> RowsToDragDrop 
        { 
            get { return this.rowsToDragDrop; } 
        } 
     
        protected override void OnMouseDown(MouseEventArgs e) 
        { 
            this.rowsToDragDrop.Clear(); 
            foreach (GridViewDataRowInfo row in this.SelectedRows) 
            { 
                rowsToDragDrop.Add(row);                 
            } 
            base.OnMouseDown(e); 
        } 
     

    I hope this helps. Don't hesitate to contact us if you need further assistance.

    All the best,
    Jack
    the Telerik team

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

  3. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 06 Apr 2009 Link to this post

    This works very good, but I'm wondering if I drop a row on the parent of the second grid, I want the dragged rows to be added to the childtemplate of that parent.


    I think I need to work with the location of the mouse in order to find the parent?

    Thanks

  4. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 06 Apr 2009 Link to this post

    Hi Gerbrand,

    Yes, you should use the GetElementAtPoint method to get the currently hovered cell. Then use its ViewTemplate property to get the corresponding child view template. I will be able to give a more concrete suggestions if you send us the source code for your project.

    If you need further assistance, I will be glad to help.

    All the best,
    Jack
    the Telerik team


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

  5. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 06 Apr 2009 Link to this post

    Hmm, I didn't see any method called getElementAtPoint for the radgridview? That was the first thing that I looked up. But I found the getChildAtPoint, but that returns a control. Not the thing I need.


    I used the code you posted as answer in my first question.

    void radGridView1_MouseUp(object sender, MouseEventArgs e)  
    {  
        if (dragging)  
        {  
            Point pt = this.radGridView1.PointToScreen(e.Location);  
            pt = this.PointToClient(pt);  
            if (this.radGridView2.Bounds.Contains(pt))  
            {  
        //var parent = this.radGridView2.GetChildAtPoint(this.radGridView2.PointToClient(new Point(e.X, e.Y)));

                foreach (GridViewDataRowInfo row in this.radGridView1.RowsToDragDrop)  
                {  
                    //add the dragged rows to the parent where the mouse is hovered above
    this.radGridView2.Rows.Add(row.Cells[0].Value, row.Cells[1].Value, row.Cells[2].Value);  
      
                }  
            }                  
            this.radGridView1.Cursor = Cursors.Arrow;  
            this.radGridView1.Capture = false;  
            dragging = false;  
        }  
    }  

    So I'm kind of stuck at that point... 


  6. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 06 Apr 2009 Link to this post

    Hello Gerbrand,

    GetElementAtPoint is accessible through the ElementTree property. I used this method in the sample from my previous post. Please consider the code snippet below:

    RadElement element = this.radGridView1.ElementTree.GetElementAtPoint(e.Location);  

    Don't hesitate to write us if you have any other questions.

    Best wishes,
    Jack
    the Telerik team

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

  7. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 07 Apr 2009 Link to this post

    Hi Jack,


    I tried this: "var element = rgvAdlPositions.ElementTree.GetElementAtPoint(e.Location);" but every time is element "null".
    My second grid has elements so that isn't the problem.

    a quick code snippet:

    private void rgvAdserver_MouseUp(object sender, MouseEventArgs e) 
        if (dragging) 
        { 
            var pt = gridview1.PointToScreen(e.Location); 
            pt = PointToClient(pt); 
     
            if (gridview2.Bounds.Contains(pt)) 
            { 
                var element = gridview2.ElementTree.GetElementAtPoint(new Point(e.X,e.Y)); 
                var cell = element as GridDataCellElement; 
                if (cell != null
                { 
                    var temp = cell.ViewTemplate; 
                    var tempRow = cell.RowElement; 
                    var rowinfo = tempRow.RowInfo; 
                     
                    foreach (var row in gridview1.RowsToDragDrop) 
                    { 
                        //add the dragged rows to the child of the parent 
                        temp.Rows.Add(rowinfo.Cells[0].Value, row.Cells[1].Value); 
                    } 
                } 
            } 
            gridview1.Cursor = Cursors.Arrow; 
            gridview1.Capture = false
            dragging = false
        } 

    Thanks 

  8. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 07 Apr 2009 Link to this post

    Hello Gerbrand,

    I forgot to mention that when handling the MouseUp event of the first RadGridView, the coordinates are relative to this control. You should translate them. Here is a sample:

    Point pt = this.radGridView1.PointToScreen(e.Location);   
    pt = this.radGridView2.PointToClient(pt);   
    RadElement element = this.radGridView2.ElementTree.GetElementAtPoint(e.Location); 

    Should you have any further questions, I will be glad to help.

    All the best,
    Jack
    the Telerik team

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

  9. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 07 Apr 2009 Link to this post

    Hmm,


    It doesn't work. I still get a null for the element. Maybe I'm doing something wrong?

    private void rgvAdserver_MouseUp(object sender, MouseEventArgs e) 
        if (dragging) 
        { 
            var pt = gridview1.PointToScreen(e.Location); 
            pt = PointToClient(pt); 
             
            if (gridview2.Bounds.Contains(pt)) 
            { 
                pt = gridview2.PointToClient(pt);
                var element = gridview2.ElementTree.GetElementAtPoint(pt); 
                var cell = element as GridDataCellElement; 
                if (cell != null
                { 
                    var temp = cell.ViewTemplate; 
     
                    var tempRow = cell.RowElement; 
                    var rowinfo = tempRow.RowInfo; 
                     
                    foreach (var row in gridview1.RowsToDragDrop) 
                    { 
                        //add the dragged rows to the child of the parent 
                        temp.Rows.Add(rowinfo.Cells[0].Value, row.Cells[1].Value); 
                    } 
                } 
            } 
            gridview1.Cursor = Cursors.Arrow; 
            gridview1.Capture = false
            dragging = false
        } 

    Thanks in advanced

  10. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 08 Apr 2009 Link to this post

    Hi Gerbrand,

    The problem is that the point "pt" is already transformed in coordinates relative to your Form. This is made in the first call to the PointToClient method (this is the  6th line in your code). The PointToClient method requires screen coordinates, so when you are converting the point again, you get the wrong coordinates. I modified rgvAdserver_MouseUp event this way:

    void rgvAdserver_MouseUp(object sender, MouseEventArgs e) 
        if (dragging) 
        { 
            Point scrpt = gridview1.PointToScreen(e.Location); 
            Point pt = PointToClient(scrpt); 
     
            if (gridview2.Bounds.Contains(pt)) 
            { 
                pt = gridview2.PointToClient(scrpt); 
                var element = gridview2.ElementTree.GetElementAtPoint(pt); 
                var cell = element as GridDataCellElement; 
                if (cell != null
                { 
                    var temp = cell.ViewTemplate; 
     
                    var tempRow = cell.RowElement; 
                    var rowinfo = tempRow.RowInfo; 
     
                    foreach (var row in ((MyGrid)gridview1).RowsToDragDrop) 
                    { 
                        //add the dragged rows to the child of the parent  
                        temp.Rows.Add(rowinfo.Cells[0].Value, row.Cells[1].Value); 
                    } 
                } 
            } 
            gridview1.Cursor = Cursors.Arrow; 
            gridview1.Capture = false
            dragging = false
        }   

    It should be working now. If you have further questions, I will be glad to help.

    Best wishes,
    Jack
    the Telerik team

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

  11. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 08 Apr 2009 Link to this post

    Excellent...


    works nice... 

    Thanks a lot Jack.

  12. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 29 Apr 2009 Link to this post

    How can I make it visual the drag drop?
    If I drag row(s) to the other radgrid you don't really see if the dragdrop is happening. Just the cursor that turns into a hand.

    Can I make it visually the drag to the other gridview? that the selected row is half visible hanging to the mousepointer?

    If you understand want I mean :-)

    thanks

  13. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 30 Apr 2009 Link to this post

    Hi Gerbrand,

    You can achieve this by using an outline Form that shows a snapshot of the rows. You should move the form when the mouse changes its coordinates. The TelerikHelper.CreateOutlineForm method can help in this situation. Please check the modified code below:

    Form outlineForm; 
     
    void radGridView1_MouseMove(object sender, MouseEventArgs e) 
        if (e.Button == MouseButtons.Left) 
        { 
            if (!dragging && IsRealDrag(e.Location, downPt)) 
            { 
                RadElement element = this.radGridView1.ElementTree.GetElementAtPoint(e.Location); 
                GridDataCellElement cell = element as GridDataCellElement; 
                if (cell != null && cell.RowElement is GridDataRowElement) 
                { 
                    dragging = true
                    this.radGridView1.Capture = true
                    this.radGridView1.Cursor = Cursors.Hand; 
     
                    Bitmap itemBitmap = GetBitmap(this.radGridView1); 
                    outlineForm = TelerikHelper.CreateOutlineForm(itemBitmap); 
                    outlineForm.MinimumSize = itemBitmap.Size; 
                    outlineForm.Size = itemBitmap.Size; 
                    Point mousePt = Cursor.Position; 
                    outlineForm.Location = new Point(mousePt.X + 5, mousePt.Y + 5); 
                    outlineForm.TopMost = true
                    outlineForm.Show(); 
                } 
            } 
            else if (dragging) 
            { 
                Point mousePt = Control.MousePosition; 
                outlineForm.Location = new Point(mousePt.X + 5, mousePt.Y + 5); 
            } 
        } 
     
    void radGridView1_MouseUp(object sender, MouseEventArgs e) 
        if (dragging) 
        { 
            if (outlineForm != null
            { 
                outlineForm.Close(); 
                outlineForm.Dispose(); 
                outlineForm = null
            } 
     
            Point pt = this.radGridView1.PointToScreen(e.Location); 
            pt = this.PointToClient(pt); 
            if (this.radGridView2.Bounds.Contains(pt)) 
            { 
                foreach (GridViewDataRowInfo row in this.radGridView1.RowsToDragDrop) 
                { 
                    this.radGridView2.Rows.Add(row.Cells[0].Value, row.Cells[1].Value, row.Cells[2].Value); 
                    this.radGridView1.Rows.Remove(row); 
                } 
            } 
            this.radGridView1.Cursor = Cursors.Arrow; 
            this.radGridView1.Capture = false
            dragging = false
        } 

    And here is the GetBitmap method used to create the snapshot:

    private Bitmap GetBitmap(MyGrid grid) 
        Size size = Size.Empty; 
        for (int i = 0; i<grid.RowsToDragDrop.Count; i++) 
        { 
            if (grid.RowsToDragDrop[i].VisualElement != null
            { 
                size.Height += grid.RowsToDragDrop[i].GetActualHeight(grid.GridElement); 
            } 
        }             
        size.Width = grid.GridElement.VisualRows[0].ControlBoundingRectangle.Width; 
     
        Bitmap bitmap = new Bitmap(size.Width, size.Height); 
        using (Graphics g = Graphics.FromImage(bitmap)) 
        {                 
            for (int i = 0, y = 0; i<grid.RowsToDragDrop.Count; i++) 
            { 
                GridRowElement row = grid.RowsToDragDrop[i].VisualElement; 
                if (row != null
                { 
                    using (Bitmap bmp = row.GetAsBitmap(Brushes.White, 0, new SizeF(1, 1))) 
                    { 
                        g.DrawImage(bmp, 0, y); 
                        y += row.ControlBoundingRectangle.Height; 
                    } 
                } 
            } 
        } 
        return bitmap; 

    I hope this helps. If you need further assistance, feel free to write me.

    Regards,
    Jack
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  14. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 30 Apr 2009 Link to this post

    Thanks Jack,

    Just one small thing. Have a look at the screenshot I took.
    The bitmap stays still on that position as long as I am dragging.
    The bitmat isn't at the pointer but at the top of my main form the first time. Second time is goes a little bit lower and so on.

    Hope you have a solution?



  15. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 30 Apr 2009 Link to this post

    Hi Gerbrand,

    Maybe there is a problem with the coordinates. You should use screen coordinates when setting the Location property. It shouldn't be a problem if you use exactly the code from my post. You can also send me your application [in a support ticket] and I will be able to give more concrete suggestions.

    I am looking forward to your reply.

    Greetings,
    Jack
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  16. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 30 Apr 2009 Link to this post

    Argh... I found the problem ... stupid of me..

    I forgot the else part in the mousemove event

    else if (dragging)
                {
                    var mousePt = MousePosition;
                    outlineForm.Location = new Point(mousePt.X + 5, mousePt.Y + 5);
                }

    Now it works nice :-)

    Thanks Jack


  17. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 30 Apr 2009 Link to this post

    I am glad to hear that you have found the issue. If you have any other questions, don't hesitate to write me.

    Sincerely yours,
    Jack
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  18. Saravanan
    Saravanan avatar
    11 posts
    Member since:
    Jul 2009

    Posted 15 Mar 2010 Link to this post

    the event MouseDown,MouseMove Did not get fired what might be wrong with Me?

  19. gerbrand
    gerbrand avatar
    78 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2010 Link to this post

    Can you post some code?

  20. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 17 Mar 2010 Link to this post

    Hello,


    The MouseDown and MouseMove events will not fire when RadGridView is in edit mode - this is by design.
    When RadGridView is in edit mode, the editor will have the focus and it will process all mouse and keyboard events.

    In case you see a different behavior, please open a support ticket and send us your application, so that we can research the issue in detail.

     

    Greetings,
    Jack
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

  21. Mario
    Mario avatar
    8 posts
    Member since:
    Feb 2009

    Posted 08 Nov 2010 Link to this post

    When I try to compile I get this error:

    error CS1061: 'Telerik.WinControls.UI.GridViewDataRowInfo' does not contain a definition for 'VisualElement' and no extension method 'VisualElement' accepting a first argument of type 'Telerik.WinControls.UI.GridViewDataRowInfo' could be found (are you missing a using directive or an assembly reference?)

  22. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 09 Nov 2010 Link to this post

    Hello Mario,

    Sorry, the new virtualization engine is not using VisualElements anymore, this is one of the many changes introduced in Q2 2010, for drag and drop between grids in unbound mode please take a look at the Demos application, you will find an example on how to do this with the new grid there.

    Hope this helps, if you have any other questions or comments, please let me know,

    Best Regards,
    Emanuel Varga

  23. Jack
    Admin
    Jack avatar
    2211 posts
    Member since:
    Dec 2014

    Posted 11 Nov 2010 Link to this post

    Hi Mario,

    You can find more information on why we removed CellElement and VisualElement properties in this blog article. We will be glad to assist you in case you have any other issues when updating to the latest release.

    All the best,
    Jack
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  24. Mario
    Mario avatar
    8 posts
    Member since:
    Feb 2009

    Posted 11 Nov 2010 Link to this post

    Thanks, I will take a look at the new drag'n'drop demo.

Back to Top