<link rel="stylesheet" type="text/css" media="screen" href="#WORKSPACE_IMAGES#ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="#WORKSPACE_IMAGES#jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="#WORKSPACE_IMAGES#ui.multiselect.css" />

<style>
.ui-icon { width: 16px; height: 16px; background-image: url(#WORKSPACE_IMAGES#ui-icons_469bdd_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(#WORKSPACE_IMAGES#ui-icons_469bdd_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(#WORKSPACE_IMAGES#ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(#WORKSPACE_IMAGES#ui-icons_6da8d5_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(#WORKSPACE_IMAGES#ui-icons_217bc0_256x240.png); }
.ui-state-active .ui-icon {background-image: url(#WORKSPACE_IMAGES#ui-icons_f9bd01_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(#WORKSPACE_IMAGES#ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(#WORKSPACE_IMAGES#ui-icons_cd0a0a_256x240.png); }
</style>

<script src="#WORKSPACE_IMAGES#jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="#WORKSPACE_IMAGES#jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="#WORKSPACE_IMAGES#grid.locale-ru.js" type="text/javascript"></script>
<script src="#WORKSPACE_IMAGES#ui.multiselect.js" type="text/javascript"></script>
<script src="#WORKSPACE_IMAGES#jquery.jqGrid.js" type="text/javascript"></script>
<script src="#WORKSPACE_IMAGES#jquery.tablednd.js" type="text/javascript"></script>
<script src="#WORKSPACE_IMAGES#jquery.contextmenu.js" type="text/javascript"></script>



<script type="text/javascript">
function start()
{
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'}
];

jQuery("#grid1").jqGrid({datastr:mydata1,
                              datatype: "jsonstring",
    height: 100,
    colNames: ['Id1', 'Name1', 'Values1'],
    colModel: [{
        name: 'id1',
        index: 'id1',
        width: 100
        }, {
        name: 'name1',
        index: 'name1',
        width: 100
        }, {
        name: 'values1',
        index: 'values1',
        width: 200
    }],
    caption: 'Grid 1',
    pager: '#pgrid1'
});
jQuery("#grid1").jqGrid('sortableRows');

jQuery("#grid2").jqGrid({datastr:mydata2,
                              datatype: "jsonstring",
    height: 100,
loadonce: true,
    colNames: ['Id2', 'Name2', 'Values2'],
    colModel: [{
        name: 'id2',
        index: 'id2',
        width: 100
        }, {
        name: 'name2',
        index: 'name2',
        width: 100
        }, {
        name: 'values2',
        index: 'values2',
        width: 200
    }],
    caption: 'Grid 2',
    pager: '#pgrid2'
});
jQuery("#grid3").jqGrid({datastr:mydata3,
                              datatype: "jsonstring",
    height: 'auto',
loadonce: true,
    colNames: ['Id3', 'Name3', 'Values3'],
    colModel: [{
        name: 'id3',
        index: 'id3',
        width: 100
        }, {
        name: 'name3',
        index: 'name3',
        width: 100
        }, {
        name: 'values3',
        index: 'values3',
        width: 200
    }],
    caption: 'Grid 3',
    pager: '#pgrid3'
});

jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});
jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'});


}
</script>

<script src="#WORKSPACE_IMAGES#jquery-ui-1.10.3.custom.js" type="text/javascript"></script>