Last, but not least we develop a row drag and drop method, which allow exchanging information between
grids in visual maner.
This feature uses the jQuery UI draggable and droppable widgets
In this exmple try to drag rows between the grids following the allowed directions
Java Scrpt code
<![CDATA[
jQuery("#grid1").jqGrid({
datatype: "local",
height: 100,
colNames: ['Id1', 'Name1', 'Values1'],
colModel: [{
name: 'id1',
index: 'id',
width: 100
}, {
name: 'name1',
index: 'name',
width: 100
}, {
name: 'values1',
index: 'values',
width: 200
}],
caption: 'Grid 1',
pager: '#pgrid1'
});
jQuery("#grid2").jqGrid({
datatype: "local",
height: 100,
colNames: ['Id2', 'Name2', 'Values2'],
colModel: [{
name: 'id2',
index: 'id',
width: 100
}, {
name: 'name2',
index: 'name',
width: 100
}, {
name: 'values2',
index: 'values',
width: 200
}],
caption: 'Grid 2',
pager: '#pgrid2'
});
jQuery("#grid3").jqGrid({
datatype: "local",
height: 'auto',
colNames: ['Id3', 'Name3', 'Values3'],
colModel: [{
name: 'id3',
index: 'id',
width: 100
}, {
name: 'name3',
index: 'name',
width: 100
}, {
name: 'values3',
index: 'values',
width: 200
}],
caption: 'Grid 3',
pager: '#pgrid3'
});
var mydata1 = [
{id1:"1",name1:"test1",values1:'One'},
{id1:"2",name1:"test2",values1:'Two'},
{id1:"3",name1:"test3",values1:'Three'}
];
var mydata2 = [
{id2:"11",name2:"test11",values2:'One1'},
{id2:"21",name2:"test21",values2:'Two1'},
{id2:"31",name2:"test31",values2:'Three1'}
];
var mydata3 = [
{id3:"12",name3:"test12",values3:'One2'},
{id3:"22",name3:"test22",values3:'Two2'},
{id3:"32",name3:"test32",values3:'Three2'}
];
for (var i = 0; i <= mydata1.length; i++) {
jQuery("#grid1").jqGrid('addRowData',i + 1, mydata1[i]);
jQuery("#grid2").jqGrid('addRowData',i + 1, mydata2[i]);
jQuery("#grid3").jqGrid('addRowData',i + 1, mydata3[i]);
}
jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});
jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'});
]]>