| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <title>dojox.Grid Styling Test</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> |
| <style type="text/css"> |
| @import "../../_grid/Grid.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: 45em; |
| height: 30em; |
| } |
| |
| #grid .dojoxGrid-row { |
| border: none; |
| } |
| |
| #grid .dojoxGrid-row-table { |
| border-collapse: collapse; |
| } |
| |
| #grid .dojoxGrid-cell { |
| border: none; |
| padding: 10px; |
| } |
| |
| .selectedRow .dojoxGrid-cell { |
| background-color: #003366; |
| color: white; |
| } |
| |
| .specialRow .dojoxGrid-cell { |
| background-color: dimgray; |
| } |
| |
| .selectedRow.specialRow .dojoxGrid-cell { |
| 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 .dojoxGrid-cell { |
| text-decoration: underline; |
| } |
| |
| .greenColumn { |
| color: yellow; |
| background-color: #006666; |
| font-style: italic; |
| } |
| .yellowColumnData { |
| background-color: yellow; |
| text-decoration: underline; |
| } |
| </style> |
| <script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> |
| <script type="text/javascript"> |
| dojo.require("dojox.grid.Grid"); |
| dojo.require("dojo.parser"); |
| </script> |
| <script type="text/javascript" src="support/test_data.js"></script> |
| <script type="text/javascript"> |
| // grid structure |
| // a grid view is a group of columns |
| |
| // a view without scrollbars |
| var leftView = { |
| noscroll: true, |
| cells: [[ |
| {name: 'Column 0', width: 5, headerStyles: 'padding-bottom: 2px;', styles: 'border-bottom: 1px dashed #333; border-right: 1px dashed #333; padding: 6px;'}, |
| {name: 'Column 1', width: 5, headerStyles: 'padding-bottom: 2px;', styles: 'text-align: right; border-bottom: 1px dashed #333; border-right: 1px dashed #333; padding: 6px;'} |
| ]]}; |
| |
| var middleView = { |
| cells: [[ |
| {name: 'Column 2'}, |
| {name: 'Column 3', headerStyles: 'background-image: none; background-color: #003333;', classes: 'greenColumn'}, |
| {name: 'Column 4', cellClasses: 'yellowColumnData', classes: 'yellowColumn', styles: 'text-align: center;' }, |
| {name: 'Column 5', headerStyles: 'background-image: none; background-color: #003333;', classes: 'greenColumn'}, |
| {name: 'Column 6'}, |
| {name: 'Column 7'} |
| ]]}; |
| |
| // a grid structure is an array of views. |
| var structure = [ leftView, middleView ]; |
| |
| function onStyleRow(inRow) { |
| with (inRow) { |
| var i = index % 10; |
| var special = (i > 2 && i < 6); |
| if (odd) |
| customStyles += ' color: orange;'; |
| if (selected) |
| customClasses += ' selectedRow'; |
| if (special) |
| customClasses += ' specialRow'; |
| if (over) |
| customClasses += ' overRow'; |
| if (!over && !selected) |
| dojox.Grid.prototype.onStyleRow.apply(this, arguments); |
| } |
| } |
| |
| dojo.addOnLoad(function() { |
| window["grid"] = dijit.byId('grid'); |
| }); |
| </script> |
| </head> |
| <body> |
| <div class="heading">dojox.Grid Styling Example</div> |
| <div id="grid" dojoType="dojox.Grid" onStyleRow="onStyleRow" model="model" structure="structure"></div> |
| </body> |
| </html> |
