<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test get, formatter, and renderCell</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../css/skins/claro.css";
|
body {
|
padding: 0 80px; /* side padding to make it easier to scroll doc */
|
}
|
|
/* tests for renderCell / renderHeaderCell */
|
.renderedCell {
|
font-style: italic;
|
}
|
.renderedHeaderCell {
|
text-decoration: underline;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
var store; // defined later, Memory store containing data
|
|
function getOrdinal(num){
|
// returns a String consisting of num + the appropriate ordinal suffix
|
var ord = 'th';
|
switch (num % 10) {
|
case 1:
|
ord = 'st';
|
break;
|
case 2:
|
ord = 'nd';
|
break;
|
case 3:
|
ord = 'rd';
|
break;
|
}
|
return num + ord;
|
}
|
|
function testFormatter(item){
|
return "<h3>Step " + item.order + ": " + item.name + "</h3><p>" +
|
item.description + "</p>";
|
}
|
|
function testGet(item){
|
return getOrdinal(item.order);
|
}
|
|
function testRenderHeaderCell(th){
|
var div = document.createElement("div");
|
div.className = "renderedHeaderCell";
|
div.innerHTML = "Step";
|
return div;
|
}
|
|
function testRenderCell(object, data, td, options){
|
var div = document.createElement("div");
|
div.className = "renderedCell";
|
div.innerHTML = getOrdinal(object.order);
|
return div;
|
}
|
|
var testFormatterScope = {
|
foo: function(item){
|
return "<h3>" + this.word + " " + item.order + ": " + item.name + "</h3><p>" +
|
item.description + "</p>";
|
},
|
word: "Step" // for testing proper execution context
|
};
|
|
var columnsLegacyFormatter = [
|
{
|
label: "Step",
|
field: "_item",
|
formatter: testFormatter
|
}
|
];
|
|
var columnsLegacyFormatterScope = [
|
{
|
label: "Step",
|
field: "_item",
|
formatter: "foo"
|
}
|
];
|
|
var columnsLegacyGet = {
|
order: {
|
label: "Step",
|
get: testGet
|
},
|
name: {},
|
description: {label: "what to do", sortable: false}
|
};
|
var columnsNew = {
|
order: {
|
label: "Step",
|
renderHeaderCell: testRenderHeaderCell,
|
renderCell: testRenderCell
|
},
|
name: {},
|
description: {label: "", sortable: false} // Test blank label
|
};
|
require(["dgrid/Grid", "dgrid/OnDemandGrid",
|
"dgrid/test/data/createSyncStore", "dgrid/test/data/orderedData",
|
"dojo/_base/declare", "dojo/_base/lang", "dojo/parser", "dojo/query", "dojo/domReady!"
|
], function(Grid, OnDemandGrid, createSyncStore, orderedData, declare, lang, parser, query){
|
|
// fully-programmatic tests
|
|
|
window.gridLegacyFormatter = new Grid({
|
columns: columnsLegacyFormatter
|
}, "gridLegacyFormatter");
|
gridLegacyFormatter.renderArray(orderedData.items);
|
|
window.gridLegacyFormatterScope = new Grid({
|
columns: columnsLegacyFormatterScope,
|
formatterScope: testFormatterScope
|
}, "gridLegacyFormatterScope");
|
gridLegacyFormatterScope.renderArray(orderedData.items);
|
|
|
window.gridLegacyGet = new Grid({
|
columns: columnsLegacyGet
|
}, "gridLegacyGet");
|
gridLegacyGet.renderArray(orderedData.items);
|
|
window.gridNew = new Grid({
|
columns: lang.clone(columnsNew)
|
}, "gridNew");
|
gridNew.renderArray(orderedData.items);
|
|
|
// also, need a store, since there's currently no way to effectively
|
// invoke renderArray from HTML.
|
store = createSyncStore({data: orderedData.items});
|
parser.parse();
|
|
// Test 2x: testing dgrid w/o srcNodeRef, or w/ srcNodeRef w/o id
|
// Purposely testing with store to see how init is handled.
|
// (works fine if you renderArray after node placement)
|
|
// Test 2a: srcNodeRef + no id, specify id to dgrid
|
window.grid2a = new OnDemandGrid({
|
collection: store,
|
columns: lang.clone(columnsNew),
|
id: "test2a"
|
}, query(".test2a")[0]);
|
|
// Test 2b: srcNodeRef + no id - should end up with id=dgrid_0
|
window.grid2b = new OnDemandGrid({
|
collection: store,
|
columns: lang.clone(columnsNew)
|
}, query(".test2b")[0]);
|
|
// Test 2c: no srcNodeRef, specify id to dgrid
|
window.grid2c = new OnDemandGrid({
|
collection: store,
|
columns: lang.clone(columnsNew),
|
id: "test2c"
|
});
|
query(".test2c")[0].appendChild(grid2c.domNode);
|
// need to call startup after node is placed manually
|
grid2c.startup();
|
|
// Test 2d: no srcNodeRef, no id - should end up with id=dgrid_1
|
window.grid2d = new OnDemandGrid({
|
collection: store,
|
columns: lang.clone(columnsNew)
|
});
|
query(".test2d")[0].appendChild(grid2d.domNode);
|
// need to call startup after node is placed manually
|
grid2d.startup();
|
});
|
|
</script>
|
</head>
|
<body class="claro">
|
<p>This page tests various responsibilities of renderRow in Grid.js,
|
particularly those sensitive to dojox-grid-friendly properties.</p>
|
<h2>1a: Grid with single column with formatter for _item field (legacy grid behavior)</h2>
|
<div id="gridLegacyFormatter"></div>
|
<h2>1b: Grid with single column with formatter for _item field, using formatterScope (legacy grid behavior)</h2>
|
<div id="gridLegacyFormatterScope"></div>
|
<h2>1c: Grid with single column with get for order field (legacy grid behavior)</h2>
|
<div id="gridLegacyGet"></div>
|
<h2>1d: Grid with single column with renderCell function</h2>
|
<p>(dgrid behavior; should look same as previous but with underlined first header cell
|
and italicized first column values)</p>
|
<div id="gridNew"></div>
|
|
<hr>
|
|
<h2>2a: Grid on domnode with no initial id, id specified as param (will become DOM node id)</h2>
|
<div class="test2a"></div>
|
<h2>2b: Grid on domnode with no initial id, dgrid / DOM node id autogenerated</h2>
|
<div class="test2b"></div>
|
<h2>2c: Grid with no srcNodeRef (placed inside another domNode), id specified as param (will become DOM node id)</h2>
|
<div class="test2c"></div>
|
<h2>2d: Grid with no srcNodeRef (placed inside another domNode), dgrid / DOM node id autogenerated</h2>
|
<div class="test2d"></div>
|
</body>
|
</html>
|
