Restricting how much of a row is "grabbable" for drag and drop

[Ian]

In my grid, in each row, I have a picture of arrows. I want the viewer to be able to grab the picture of arrows (but nowhere else in the row) to be able to drag and drop that row.

Is this possible?

[Veli]

Hello Ian,

The required functionality is achievable using a GridTemplateColumn and javascript:

Create a GridTemplateColumn and place a <div> element inside the <ItemTemplate>. Please note that you cannot use regular <img> or <input> types (images and image buttons) for this purpose, as RadGrid automatically blocks the bubbling of client events of these elements. Therefore, the only option you have is to use a <div> element with set width and height as that of the image you want to use, and setting a background-image property with the image url:

<ItemTemplate>
    <div id='dragImage' onclick='return ImageClick(this, event)'
        style='cursor:pointer;background-image:url(move.bmp); width:13px; height:13px;'>
    </div>
</ItemTemplate>

As you can see, we set some additional properties in the style attribute, making the mouse cursor change to a hand and setting width and height to that of the background-image (13px).

The rest of the requirement is a couple of javascript events. First, we attach to the client OnGridCreated and OnRowDragStarted events of RadGrid:

<ClientSettings AllowRowsDragDrop="true">
    <Selecting AllowRowSelect="true" />
    <ClientEvents
    OnGridCreated="GridCreated"
    OnRowDragStarted="RowDragStarted" />
</ClientSettings>

The first is used to get the client RadGrid object and make it available document-wise, and the second to cancel the drag event if it is not initiated by pressing on the <div> element we created in the template column:

var grid;

function GridCreated(sender, args)

{

grid = sender;

}

function ImageClick(sender, args)

{

var index = sender.parentNode.parentNode.rowIndex - 1;

grid.get_masterTableView().get_dataItems()[index].set_selected(true);

return false;

}

function RowDragStarted(sender, args)

{

if(args._domEvent.target.tagName != "DIV")

{

args.set_cancel(true);

}

}

The ImageClick method we have specified above is attached to the client "onclick" event of the <div> element accomodating our drag image. The method ensures that the parent GridDataItem gets selected when we click the image.

Kind regards,
Veli
the Telerik team

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