¿Hay alguna forma de arrastrar una fila desde un JQGrid a un campo de texto desplegable usando el plugin gridDnD?

Question

Me gustaría arrastrar una fila de un JQGrid a un campo de entrada de texto y agregar el texto de una columna de la fila que se cayó al final del texto en la entrada.

Obviamente, esto es un largo camino de la respuesta, pero arrastrando una fila de una cuadrícula con esta configuración en ella (donde #inputTextField es un campo de texto 'lanzables') da como resultado el error de JavaScript this.p is undefined:

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

Esto se debe a que el destino obviamente no es un JQGrid y no tiene definido this.p. He intentado algunas cosas diferentes ... ¿tal vez hay una manera en que puedo 'engañar' el evento final para que funcione? Muchas gracias por cualquier ayuda :)

Answer 1

¡Lo descubrí! En primer lugar, hacer que las filas de la rejilla se puede arrastrar (esta función debe ser llamada en su gridComplete controlador de eventos rejilla):

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); 
         } 
     }); 
    } 

A continuación, cree elementos lanzables:

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); 
        } 
    }); 
} 

Crear un método de ayuda para añadir un texto a otro campo (se agrega un seguimiento ';'):

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); 
}