<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Grid DnD on Touch Devices</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../../dojo/resources/dojo.css";
|
@import "../../../dojo/resources/dnd.css";
|
@import "../../css/dgrid.css";
|
/* need a theme for some dnd styles (e.g. before/after indicators).
|
Using tundra because claro has a silly dojoDndItemBefore/After bug
|
*/
|
@import "../../../dijit/themes/tundra/tundra.css";
|
@import "../../css/skins/tundra.css";
|
|
.clear { clear: both; }
|
|
.dojoDndItem { padding: 0; } /* override dijit.css */
|
|
.gridcontainer {
|
float: left;
|
width: 40%;
|
padding: 0 5%;
|
}
|
|
.dgrid {
|
height: 400px;
|
}
|
|
/* styles for handles in 2nd grid */
|
.handleColumn {
|
width: 3em;
|
}
|
.dgrid-content .handleColumn {
|
background-color: #eee;
|
border: 1px dotted #999;
|
}
|
</style>
|
<script src="../../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require(["dgrid/OnDemandGrid", "dgrid/extensions/DnD",
|
"dojo/_base/declare", "dojo/_base/lang",
|
"dgrid/test/data/createOrderedStore", "dgrid/test/data/orderedData",
|
"dojo/domReady!"],
|
function(Grid, DnD, declare, lang, createOrderedStore, orderedData){
|
var DnDGrid = declare([Grid, DnD]);
|
|
// Create a custom data array based on testOrderedData, but looping
|
// several times to create enough items to reasonably test node removal.
|
var data = [];
|
|
for(var i = 0, len = orderedData.items.length; i < 5; i++){
|
for(var j = 0, obj; j < len; j++){
|
obj = lang.clone(orderedData.items[j]);
|
obj.order = obj.id = i * len + j + 2;
|
data.push(obj);
|
}
|
}
|
|
function getCommonProperties(){
|
return {
|
bufferRows: 5,
|
farOffRemoval: 400,
|
collection: createOrderedStore({
|
data: data
|
}),
|
getObjectDndType: function(item){
|
return [item.type ? item.type : this.dndSourceType];
|
}
|
};
|
}
|
|
var gridWithHandles = window.gridWithHandles = new DnDGrid(lang.mixin(getCommonProperties(), {
|
columns: [
|
{
|
label: "Drag",
|
className: "handleColumn",
|
renderCell: function(object, data, cell){
|
cell.className += " dojoDndHandle";
|
},
|
sortable: false
|
},
|
{ label: "Name", field: "name", sortable: false }
|
],
|
dndSourceType: "gridWithHandles-row",
|
dndParams: {
|
withHandles: true
|
}
|
}), "gridWithHandles");
|
});
|
</script>
|
</head>
|
<body class="tundra">
|
<div class="gridcontainer">
|
<h2>Grid with handles (and touch scroll elsewhere)</h2>
|
<div id="gridWithHandles"></div>
|
</div>
|
</body>
|
</html>
|
