Telerik RadGrid Drag Drop Image

[Daniel]

Hi,

When dragging selected rows from a radgrid, obviously you can see the rows being dragged about - I'd like to change this behaviour for an image to appear 'docked' to the mouse and that be dragged about instead.

Can anyone point me in the right direction please?

Thanks a lot,

Dan

[Mira]

Hello Daniel,

In order to achieve the desired look, you can access the dragged row and then modify it in the following way:


Copy Code

function rowDragging(sender, eventArgs) {
    var row = sender._draggedRow;
    //...
}


function GridCreated(sender, eventArgs) {
    sender.add_rowDragging(rowDragging);
}

I hope this helps.

Regards,
Mira
the Telerik team

[Daniel]

I don't really need to access the rows though, I need to change the image that is being dragged. Even if I were to save all of the ids of the rows, store them, and then remove all dragged rows so there was no image how would I then change the image being dragged from the grid?

Thanks a lot,

Dan

[Mira]

Hello Daniel,

The following code demonstrated how to show an image when dragging:

Copy Code

function rowDragging(sender, eventArgs) {
    var row = sender._draggedRow;
    row.innerHTML = "<img src='imageURL' />";
}

Please give it a try and let me know whether this is the desired look.

Best wishes,
Mira
the Telerik team

[Daniel]

Hi,

Thanks again for your reply. I'm gettin the following error:

"Microsoft JScript runtime error: Object doesn't support property or method 'add_rowDragging'"

Caused by the following line:

sender.add_rowDragging(rowDragging);

[Daniel]

Is it possible to achieve this server side maybe? To add the rowDragging event handler in c#?

[Mira]

Hello Daniel,

You can register the script for handling the GridCreated event and attaching the rowDragging handler as it is described here.

I hope this helps.

Best wishes,
Mira
the Telerik team

[Daniel]

Mira how can I achieve this? I don't understand what you mean.

I have an 'OnGridCreated' function (client-side) wired up to the 'OnGridCreated' client event on the grid.

That is all I have so far.

[Mira]

Hello Daniel,

Then, you can handle it in the following way in order to attach the rowDragging handler:

function GridCreated(sender, eventArgs) {
    sender.add_rowDragging(rowDragging);
}

To change the image, please use this code:

function rowDragging(sender, eventArgs) {
    var row = sender._draggedRow;
    row.innerHTML = "<img src='imageURL' />";
}

I hope this helps.

Best wishes,
Mira
the Telerik team

[Daniel]

 I'm gettin the following error:

"Microsoft JScript runtime error: Object doesn't support property or method 'add_rowDragging'"

Caused by the following line:

sender.add_rowDragging(rowDragging);

[Mira]

Hello Daniel,

I have followed your scenario and prepared a sample project for you demonstrating how the desired functionality can be implemented. You can find it attached to this message.

I hope it helps.

Kind regards,
Mira
the Telerik team