text: <!DOCTYPE html>
  <html>
  	<head>
  		<meta charset="utf-8">
  		<title>Test declarative cell editors </title>
  		<meta name="viewport" content="width=570">
  		<style>
  			@import "../../dojo/resources/dojo.css";
  			@import "../css/dgrid.css";
  			@import "../../dijit/themes/claro/claro.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>
  			require(["dgrid/GridFromHtml", "dgrid/OnDemandList", "dgrid/Keyboard",
  				"dojo/store/Memory", "dojo/store/Observable",
  				"dojo/_base/declare", "dojo/parser",
  				"dijit/form/Select", "dgrid/Editor", "dijit/form/DateTextBox",
  				"dijit/form/HorizontalSlider", "dijit/form/NumberSpinner", "dojo/data/ObjectStore",
  				"dgrid/test/data/createSyncStore", "dgrid/test/data/typesData", "dgrid/test/data/stateData",
  				"dojo/domReady!"],
  			function(
  				GridFromHtml, OnDemandList, Keyboard, LegacyMemory, LegacyObservable, declare, parser,
  				Select, Editor, DateTextBox, Slider, NumberSpinner, ObjectStore,
  				createSyncStore, typesData, stateData
  			){
  				window.dgrid = {
  					GridFromHtml: declare([GridFromHtml, OnDemandList, Editor])
  				};
  				window.stateStore = new ObjectStore({
  						objectStore: LegacyObservable(new LegacyMemory({ data: stateData })),
  						labelProperty: "name"
  					});
  				// GridFromHtml tests
  				window.testTypesStore = createSyncStore({ data: typesData });
  				window.gridProgrammatic = new dgrid.GridFromHtml({
  					collection: testTypesStore
  				}, "gridProgrammatic");
  				parser.parse();
  			});
  
  		</script>
  	</head>
  	<body class="claro">
  
  
  		<!-- GridFromHtml should look for TRs with THs anywhere.
  			Testing here with one thead, one tbody, and one implicit. -->
  
  		<h2>1: GridFromHtml instantiated programmatically,
  			with columns using editor plugin</h2>
  		<table id="gridProgrammatic">
  			<thead>
  				<tr>
  					<th data-dgrid-column="{field:'date', editor: dijit.form.DateTextBox}">Date</th>
  					<th data-dgrid-column="{field: 'text', editor: 'text', editOn: 'dblclick'}">Text editable on dblclick</th>
  					<th data-dgrid-column="{
  							field: 'state',
  							editorArgs: {store: stateStore, style: 'width:120px;', maxHeight: -1},
  							editor: dijit.form.Select}">State</th>
  					<th data-dgrid-column="{field:'text2', sortable:false}">Uneditable</th>
  				</tr>
  			</thead>
  		</table>
  	<h2>2: Fully declarative GridFromHtml,
  		with columns using editor plugin</h2>
  	<table id="gridDeclarative" data-dojo-id="gridDeclarative"
  			data-dojo-type="dgrid.GridFromHtml" data-dojo-props="collection: testTypesStore">
  			<tr>
  				<th data-dgrid-column="{field:'date', editor: dijit.form.DateTextBox}">Date</th>
  				<th data-dgrid-column="{field: 'text', editor: 'text', editOn: 'dblclick'}">Text editable on dblclick</th>
  				<th data-dgrid-column="{
  						field: 'state',
  						editor: dijit.form.Select,
  						editorArgs: {store: stateStore, style: 'width:120px;', maxHeight: -1}
  					}">State</th>
  				<th data-dgrid-column="{field:'text2', sortable:false}">Uneditable</th>
  			</tr>
  		</table>
  	</body>
  </html>
  