thanushka on JQGrid Draggable event drops after sorting or Pagination

Thu, 13 Mar 2014 15:31:14 +0200

I an new to JQGrid, and I have implemented the the grid to drag a row and drop to another control. The issue is if I click a column name for sorting or change the no of rows to display, the draggable event will get dropped. Any idea on how to rebind them since some events are fired before the sorting happens. Following is the grid implimentation.


 $("#grid").jqGrid({
        url: '@Url.Action("OnOrderItemLoad","ResourcePlan")',
        datatype: "json",
        colNames: ['Select', 'OrderItemId', 'Overseas Office', 'Gender Category', 
'Product Name', 'Design', 'Product Type', 'Country Of Origin', 'Factory Name', 'FCA Date', 
'Inspection Date', 'Order No', 'Line Item Qty', 'Gcc Approval', 'Green Seal', 'Black Seal',
 'Ship Mode'],
        colModel: [
            { name: 'Select', index: 'MyCol', editable:true, edittype:'checkbox', 
editoptions: { value:"True:False"}, formatter: "checkbox", 
formatoptions: {disabled : false}},
             { name: 'OrderItemId', index: 'OrderItemId' ,hidden:true},
            { name: 'OverseasOffice', index: 'OverseasOffice'},
            { name: 'GenderCategory', index: 'GenderCategory' },
            { name: 'ProductName', index: 'ProductName' },
            { name: 'Design', index: 'Design' },
            { name: 'ProductType', index: 'ProductType' },
            { name: 'CountryOfOrigin', index: 'CountryOfOrigin' },
            { name: 'FactoryName', index: 'FactoryName' },
            { name: 'FCADate', index: 'FCADate' },
            { name: 'InspectionDate', index: 'InspectionDate' },
            { name: 'OrderNo', index: 'OrderNo' },
            { name: 'LineItemQty', index: 'LineItemQty' },
            { name: 'GccApproval', index: 'GccApproval' },
            { name: 'GreenSeal', index: 'GreenSeal' },
            { name: 'BlackSeal', index: 'BlackSeal' },
            { name: 'ShipMode', index: 'ShipMode' }
        ],
        // height: 250,
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager2',
        viewrecords: true,
        sortorder: "desc",
        loadonce:true,
        onSortCol: makeGridRowsDraggable(grid)

    });


  jQuery("#grid").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

    $("#grid").jqGrid({ gridComplete: makeGridRowsDraggable($("#" + this.id)) });

Following is the implimentation of Draggable event


function makeGridRowsDraggable(grid) {
        setTimeout(function () {
            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:80,
                left: -5
                },
                helper: function (event) {
                    //get a hold of the row id
                    var rowId = $(this).attr('id');

                    var rowData = jQuery("#grid").getRowData(rowId);
                    Id = "<table><tr><td class='seprt'>Overseas Office : " 
+ rowData['OverseasOffice'] + "</td><td class='seprt'>Product Name: " 
+ rowData['ProductName'] + "</td><td class='seprt'>Factory Name: " + rowData['FactoryName'] + "</td></tr></table>";

                    //Create Event Object
                    var eventObject = {
                        id: rowData['OrderItemId']
                        , title: 'PO# '+rowData['OrderNo']
                    };
                    var OrderItemId = rowData['OrderItemId'];
                    $(this).data('eventObject', eventObject);
                    var dialog =  $('<div 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);
                }
            });
        }, 3000);
    }

jQuery Grid Plugin - jqGrid - Topic: JQGrid Draggable event drops after sorting or Pagination

thanushka on JQGrid Draggable event drops after sorting or Pagination