how to get target grid cell with drag and drop

2 posts, 0 answers
  1. Myo
    Myo avatar
    24 posts
    Member since:
    Nov 2013

    Posted 08 Apr Link to this post

    Hi ,

    how can i get target grid cell index or row key when i drag and drop my cell with same grid. I have attached screen shot and sample code below. Any help will be appreciated.

     var dragging = false;
                var dragContainer = null;
                var currentDraggedElement = null;

                function onColumnCreated(sender, args) {
                    // hook to columns mousedown event;
                    $addHandler(sender.get_element(), "mousedown", onMouseDown);
                }

                function onGridCreated() {
                    // hook to columns document's events
                    $addHandler(document, "mouseup", onMouseUp);
                    $addHandler(document, "mousemove", onMouseMove);
                }

                function onMouseMove(e) {
                    if (dragging && dragContainer) // if in drag mode move the dragged container
                    {
                        dragContainer.style.display = "";
                        dragContainer.style.position = "absolute";
                        Telerik.Web.UI.Grid.PositionDragElement(dragContainer, e);
                    }
                }

                function onMouseDown(e) {
                    //create the dragged container
                    dragging = true;
                    dragContainer = document.createElement("div");
                    dragContainer.style.position = "absolute";
                    dragContainer.style.zIndex = 99999;
                    dragContainer.style.display = "none";
                    document.body.insertBefore(dragContainer, document.body.firstChild);

                    var currentElement = Telerik.Web.UI.Grid.GetCurrentElement(e);

                    //get parent row element then get the OnwerTableView in order to get objects for the column            
                    var row = Telerik.Web.UI.Grid.GetFirstParentByTagName(currentElement, "tr");
                    if (row.id == "")
                        return;

                    var item = $find('<%=grdAvailability.ClientID%>').get_masterTableView()._getRowByIndexOrItemIndexHierarchical(row)

                    var ownerTableViewId = item.id.split("__")[0];
                    var ownerTableView = $find(ownerTableViewId);

                    if (!ownerTableView)
                        return;

                    currentDraggedElement = currentElement;//store the current cell as we will need it inside the mouseup event                    
                    dragContainer.innerHTML = currentElement.innerHTML;
                    Telerik.Web.UI.Grid.ClearDocumentEvents();
                }

                function onMouseUp(e) {
                    if (dragging) {
                        // get the element that you are dropping on 
                        var currentElement = Telerik.Web.UI.Grid.GetCurrentElement(e);
                        if (dragContainer !== null && dragContainer.innerHTML !==null) {
                            currentElement.value = dragContainer.innerHTML;
                            currentDraggedElement.isDragged = true;
                            PageMethods.GetReservationKeyWithDocNo(dragContainer.innerHTML,
                                                           function (result) {
                                                               if (result !== null) {
                                                                   url = '../Reservation/Update/NewMoveReservation.aspx?RK=' + result;
                                                                   ShowRadWindow('Move Folio', url, 650, 530)
                                                               }
                                                           }, function (e) {
                                                               alert(e.get_message);
                                                               $telerik.$.unblockUI();
                                                           });
                        }
                       
                       
                        Telerik.Web.UI.Grid.RestoreDocumentEvents();
                        document.body.removeChild(dragContainer);
                        dragContainer = null;
                        currentDraggedElement = null;
                    }
                    dragging = false;
                }
                function onGridDestroying() {
                    $removeHandler(document, "mouseup", onMouseUp);
                    $removeHandler(document, "mousemove", onMouseMove);
                }

  2. Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 13 Apr Link to this post

    Hi Myo,

    You can use the client-side drag events provided by RadGrid to get this information:
    http://www.telerik.com/forums/drag-and-drop-from-radgrid-to-radtreeview#VZKc3Xmg-kSjX7n9ea6o1A

    Hope this helps.

    Regards,
    Eyup
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top