dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
294 lines • 10.5 kB
HTML
<html dir="ltr">
<head>
<title>Test Dnd plugin of dojox.grid.EnhancedGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel=stylesheet href="support/common.css"/>
<style type="text/css">
@import "/dojo/tests/dnd/dndDefault.css";
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0.5em;
}
.title {
text-align:center;
margin:1em;
}
.container {
display: block;
border: 3px solid #ccc;
padding: 1em 3em;
cursor: default;
radius: 8pt;
background: #fff;
-moz-border-radius: 8pt 8pt;
}
.myblock{
float: left;
margin: 10px;
margin-top: 0;
}
.cfgtable th,
.cfgtable td{
font-weight: bolder;
padding: 5px;
}
h3{
margin: 0;
}
#grid1, #grid2{
margin-bottom: 0px;
width: 50em;
height: 30em;
}
/*Sample - overwrite default cell style
.claro .dojoxGridCell{
border-color: transparent #D5CDB5 #D5CDB5 transparent !important;
}
.dj_ie6 .claro .dojoxGridCell{
border: 1px solid #F1F1F1 !important;
}*/
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.data.AtomReadStore");
dojo.require("dojox.data.XmlStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Selector");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.DnD");
dojo.require("dojox.grid.enhanced.plugins.GridSource");
dojo.require("dojo.dnd.Source");
dojo.require("dijit.form.CheckBox");
</script>
<script type="text/javascript" src="support/test_write_store_dnd.js"></script>
<script type="text/javascript" src="support/test_write_store_music.js"></script>
<script type="text/javascript">
var layout1 = [{
defaultCell: {width: 5},
rows: [
{field: "A"},
{field: "B"},
{field: "C"},
{field: "D"},
{field: "E"},
{field: "F"},
{field: "G", hidden: true},
{field: "H", hidden: true},
{field: "I", hidden: true},
{field: "J"},
{field: "K"},
{field: "L"},
{field: "M"},
{field: "N"},
{field: "O"},
{field: "P"},
{field: "Q"},
{field: "R"},
{field: "S"},
{field: "T"},
{field: "U"},
{field: "V"},
{field: "W"},
{field: "X"},
{field: "Y"},
{field: "Z"}
]
}];
var layout2 = [
{//first view
rows:
[
{ field: "Genre", width: '6'},
{ field: "Artist", width: '5'},
{ field: "Year", width: '6'},
{ field: "Album", width: '12'},
{ field: "Name", width: '17', hidden: true},
{ field: "Length", width: '6'},
{ field: "Track", width: '6'},
{ field: "Composer", width: '15'},
{ field: "Download Date", width: '10'},
{ field: "Last Played", width: '10'}
]
}
];
var store_copy = new dojo.data.ItemFileWriteStore({
data: test_store_data[0]
});
var setIdentifierForNewItem = function(item, store, index){
console.log("setIdentifierForNewItem", index);
var attrs = store.getIdentityAttributes(item);
for(var i = attrs.length - 1; i >= 0; --i){
item[attrs[i]] = index + (new Date()).getTime();
}
return item;
};
var setDnDConfig = function(gridId, type, mode, selected){
var config = {};
config[type] = {};
config[type][mode] = selected;
dijit.byId(gridId).setupDnDConfig(config);
};
var setCopyOnly = function(gridId, selected){
dijit.byId(gridId).dndCopyOnly(selected);
};
var getRowData = function(grid, rowIndexes){
var cells = grid.layout.cells;
var store = grid.store;
var cache = grid._by_idx;
var res = "Grid Rows from " + grid.id + ":<br/>";
for(var i = 0; i < rowIndexes.length; ++i){
var r = rowIndexes[i];
res += "Row " + r + ": ";
for(var j = 0; j < cells.length; ++j){
if(!cells[j].hidden){
res += store.getValue(cache[r].item, cells[j].field) + ", ";
}
}
res = res.substring(0, res.length - 2) + ";<br/>";
}
return res;
};
dojo.addOnLoad(function(){
dojo.query("input.cfgbox").forEach(function(cb){
cb.checked = true;
});
dojo.query("input.copyonlyCBox").forEach(function(cb){
cb.checked = false;
});
});
var newItem1 = {A: "new a1", B: "new b1", C: "new c1", D: "new d1",E: "new e1",F: "new f1",G: "new g1",H: "new h1",I: "new i1",J: "new j1",K: "new k1",L: "new l1",M: "new m1",N: "new n1",O: "new o1",P: "new c1",Q: "new q1",R: "new r1",S: "new s1",T: "new t1",U: "new u1",V: "new v1",W: "new w1",X: "new x1",Y: "new y1",Z: "new z1"};
var newItem2 = {A: "new a2", B: "new b2", C: "new c2", D: "new d2",E: "new e2",F: "new f2",G: "new g2",H: "new h2",I: "new i2",J: "new j2",K: "new k2",L: "new l2",M: "new m2",N: "new n2",O: "new o2",P: "new c2",Q: "new q2",R: "new r2",S: "new s2",T: "new t2",U: "new u2",V: "new v2",W: "new w2",X: "new x2",Y: "new y2",Z: "new z2"};
var newItem3 = {A: "new a3", B: "new b3", C: "new c3", D: "new d3",E: "new e3",F: "new f3",G: "new g3",H: "new h3",I: "new i3",J: "new j3",K: "new k3",L: "new l3",M: "new m3",N: "new n3",O: "new o3",P: "new c3",Q: "new q3",R: "new r3",S: "new s3",T: "new t3",U: "new u3",V: "new v3",W: "new w3",X: "new x3",Y: "new y3",Z: "new z3"};
</script>
</head>
<body class="claro">
<h1 class="title">dojox.grid.EnhancedGrid - DnD</h1>
<div class="myblock">
<h3>Grid 1</h3>
<div id="grid1" dojoType="dojox.grid.EnhancedGrid" rowsPerPage="16"
canSort="false",
plugins='{
dnd: {
"setIdentifierForNewItem": setIdentifierForNewItem, copyOnly: true,
"dndConfig": {
}
}
}' store="test_store[0]" structure="layout1" rowSelector="20px">
</div>
</div>
<div class="myblock">
<h3>Grid 2</h3>
<div id="grid2" dojoType="dojox.grid.EnhancedGrid" rowsPerPage="16"
canSort="false",
plugins='{
dnd: {
"setIdentifierForNewItem": setIdentifierForNewItem,
"dndConfig": {
}
}
}' store="store_copy" structure="layout1" rowSelector="20px">
</div>
</div>
<div class="myblock">
<h3>Grid 1 Configuration</h3>
<label style="font-weight: bolder;">Copy Only</label><input class="copyonlyCBox" type="checkbox" onchange="setCopyOnly('grid1', this.checked)" />
<table class="cfgtable" border="1">
<thead>
<tr>
<th>Drag</th>
<th>Within</th>
<th>In</th>
<th>Out</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rows</td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'within', this.checked)"/></td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'in', this.checked)"/></td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'out', this.checked)"/></td>
</tr>
<tr>
<td>Columns</td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'col', 'within', this.checked)"/></td>
<td>Not implemented</td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'col', 'out', this.checked)"/></td>
</tr>
<tr>
<td>Cells</td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'within', this.checked)"/></td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'in', this.checked)"/></td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'out', this.checked)"/></td>
</tr>
</tbody>
</table>
</div>
<div class="myblock">
<h3>Grid 2 Configuration</h3>
<label style="font-weight: bolder;">Copy Only</label><input class="copyonlyCBox" type="checkbox" onchange="setCopyOnly('grid2', this.checked)" />
<table class="cfgtable" border="1">
<thead>
<tr>
<th>Drag</th>
<th>Within</th>
<th>In</th>
<th>Out</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rows</td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'within', this.checked)"/></td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'in', this.checked)"/></td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'out', this.checked)"/></td>
</tr>
<tr>
<td>Columns</td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'col', 'within', this.checked)"/></td>
<td>Not implemented</td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'col', 'out', this.checked)"/></td>
</tr>
<tr>
<td>Cells</td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'within', this.checked)"/></td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'in', this.checked)"/></td>
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'out', this.checked)"/></td>
</tr>
</tbody>
</table>
</div>
<div class="myblock" style="clear: left;">
<h3>Ordinary Target (Can not accept grid contents)</h3>
<div dojoType="dojo.dnd.Source" class="container">
<div class="dojoDndItem">Item <strong>X</strong></div>
<div class="dojoDndItem">Item <strong>Y</strong></div>
<div class="dojoDndItem">Item <strong>Z</strong></div>
</div>
</div>
<div class="myblock">
<h3>Target that can accept Grid</h3>
<div dojoType="dojox.grid.enhanced.plugins.GridSource" class="container"
insertNodesForGrid="true" getRowContent="getRowData">
<div class="dojoDndItem">Item 1</div>
<div class="dojoDndItem">Item 2</div>
<div class="dojoDndItem">Item 3</div>
</div>
</div>
<div class="myblock">
<h3>Grid Acceptable Source (Drag item to grid)</h3>
<div dojoType="dojo.dnd.Source" class="container">
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem1">Item 1</div>
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem2">Item 2</div>
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem3">Item 3</div>
</div>
</div>
<p style="clear: left;"><strong>Note:</strong> To see the tundra theme, just append <b style="color:blue;">?theme=tundra</b> to the URL.</p>
</body>
</html>