<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>GridFromHtml Tests</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;
|
}
|
|
|
|
require(["dgrid/GridFromHtml", "dgrid/OnDemandList",
|
"dojo/_base/declare", "dgrid/test/data/createSyncStore", "dgrid/test/data/orderedData",
|
"dojo/parser", "dojo/domReady!"],
|
function(GridFromHtml, OnDemandList, declare, createSyncStore, orderedData, parser){
|
|
window.gridFromHtmlLegacyFormatter = new GridFromHtml({},
|
"gridFromHtmlLegacyFormatter");
|
gridFromHtmlLegacyFormatter.renderArray(orderedData.items);
|
|
window.gridFromHtmlLegacyGet = new GridFromHtml({},
|
"gridFromHtmlLegacyGet");
|
gridFromHtmlLegacyGet.renderArray(orderedData.items);
|
|
window.gridFromHtmlNew = new GridFromHtml({},
|
"gridFromHtmlNew");
|
gridFromHtmlNew.renderArray(orderedData.items);
|
|
window.gridFromHtmlTestProps = new GridFromHtml({},
|
"gridFromHtmlTestProps");
|
gridFromHtmlTestProps.renderArray(orderedData.items);
|
|
// Need to expose GridFromHtml as a global for parser to find.
|
// Mix in OnDemandList and create a store, since otherwise there's not
|
// much of a way to add data.
|
window.dgrid = { GridFromHtml: declare([GridFromHtml, OnDemandList]) };
|
store = createSyncStore({data: orderedData});
|
parser.parse();
|
});
|
|
</script>
|
</head>
|
<body class="claro">
|
|
<p>Compare the outcome of the first group of tests with the first group in
|
<a href="Grid_rendering.html">Grid_rendering.html</a>.</p>
|
<!-- GridFromHtml should look for TRs with THs anywhere.
|
Testing here with one thead, one tbody, and one implicit. -->
|
<h2>1a: GridFromHtml with single column with formatter for _item field</h2>
|
<table id="gridFromHtmlLegacyFormatter">
|
<thead>
|
<tr>
|
<th data-dgrid-column="{field:'_item', sortable:false, formatter:testFormatter}">Step</th>
|
</tr>
|
</thead>
|
</table>
|
<h2>1b: GridFromHtml with single column with get for order field, and blank label for 3rd column</h2>
|
<table id="gridFromHtmlLegacyGet">
|
<tbody>
|
<tr>
|
<th data-dgrid-column="{field:'order', get:testGet}">Step</th>
|
<th>name</th>
|
<th data-dgrid-column="{label:'', field:'description', sortable:false}">what to do</th>
|
</tr>
|
</tbody>
|
</table>
|
<h2>1c: GridFromHtml with single column with renderCell function</h2>
|
<p>(should look same as previous but with underlined first header cell
|
and italicized first column values)</p>
|
<table id="gridFromHtmlNew">
|
<tr>
|
<th data-dgrid-column="{field:'order',
|
renderCell:testRenderCell, renderHeaderCell:testRenderHeaderCell}">Step</th>
|
<th>name</th>
|
<th data-dgrid-column="{field:'description', sortable:false}">what to do</th>
|
</tr>
|
</table>
|
|
<hr>
|
|
<h2>2a: same as 1a, parsed from declarative markup (using a store)</h2>
|
<table id="gridDeclarativeLegacyFormatter" data-dojo-id="gridDeclarativeLegacyFormatter"
|
data-dojo-type="dgrid.GridFromHtml" data-dojo-props="collection: store">
|
<thead>
|
<tr>
|
<th data-dgrid-column="{field:'_item', sortable:false, formatter:testFormatter}">Step</th>
|
</tr>
|
</thead>
|
</table>
|
<h2>2b: same as 1b, parsed from declarative markup (using a store)</h2>
|
<table id="gridDeclarativeLegacyGet" data-dojo-id="gridDeclarativeLegacyGet"
|
data-dojo-type="dgrid.GridFromHtml" data-dojo-props="collection: store">
|
<tbody>
|
<tr>
|
<th data-dgrid-column="{field:'order', get:testGet}">Step</th>
|
<th>name</th>
|
<th data-dgrid-column="{field:'description', sortable:false}">what to do</th>
|
</tr>
|
</tbody>
|
</table>
|
<h2>2c: same as 1c, parsed from declarative markup (using a store)</h2>
|
<table id="gridDeclarativeNew" data-dojo-id="gridDeclarativeNew"
|
data-dojo-type="dgrid.GridFromHtml" data-dojo-props="collection: store">
|
<tr>
|
<th data-dgrid-column="{field:'order',
|
renderCell:testRenderCell, renderHeaderCell:testRenderHeaderCell}">Step</th>
|
<th>name</th>
|
<th data-dgrid-column="{field:'description', sortable:false}">what to do</th>
|
</tr>
|
</table>
|
|
<hr>
|
|
<h2>3a: Testing boolean property (un)specification in GridFromHtml</h2>
|
<table id="gridFromHtmlTestProps">
|
<thead>
|
<tr>
|
<th rowspan="2" data-dgrid-column="{field:'name'}">No sortable attr (defaults to true)</th>
|
<th data-dgrid-column="{field:'name', sortable:false}">sortable="false"</th>
|
</tr>
|
<tr>
|
<th data-dgrid-column="{field:'name', sortable:true}">sortable="true"</th>
|
</tr>
|
</thead>
|
</table>
|
|
</body>
|
</html>
|
