jqgrid draggable not working after paging

Question

I am using draggable jqgrid.But the issue is the rows are draggable only in the first page.After I change the pagination, the draggable for rows is not working.Can you please help me. Below is my code for making jqgrid rows draggable.

function GetAllCompanyProducts(productData) {
/// <summary>method to load the Proposal grid</summary>
//Load the grid
var tabelWidth = $("#tblCompanyProducts").width();

jQuery("#tblCompanyProducts").jqGrid({
    datatype: 'local',
    data: productData,
    jsonReader: { repeatitems: false },
    loadui: "block",
    autowidth: true,
    mtype: 'get',
    rowNum: 30,
    rowList: [30, 100, 200],
    viewrecords: true,
    colNames: ['ProductId', 'ProductName', 'Price'],
    colModel: [
        { name: 'ProductId', index: 'ProductId', width: '30%' },
        { name: 'ProductName', index: 'ProductName', width: '30%' },
        { name: 'Price', index: 'Price', width: '30%' }
    ],
    sortname: 'ProductId',
    sortorder: 'asc',
    caption: "Product List",
    width: tabelWidth - 10,
    pager: '#divPager',
    height: "100%",
    hoverrows: true,
    onPaging: function () {
        $("#tblCompanyProducts").trigger('reloadGrid');
    },

});    


$("#tblCompanyProducts").jqGrid('setGridParam', { gridComplete: MakeGridRowsDraggable($("#" + this.id)) });

}

And below is the method

function MakeGridRowsDraggable(grid) {
/// <summary></summary>
/// <param name="grid" type=""></param>

//$("#tblCompanyProducts").val(new Date().getTime());
var searchResultsRows = $("#tblCompanyProducts .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');

        var rowData = $("#tblCompanyProducts").getRowData(rowId);
        var  id = parseInt(rowData['ProductId']) + "-" + rowData['ProductName'] + "-" + rowData['Price'];
        //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) {
    }
    , stop: function (event, ui) {
        $(this).parent().fadeTo(0, 1);
    }
});

}

there is a sortable rows functionality in jqGrid by default. — Frebin Francis, Mar 06 '15 at 08:07
Hi Frebin, Thanks for the suggestion. But The requirement is to drag grid rows on to another div. Is this possible by sortable function? — sandeep.mishra, Mar 06 '15 at 08:47
Can you please give me an example how to use this..Thanks.. :) — sandeep.mishra, Mar 06 '15 at 09:06
is this what you want ? http://www.trirand.com/blog/jqgrid/jqgrid.html take New in version 3.6 menu from left menu and choose Drag and Drop Rows — Frebin Francis, Mar 06 '15 at 09:07
Yes very much similar. But I need the column values while dragging rows from one grid. The example is not showing this..Please suggest..Thanks — sandeep.mishra, Mar 06 '15 at 09:17
The grid taking a json object as paramter. like below function GetAllCompanyProducts(productData) { ///
method to load the Proposal grid
//Load the grid var tabelWidth = $("#tblCompanyProducts").width(); jQuery("#tblCompanyProducts").jqGrid({ datatype: 'local', data: productData, — sandeep.mishra, Mar 06 '15 at 09:23
please wait. i am creating a JSfiddle so it will be easy for you. — Frebin Francis, Mar 06 '15 at 09:32
Frebin. I really Appreciate for the help and thank you very much. Yes is very similar I needed but the row is now moved from the jqgrid. Instead I need a clone of the row to the div. And How I will format the dragged rows showing in the div. Currently is very messy..You see what I mean..? — sandeep.mishra, Mar 06 '15 at 10:04
what you mean by "How I will format the dragged rows showing in the div" — Frebin Francis, Mar 06 '15 at 10:06
row removing problem now solved http://jsfiddle.net/9kLqqtfL/4/ — Frebin Francis, Mar 06 '15 at 10:10
Means, the row which I am dragging should have a background color, some padding between columns .Font size should be bigger for some column... etc. And when dragging the row from grid to above the div ,the row draaged not showing up — sandeep.mishra, Mar 06 '15 at 10:10
Actually I want the draggable row to be formatted as a div and can be placed in another droppable div. — sandeep.mishra, Mar 06 '15 at 12:44

score 2 · Accepted Answer · answered Mar 08 '15 at 14:53

I fixed the issue by calling the method on loadcomplete with timeout. below is the code

  loadComplete: function () {
            setTimeout(function () {
                MakeGridRowsDraggable($("#" + this.id));
            }, 2000);

It worked well for me.:)

jqgrid draggable not working after paging

1 Answers1