CODEWITHSUNDEEP
jqueryjqgriddraggablerows
jagadeesh
jagadeesh

Reputation: 91

Making each row of a jqGrid draggable

I want to make each row of my jqGrid draggable. My goal is when I drag a row from one jqGrid and drop it on other jqGrid row (I want the data on which row the drop event happened), some backend operation needs to be performed.

So far I have tried as below.

JQuery code:

$("#gridtable").jqGrid(
                {
                    datatype : "json",
                    datastr : values,
                    colNames : [ 'Name','Age'],
                    colModel : [ {
                        name : 'name',
                        index : 'name',
                        shrinkToFit: true
                    },
                    {
                        name : 'age',
                        index : 'agee',
                        shrinkToFit: true
                    }],
                    rowNum : 10,
                    rowList : [ 10, 20, 30 ],
                    autowidth : true ,
                    pager : '#gridpager',
                    sortname : 'name',
                    viewrecords : true,
                    sortorder : "desc",
                    caption : "JSON Example"
                });
var rows = $('#gridtable' tbody tr);
rows.each(function(i){
(this).draggable{
//some options here
}

But this code is not working. The rows are not draggable. Please help me with this problem.

Thanks in advance.

Upvotes: 1

Views: 2793

Answers (1)

Runcorn
Runcorn

Reputation: 5224

jqGrid provides a default functionality to achieve drag and drop between two grids using gridDnD. See Document here

Calling convetions: 

jQuery("#list").gridDnD(options);

or using the new API 

jQuery("#list").jqGrid('gridDnD', options);

See detail example here

Now moving into your code and jquery-ui draggable issue. See this Post for better explanation.

And a demo fiddle.

Upvotes: 1

Related Questions