jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
100 lines (92 loc) • 4.87 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element Drag and Drop</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of one way drag and drop in between two Custom Element Grids." />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script type="text/javascript" src="../sampledata/generatedata.js"></script>
<script type="text/javascript">
var source =
{
localdata: generatedata(100),
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' }
],
datatype: 'array'
};
var dataAdapter = new jqx.dataAdapter(source);
window.onload = function() {
var myMainGrid = document.createElement('jqx-grid');
var mySecondGrid = document.createElement('jqx-grid');
myMainGrid.settings =
{
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
rendered: (type) => {
var gridCells = myMainGrid.querySelectorAll('.jqx-grid-cell');
for (var i = 0; i < gridCells.length; i++) {
var dragDrop = document.createElement('jqx-drag-drop');
}
},
selectionmode: 'singlecell',
columns: [
{ text: 'First Name', dataField: 'firstname', width: 300 },
{ text: 'Last Name', dataField: 'lastname', width: 300 },
{ text: 'Product', dataField: 'productname' }
]
};
mySecondGrid.settings =
{
width: 850,
selectionmode: 'singlecell',
autoheight: true,
source: {
totalrecords: 10, unboundmode: true,
datafields:
[
{ name: 'firstname' },
{ name: 'lastname' },
{ name: 'productname' }
]
},
columns: [
{ text: 'First Name', dataField: 'firstname', width: 300 },
{ text: 'Last Name', dataField: 'lastname', width: 300 },
{ text: 'Product', dataField: 'productname' }
]
};
document.body.appendChild(myMainGrid);
document.body.appendChild(mySecondGrid);
};
</script>
</head>
<body>
<div class="example-description">
This is an example of one way drag and drop in between two Custom element Grids. In this example you can drag an item from the first grid and drop it in the second grid. The drag and drop functionality can be configured also to be two way.
</div>
</body>
</html>