This is a migrated thread and some comments may be shown as answers.

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

1 Answer 73 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 29 Jul 2008, 08:55 PM
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?

1 Answer, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 30 Jul 2008, 02:36 PM
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.
Tags
Grid
Asked by
Ian
Top achievements
Rank 1
Answers by
Veli
Telerik team
Share this question
or