<!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>
