You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
5.3 KiB
164 lines
5.3 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
|
"http://www.w3.org/TR/html4/loose.dtd"> |
|
<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>
|
|
|