Drag row from one radgrid to another?

[gerbrand]

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

[Jack]

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.

[gerbrand]

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

[Jack]

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.

[gerbrand]

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

[Jack]

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.

[gerbrand]

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 

[Jack]

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.

[gerbrand]

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

[Jack]

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.

[gerbrand]

Excellent...

works nice... 

Thanks a lot Jack.

[gerbrand]

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

[Jack]

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.

[gerbrand]

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?

[Jack]

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.

[gerbrand]

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

[Jack]

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.

[Saravanan]

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

[gerbrand]

Can you post some code?

[Jack]

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.

[Mario]

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?)

[Emanuel Varga]

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

[Jack]

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

[Mario]

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