jQGrid Drag and Drop onto a DIV

Question

I have my jQGrid dragging and dropping onto another jQGrid, but is there a way to drop a row onto a DIV and append() the ID of the row into the DIV?

Naji

Answer 1

I have created a working jsfiddle - check this. http://jsfiddle.net/NishitDhakar/skJa5/

var data = [[48803, "DSK1", "02200220", "OPEN"], [48769, "APPR", "77733337", "ENTERED"], [48813, "DSK1", "02200220", "OPEN"], [58769, "APPR", "77733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Portfolio Details', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'Portfolio',
        index: 'Portfolio',
        width: 90,
        sorttype: "date"},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Drag Drop Example",
});

var names = ["id", "Portfolio",  "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});
$("#grid").jqGrid('setGridParam', {gridComplete: makeGridRowsDraggable($("#" + this.id))});




function makeGridRowsDraggable(grid) {
    createDroppableElements();
    $("#grid").val(new Date().getTime());
    var $searchResultsGrid = grid;
    var searchResultsRows = $("#grid .ui-row-ltr");

    searchResultsRows.draggable({ appendTo: "body" }); searchResultsRows.draggable({
        create: function (event, ui) { }
    });

    searchResultsRows.css("cursor", "move").draggable("option", "helper", "clone").draggable({
        revert: "true",
        appendTo: 'body',
        cursor: "move",
        snap: "true",
        cursorAt: {
            top: 10,
            left: -5
        },
        helper: function (event) {
            //get a hold of the row id
            var rowId = $(this).attr('id');

            //my code
            var rowData = jQuery("#grid").getRowData(rowId);
            Id = "Portfolio ID : " + parseInt(rowData['id']);
            //set the data on this to the value to grab when you drop into input box
            $(this).data('colValue', Id);
            var dialog = ($('#DragableWidget').length > 0) ? $('#DragableWidget') :
                         $('<div id="DragableWidget" class="draggedValue ui-widget-header ui-corner-all"></div>').appendTo('body');
            dialog.html(Id);
  return dialog;
        }
        , start: function (event, ui) {
            //fade the grid
            $(this).parent().fadeTo('fast', 0.5);
        }
        , stop: function (event, ui) {
            $(this).parent().fadeTo(0, 1);
        }
    });
}

function createDroppableElements() {
    $("#txtinputFieldOne, #txtinputFieldTwo").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');
            updateTextValue($(this), theValue);
        }
    });
}

function updateTextValue(txtTarget, theValue) {
    txtTarget.val(theValue);
}

Armament

Dhakad- you deserve a medal for doing this. Great work. – Romeliaromelle

If we apply paging, then in the first page it worked. Not in other pages.Please suggest.. Thanks, Sandeep – Spelaean