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.
165 lines (151 loc) • 5.43 kB
HTML
<html>
<head>
<title>RTL Grid Bidi Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
@import "../../resources/Grid.css";
@import "../../resources/Grid_rtl.css";
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
#grid {
border: 1px solid #333;
width: 43em;
height: 30em;
}
#grid .dojoxGridRow {
border: none;
}
#grid .dojoxGridRowTable {
border-collapse: collapse;
}
#grid .dojoxGridCell {
border: 1px solid #333;
padding: 10px;
}
.selectedRow .dojoxGridCell {
background-color: #003366;
color: white;
}
.specialRow .dojoxGridCell {
background-color: dimgray;
}
.selectedRow.specialRow .dojoxGridCell {
text-decoration: line-through;
/* duplicate selection background-color so has precendence over specialRow background-color */
background-color: #003366;
}
/* in the yellow column, assign specific decoration for special rows that are selected */
.selectedRow.specialRow .yellowColumnData {
text-decoration: line-through underline;
}
.yellowColumn {
color: #006666;
}
.overRow .dojoxGridCell {
text-decoration: underline;
}
.greenColumn {
color: yellow;
background-color: #006666;
font-style: italic;
}
.yellowColumnData {
background-color: yellow;
text-decoration: underline;
}
.redColumnData {
color: blue;
background-color: pink;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config = "async: true, parseOnLoad: true, has: {'dojo-bidi': true}"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dijit/registry",
"doh/runner",
"dojo/dom",
"dojo/query",
"dojo/data/ItemFileWriteStore",
"dojox/grid/DataGrid",
"dojo/parser",
"dojox/grid/cells/dijit"
], function(ready, registry, runner, dom, query, ItemFileWriteStore){
ready(function(){
data = {identifier: 'id',label: 'id',items: []};
data_list = [
{ col1: "Hello note!", col2: "Hello note!", col3: "Hello note!", col4: 'To problems of corruption by!', col5: 9.12, col6: "Hello note!"},
{ col1: "\u05e9\u05dc\u05d5\u05dd note!", col2: "\u05e9\u05dc\u05d5\u05dd note!", col3: "\u05e9\u05dc\u05d5\u05dd note!", col4: 'Which would simply be awkward in!', col5: 12.15, col6: "\u05e9\u05dc\u05d5\u05dd!"}
];
for(var i=0; i < 60; i++){
data.items.push(dojo.mixin({ id: i }, data_list[i%2]));
}
test_store = new ItemFileWriteStore({data: data});
var structure = [
{
noscroll: true,
cells: [
{name: 'Editable LTR!', editable: true, field: 'col1', textDir: 'ltr', width: 6, headerStyles: 'padding-bottom: 2px;', styles: 'border-bottom: 1px dashed #333; border-right: 1px dashed #333; padding: 6px;'},
{name: 'Editable RTL!', editable: true, field: 'col2', width: 6, headerStyles: 'padding-bottom: 2px;', styles: 'border-bottom: 1px dashed #333; border-right: 1px dashed #333; padding: 6px;'}
]
},
[
{name: 'Editable Auto!', editable: true, field: 'col3', cellClasses: 'redColumnData', textDir: 'auto'},
{name: 'Editable inherit!', editable: true, field: 'col4', headerStyles: 'background-image: none; background-color: #003333;', classes: 'greenColumn'},
{name: 'Read-only Align center!', field: 'col5', cellClasses: 'yellowColumnData', classes: 'yellowColumn', styles: 'text-align: center;' },
{name: 'RTL Select!', cellType: dojox.grid.cells.Select, editable: true, field: 'col6', options: ["Hello note!", "\u05e9\u05dc\u05d5\u05dd note!"]}
]
];
var grid = dijit.registry.byId("grid");
grid.setStore(test_store);
grid.set('structure', structure);
runner.register("grid.tests.bidi.test_styling", [
{
name: "Grid styles, Bidi",
runTest: function(){
query(" .dojoxGridCell").forEach(function(node, index, arr){
switch(node.getAttribute("idx")){
case "0":
runner.is("ltr", node.style.direction, "cell node should have 'direction' style corresponding to 'textDir'");
break;
case "1":
case "3":
case "4":
case "5":
runner.is("rtl", node.style.direction, "cell node should have 'direction' style corresponding to 'textDir'");
}
});
}
}
]);
runner.register("log", function(){
dom.byId('failures').innerHTML = runner._failureCount;
dom.byId('errors').innerHTML = runner._errorCount;
});
runner.run();
});
},
toggleGridTextDir = function(){
var grid = dijit.registry.byId("grid");
grid.set("textDir", (grid.get("textDir") === "rtl") ? "ltr" : "rtl");
} );
</script>
</head>
<body dir="rtl">
<input id="btn" type="button" onclick="toggleGridTextDir()" value="Toggle Grid TextDir"><br>
<br />
<div class="heading">RTL Grid Bidi Test</div>
<div id="grid" data-dojo-id="grid" data-dojo-type="dojox/grid/DataGrid" data-dojo-props='textDir: "rtl" '></div>
<br>Errors: <span id="errors">?</span>
<br>Failures: <span id="failures">?</span>
</body>
</html>