jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

JQGrid Draggable event drops after sorting or Pagination

Tags: jqgrid drag Sorting pager

13/03/2014
15:31

thanushka

New Member

Members

Forum Posts: 1

Member Since:
13/03/2014

Offline

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

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
43 Guest(s)

Currently Browsing this Page:
1 Guest(s)