Is there a way to drag a row from a JQGrid to a drop-down text box using the gridDnD plugin?

Question

I would like to drag a row from JQGrid to the input text box and add the column text from the dropped row to the end of the input text.

Obviously, this is far from the answer, but dragging a line from the grid with this setting onto it (where it #inputTextFieldis the “droppable” text box) results in a JavaScript error this.p is undefined:

$("#searchResultsGrid").jqGrid('gridDnD',
    {
         connectWith:   '#inputTextField"
    }
);

This is because the destination is obviously not a JQGrid and does not this.p. I tried a few different things ... maybe there is a way that I can "trick" the drop event into working? Thank you so much for any help :)

Answer 1

! -, ( gridComplete grid):

function makeGridRowsDraggable() {

        var $searchResultsGrid  =   $("#searchResultsGrid"),
            $searchResultsRows =    $("#searchResultsContainer .ui-row-ltr");

        $searchResultsRows.css("cursor","move").draggable("destroy").draggable({
            revert:     "false",
            appendTo:   'body',
            cursor:     "move",
            cursorAt:   {
                            top: 10,
                            left: -5
                        },
            helper:     function(event) {

                            //get a hold of the row id
                            var rowId = $(this).attr('id');

                            //use the row id you found to get the column text; by using the getCell method as below, 
                            //the 'unformatter' on that column is called; so, if value was formatted using a
                            //formatter, this method will return the unformatted value 
                            //(as long as you defined an unformatter/using a built-in formatter)
                            var theValue = $searchResultsGrid.jqGrid('getCell', rowId, 'desiredValue');

                            //set the data on this to the value to grab when you drop into input box
                            $(this).data('colValue', theValue);

                            return $("<div class='draggedValue ui-widget-header ui-corner-all'>" + theValue+ "</div>");
                        },
            start:      function(event, ui) {
                            //fade the grid
                            $(this).parent().fadeTo('fast', 0.5);
                        },
            stop:       function(event, ui) {
                            $(this).parent().fadeTo(0, 1);
                        }
        });
    }

:

function createDroppableElements() {

    $("#inputFieldOne, #inputFieldTwo").droppable({
        tolerance:  'pointer',
        hoverClass: 'active',
        activate:   function(event, ui) {
                        $(this).addClass("over");
                    },
        deactivate: function(event, ui) {
                        $(this).removeClass("over");
                    },

        drop:       function(event, ui) {
                        var theValue = ui.draggable.data('colValue');
                        theValue = theValue .replace(/<br>/gi,'; ');
                        console.log("dropped value: " + theValue );  

                        updateText($(this), theValue);
                    }
    });
}

( ';'):

function updateText(txtTarget, theValue) {

    var currentValue = txtTarget.val().trim();

    if (currentValue.length > 0 
        && currentValue.substr(currentValue.length-1) !== ";") 
        currentValue = currentValue + '; ';

    currentValue += theValue;


    txtTarget.val(currentValue);
}