[Solved] Grid Drop And Drop

[Alex]

I've successfully implemented drag and drop functionality in data grid. This included cancelling on the client side based on some business logic. I need to enhance the UI with clue similar to what you have in TreeListDemo here: http://demos.telerik.com/aspnet-ajax/treelist/examples/itemsdragdrop/defaultcs.aspx#
In your example, when an item is about to drop to a location where it's not supposed to be dropped, you're changing the way dragging items look by  getting the dragged container and changing the container. You do it like this in javascript: 

var dropClue = $telerik.findElement(args.get_draggedContainer(), "DropClue");

After you get that object, you replace it with another if needed. How can I achieve the same in the RadGrid? How do I access the dragged items container on the client side and change how what is dragged looks?

[Antonio Stoilkov]

Hi Alex,

You could achieve your scenario by overriding the _positionDropClue and accessing the draggedRowand the draggedItems. Note that the draggedRow is the container which holds the row that have been dragged and you could set styles to it depending on your custom logic. Note that the code should be placed after the ScriptManager or RadScriptManager on the page.

var original = Telerik.Web.UI.RadGrid.prototype._positionDropClue;
Telerik.Web.UI.RadGrid.prototype._positionDropClue = function (e)
{
    original.call(this, e);

    // The dragged row container which you could apply custom style to as in the RadTreeList demo
    var draggedRow = this._draggedRow;
    // The GridDataItem client-side objects of the dragged items
    var draggedItems = this._draggedItems;
}

Greetings,
Antonio Stoilkov
the Telerik team

[Alex]

I need more information on this. The drag&drop logic I'm working on is in the grid with two layers of details tables. Here is my style definition:
        .dropDisabled
        {
            background-image: url('../img/draggingRed.png') !important;
            background-position:left !important;
            background-repeat: no-repeat !important;
            z-index: 99999 !important;
        }
        .dropEnabled
        {
            background-image: url('../img/draggingGreen.png') !important;
            background-position: left !important;
            background-repeat: no-repeat !important;
        }
I'm trying to replace the dragged row style in onRowMouseOver client event handler as so:

function RowMouseOver(sender, eventArgs) {
    var msg;
    if (DraggingStarted) {
        var hoverOverTable = eventArgs.get_tableView();
        if (!hoverOverTable) {
            //hoverOverTable will be null if mouse not over rows (but over header or command bar, etc).
            msg = "Cannot drop " + DraggedItemSourceTable + " not amongst the rows";
        }
        else if (hoverOverTable.get_name() == DraggedItemSourceTable) {
            msg = "Dropping is OK because you dragging from " + DraggedItemSourceTable + " to " + hoverOverTable.get_name();
            if (sender._draggedRow) {
                sender._draggedRow.className = "RadGrid RadGrid_Vista GridDraggedRows GridDraggedRows_Vista dropEnabled";
            }
        }
        else {
            msg = "Don't drop because " + DraggedItemSourceTable + " cannot be dropped to " + hoverOverTable.get_name();
            if (sender._draggedRow) {
                sender._draggedRow.className = "RadGrid RadGrid_Vista GridDraggedRows GridDraggedRows_Vista dropDisabled";
            }
        }
    }
    else {
        msg = "";
    }
    $('#BodyPlaceHolder_DragginHelperLabel').text(msg);
}

The problem is the image-clue is getting overlaid by whatever is on top layer. I can see the style is getting applied on the detail table levels, because the the overlaying square is narrower then the width of the dragged square. Please refer to the attached illustration and the source files.
1) Need to bring the clue image on top (z-order didn't do anything). 
2) Not essential, but it would be nice to make the width of the blue labels the same as the width of the dragged rectangle. 
3) Since there's no onGridMouseLeave event and no onDragging event, OnRowMouse over is not an ideal place to set the dragging clue, because when a mouse is not over rows i still want to show a clue (as you shouldn't drop the item outside of the grid). Would you suggest how to address that?

[Alex]

I've figured how to do it for all but the #3. 
What I was missing is left padding in the .dropDisabled and .dropEnabled css classes. 

[Antonio Stoilkov]

Hello Alex,

You could achieve your scenario by subscribing manually to the RadGrid element mouseover and mouseout events in the OnGridCreated client-side event as shown below. In the GridMouseOut event you could set the dropDisabled class.

<ClientEvents OnGridCreated="GridCreated" />

function GridCreated(sender, args)
{
    $addHandler(sender.get_element(), "mouseover", GridMouseOver);
    $addHandler(sender.get_element(), "mouseout", GridMouseOut);
}

function GridMouseOver(e)
{
    // The mouse is over the grid element
}

function GridMouseOut(e)
{
    // The mouse is not over the grid element
}

All the best,
Antonio Stoilkov
the Telerik team