src/index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Deutsche Bank: Policy Portal</title>

	<!--	<link rel="stylesheet" type="text/css" href="deutsche/resources/css/oneui-dojo.css">
		<link rel="stylesheet" type="text/css" href="deutsche/resources/css/oneui.css">
		<link rel="stylesheet" href="lib/dijit/themes/claro/claro.css" media="screen">
		<link rel="stylesheet" href="deutsche/resources/css/db-styles.css" media="screen">-->
	<link rel="stylesheet" type="text/css" href="deutsche/resources/main.css">

	<!-- load dojo and provide config via data attribute -->
	<script src="lib/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, isDebug: true"></script>
	<script>
		var store, cacheClass;
		require(['dojo/parser']);
		require([
			"dijit/layout/BorderContainer",
			"dijit/layout/TabContainer",
			"dijit/form/Button",
			"dijit/form/TextBox",
			"dijit/form/DropDownButton",
			"dijit/TooltipDialog",
			"dijit/layout/ContentPane"
		], function (ready, dom) {
			dojo.ready(function () {
				// Runs before parser, which is priority == 90
				/*store = new dojo.store.Memory({
				 data: [
				 {id: 1, name: 'AMP & Anti Financial Crime'},
				 {id: 2, name: 'Asses Management - Active Equities'},
				 {id: 3, name: 'Asses Management - Americas Region'},
				 {id: 4, name: 'Asses Management - ARS'},
				 {id: 5, name: 'Asses Management - Asia Region'}
				 ]
				 });
				 cacheClass = Cache;*/
			});
		});

		/**
		 * PPF Grid
		 *
		 *
		 */

		require([
			"dojo/dom-style",
			"dojo/store/Memory",
			"gridx/core/model/cache/Sync",
			"gridx/Grid",
			//"gridx/modules/Header",
			"gridx/modules/RowHeader",
			"gridx/modules/select/Row",
			"gridx/modules/Edit",
			"gridx/modules/CellWidget",
			"gridx/modules/IndirectSelect",
			"gridx/modules/IndirectSelectColumn",
			"gridx/modules/extendedSelect/Row",
			"dijit/form/Button"
		], function (domStyle, Memory, Sync, Grid, /* Header, */RowHeader, SelectRow, Edit, CellWidget, IndirectSelect, IndirectSelectColumn, ExtendedSelectRow, Button) {
			var store = new Memory({
				data: [

					{id: 1, name: 'AMP & Anti Financial Crime'},
					{id: 2, name: 'Asses Management - Active Equities'},
					{id: 3, name: 'Asses Management - Americas Region'},
					{id: 4, name: 'Asses Management - ARS'},
					{id: 5, name: 'Asses Management - Asia Region'},
					{id: 6, name: 'AMP & Anti Financial Crime'},
					{id: 7, name: 'Asses Management - Active Equities'},
					{id: 8, name: 'Asses Management - Americas Region'},
					{id: 9, name: 'Asses Management - ARS'},
					{id: 10, name: 'Asses Management - Asia Region'},
					{id: 11, name: 'AMP & Anti Financial Crime'},
					{id: 12, name: 'Asses Management - Active Equities'},
					{id: 13, name: 'Asses Management - Americas Region'},
					{id: 14, name: 'Asses Management - ARS'},
					{id: 15, name: 'Asses Management - Asia Region'},
					{id: 16, name: 'AMP & Anti Financial Crime'},
					{id: 17, name: 'Asses Management - Active Equities'},
					{id: 18, name: 'Asses Management - Americas Region'},
					{id: 19, name: 'Asses Management - ARS'},
					{id: 20, name: 'Asses Management - Asia Region'},
					{id: 21, name: 'AMP & Anti Financial Crime'},
					{id: 22, name: 'Asses Management - Active Equities'},
					{id: 23, name: 'Asses Management - Americas Region'},
					{id: 24, name: 'Asses Management - ARS'},
					{id: 25, name: 'Asses Management - Asia Region'},
					{id: 26, name: 'AMP & Anti Financial Crime'},
					{id: 27, name: 'Asses Management - Active Equities'},
					{id: 28, name: 'Asses Management - Americas Region'},
					{id: 29, name: 'Asses Management - ARS'},
					{id: 30, name: 'Asses Management - Asia Region'},
				]
			});
			var structure = [
				{ id: 'name', field: 'name', width: '100%', editable: true }
			];
			var PPFGrid = Grid({
				id:         'grid',
				cacheClass: Sync,
				store:      store,
				structure:  structure,
				modules:    [
					"gridx/modules/CellWidget",
					"gridx/modules/Edit",
					"gridx/modules/RowHeader",
					"gridx/modules/select/Row",
				    "gridx/modules/IndirectSelect",
				    "gridx/modules/IndirectSelectColumn",
					"gridx/modules/extendedSelect/Row"
				],
				selectRowTriggerOnCell: false
			});
			//Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
			//grid.headerProvider = function(){return ""};
			PPFGrid.headerNode.hidden = true;
			console.debug(PPFGrid);
			PPFGrid.placeAt('PPFGridContainer');

			//Start it up.
			PPFGrid.startup();
			var SaveButton = new Button({
				label: "Save",
				onClick: function(){
					// Do something:

				}
			}, "SaveButtonNode").startup();
			var CancelButton = new Button({
				label: "Cancel",
				onClick: function(){
					// Do something:

				}
			}, "CancelButtonNode").startup();
			var NextButton = new Button({
				label: "Next",
				disabled: true,
				onClick: function(){
					// Do something:

				}
			}, "NextButtonNode").startup();
			var AddNewItemButton = new Button({
				label: "<< Add new term",
				width: "100%",
				onClick: function(){}

			}, "AddNewItemButtonNode").startup();
			var DeleteItemButton = new Button({
				label: "Delete term(s)",
				width: "100%",
				disabled: true,
				onClick: function(){}

			}, "DeleteItemButtonNode").startup();

			domStyle.set("DeleteItemButtonNode","width","100%");
			domStyle.set("AddNewItemButtonNode","width","100%");
		});

		/**
		 * Functional Applicability Tree Grid
		 *
		 *
		 */

		require([
			"dojo/dom-style",
			"dojo/store/Memory",
			"gridx/core/model/cache/sync",
			"gridx/Grid",
			"gridx/modules/Tree",
			"gridx/modules/RowHeader",
			"gridx/modules/select/Row",
			"gridx/modules/Edit",
			"gridx/modules/CellWidget",
			"gridx/modules/IndirectSelect",
			"gridx/modules/IndirectSelectColumn",
			"gridx/modules/extendedSelect/Row",
			"dijit/form/Button"
		], function(domStyle, Memory, Sync, Grid, /**/ Tree,/* */ RowHeader, selectRow, Edit, CellWidget, IndirectSelect, IndirectSelectColumn, ExtendedSelectRow, Button) {
			//console.debug("about to call define store");
			var store = new Memory({
				identifier: 'id',
				label: 'id',
				data: [
					{ name:'Global', id: "G_2454", children: [
						{ name:'First Child', id: "G_2834", children: [
							{ name:'First Grandchild', id: "G_8356", children: [
								{ name:'First Great Grandchild', id: "G_8556" },
								{ name:'Second Great Grandchild', id: "G_3456", children: [
									{ name:'Forst Great Great Grandchild', id: "G_3567"} ]
								} ]
							},
							{ name:'Second Grandchild', id: "G_9567", children: [
								{ name:'First Great Grandchild', id: "G_3568" } ]
							} ]
						 },
						{ name:'Second Child', id: "G_3569", children:[
							{ name:'First Grandchild', id: "G_3570" } ]
						} ]
					} ]
			});
			//console.debug("about to add hasChildren to store");
			store.hasChildren = function(id, item){
				// we should be very careful here, because hasChildren should not throw.
				//console.debug(id);
				//if (item.children && item.children.length){
				//console.debug(item);
				//console.debug(item.children);
				//console.debug(item.children.length);

				return item && item.children && item.children.length;
				//} else {
				//	return false;
				//}
			};
			//console.debug("about to add getChildren to store");
			store.getChildren = function(item){
		        return item.children;
			};
			//console.debug("about to call define struction");
			var structure = [
				{name: "Name", field: "name", expandLevel: 'all'},
				{name: "Id", field: "id"}
			];
			//console.debug("about to call define functionalApplicabilityGrid");
			var functionalApplicabilityGrid = Grid({
				id:         'grid2',
				cacheClass: Sync,
				store:      store,
				structure:  structure,
				modules:    [
					"gridx/modules/CellWidget",
					"gridx/modules/Edit",
					"gridx/modules/RowHeader",
					"gridx/modules/select/Row",
					"gridx/modules/IndirectSelect",
					"gridx/modules/IndirectSelectColumn",
					"gridx/modules/extendedSelect/Row",
				    "gridx/modules/Tree"
				],
				selectRowTriggerOnCell: false,
				selectRowTreeMode:false,
				//selectRowMultiple: false,
				//type: columnar
			}, "treeGrid");
			//treeNested: true;
			//Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
			//grid.headerProvider = function(){return ""};
			//functionalApplicabilityGrid.headerNode.hidden = true;
			console.debug(functionalApplicabilityGrid);
			//console.debug("about to place functionalApplicabilityGrid");

			functionalApplicabilityGrid.placeAt('functionalApplicabilityGridContainer');
			//console.debug("about to startup functionalApplicabilityGrid");

			functionalApplicabilityGrid.tree.expandRecursive("G_2454", true);
			//Start it up.
			functionalApplicabilityGrid.startup();
		});

		/**
		 * Functional Applicability Documents Grid
		 *
		 *
		 */

		require([
			"dojo/dom-style",
			"dojo/store/Memory",
			"gridx/core/model/cache/Sync",
			"gridx/Grid",
			//"gridx/modules/Header",
			"gridx/modules/RowHeader",
			"gridx/modules/select/Row",
			"gridx/modules/Edit",
			"gridx/modules/CellWidget",
			"gridx/modules/IndirectSelect",
			"gridx/modules/IndirectSelectColumn",
			"gridx/modules/extendedSelect/Row",
			"gridx/modules/SingleSort",
			"dijit/form/Button"
		], function (domStyle, Memory, Sync, Grid, /* Header, */RowHeader, SelectRow, Edit, CellWidget, IndirectSelect, IndirectSelectColumn, ExtendedSelectRow, SingleSort, Button) {
			var store = new Memory({
				data: [

					{id: 1, name: 'Anti-Money Laundering Policy - Durtsche Bank Group', deletedAssignments: 'Regional Management', existingAssignments: '-', newAssignments: 'sfsfgjdfsfgjdfsfgjdfsfgjdfgj', field1: '2345234', field2: '345346234626', field3: '262724572'},
					{id: 2, name: 'Anti-Money Laundering Policy - Durtsche Bank Group', deletedAssignments: 'Regional Management', existingAssignments: '-', newAssignments: 'sdfh', field1: '2345234', field2: '345346234626', field3: '262724572'},
					{id: 3, name: 'Anti-Money Laundering Policy - Durtsche Bank Group', deletedAssignments: ['Regional Management','Central Areas and Support'], existingAssignments: '-', newAssignments: 'fghk', field1: '2345234', field2: '345346234626', field3: '262724572'},
					{id: 4, name: 'Anti-Money Laundering Policy - Durtsche Bank Group', deletedAssignments: 'Central Areas and Support', existingAssignments: 'Audit', newAssignments: 'Audit', field1: '2345234', field2: '345346234626', field3: '262724572'},
					{id: 5, name: 'Anti-Money Laundering Policy - Durtsche Bank Group', deletedAssignments: 'Central Areas and Support', existingAssignments: '-', newAssignments: '-', field1: '2345234', field2: '345346234626', field3: '262724572'}

				]
			});
			var structure = [
				{ field: 'name', name: 'Document Title', editable: false },
				{ field: 'deletedAssignments', name: 'Deleted Assignments', editable: false },
				{ field: 'existingAssignments', name: 'Existing Assignments', editable: false },
				{ field: 'newAssignments', name: 'New Assignments', editable: false },
				{ field: 'field1', name: 'Something else', editable: false },
				{ field: 'field2', name: 'Yet Another Thing', editable: false },
				{ field: 'field3', name: 'Are we there yet?', editable: false }
			];
			var functionalApplicabilityDocumentsGrid = Grid({
				id:         'functionalApplicabilityDocuments',
				cacheClass: Sync,
				store:      store,
				structure:  structure,
				sortable: true,
				modules:    [
					"gridx/modules/CellWidget",
					"gridx/modules/Edit",
					"gridx/modules/RowHeader",
					"gridx/modules/select/Row",
					"gridx/modules/IndirectSelect",
					"gridx/modules/IndirectSelectColumn",
					"gridx/modules/extendedSelect/Row",
					"gridx/modules/SingleSort"
				],
				selectRowTriggerOnCell: false
			});
			//Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
			//grid.headerProvider = function(){return ""};
			//functionalApplicabilityDocumentsGrid.headerNode.hidden = true;
			console.debug(functionalApplicabilityDocumentsGrid);
			functionalApplicabilityDocumentsGrid.placeAt('functionalApplicabilityDocumentsGridContainer');

		});
		//console.dir("dojo is" + dojo); */
	</script>
</head>
<!-- one column layout -->
<body class="oneui claro">
<div id="db-banner">
	<div class="db-branding-right"></div>
	<div class="db-branding-left">
		<div class="db-name">Deutsche Bank</div>
		<div class="db-portalTitle">Policy Portal</div>
	</div>
	<div class="db-bannerLinks">
		<a href="#">GPAG Contacts</a>|<a href="#">Policy template</a>|<a href="#">Policy principles</a>|<a href="#">Support</a>
	</div>
</div>
<div class="db-topNav">
	<div class="profileMenu" style="float: right;">
		<div data-dojo-type="dijit/form/DropDownButton">
			<span class="name">User Name</span>

			<div data-dojo-type="dijit/TooltipDialog">
				<dl class="profileDialog">
					<dt>Location:</dt>
					<dd>Frankfurt, Germany</dd>
					<dt>Language:</dt>
					<dd>English</dd>
					<dt>Functional Applicability:</dt>
					<dd>DB Group</dd>
					<dt>Geographical Applicability:</dt>
					<dd>Global</dd>
					<dt>Policy Producing Function:</dt>
					<dd class="last">Compliance</dd>
				</dl>
			</div>
		</div>
	</div>
	<!-- end profile menu -->
	<!-- navLinks -->
	<div class="db-navLinks">
		<a href="#" class="navLink">Policies</a>
		<a href="#" class="navLink">Favourites</a>
		<a href="#" class="navLink">Tasks</a>
		<a href="#" class="navLink">Add New Document</a>
		<a href="#" class="navLink">Access Control</a>
		<a href="#" class="navLink active">Data Admin</a>
	</div>
</div>


<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, liveSplitters:false"
     id="borderContainerMain">


	<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top',splitter:false"
	     class="dbLayout-oneCol notice">
		Please select a Data Dictionary to review or edit
	</div>
	<div id="appLayout" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center', splitter: false, tabStrip: true">
		<div data-dojo-type="dijit/layout/ContentPane" style="height: 80%" data-dojo-props="region: 'center'" title="PPF" >
			<div data-dojo-type="dijit/layout/LayoutContainer" style="display:block" data-dojo-props="gutter: false">
				<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" style="width: 40%" data-dojo-props="region: 'left'" >
					<h2>Policy Producing Function</h2>
					<div id="PPFGridContainer"></div>
				</div>
				<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
					<div data-dojo-type="dijit/layout/LayoutContainer" style="margin-top: -12px;" data-dojo-props="gutter: false">

						<div data-dojo-type="dijit/layout/ContentPane" style="width: 150px; text-align: center;" data-dojo-props="region: 'left'">
							<div data-dojo-type="dijit/layout/LayoutContainer" data-dojo-props="gutter: true">
								<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'" style="height: 30px;">
									<button id="BackButtonNode" type="button" class="btn_glyph btn_back">Back</button>
									<button id="ForwardButtonNode" type="button" class="btn_glyph btn_forward">Forward</button>
									<button id="LockButtonNode" type="button" class="btn_glyph btn_lock">Lock</button>
								</div>
								<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
									<button id="AddNewItemButtonNode" type="button" style="width: 100%"><< Add new term</button>
								</div>
								<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'" style="height: 30px;">
									<button id="DeleteItemButtonNode" type="button" style="width: 100%">Delete term(s)</button>
								</div>
							</div>
						</div>
						<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" style="width: 40%" data-dojo-props="region: 'center'" >
							<h2>New Terms</h2>
							<div style="border: 1px hsl(0, 0%, 85%) solid; padding: 10px;">
								<input type="text" placeholder="Enter a new item">
							</div>
						</div>
					</div>

				</div>


				<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" style="width: 100%" data-dojo-props="region:'bottom'"
				     class="dbLayout-oneCol">
					<!--<div data-dojo-type="dijit/layout/LayoutContainer" data-dojo-props="region:'top', design: 'headline'"">-->
						<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" data-dojo-props="region:'left'" style="width: 30%; float:left;">
							<button id="SaveButtonNode" type="button" >Save</button>
						</div>
						<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" data-dojo-props="region:'right'" style="width: 30%; float:right;">
							<button id="CancelButtonNode" type="button"  data-dojo-props="region:'right'" >Cancel</button>
							<button id="NextButtonNode" type="button"  data-dojo-props="region:'right'" >Next</button>
						</div>


					<!--</div>-->

				</div>
			</div>
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" style="height: 80%" data-dojo-props="region: 'center'" title="Languages">
			Lorem ipsum and all around - second...
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" style="height: 80%" data-dojo-props="region: 'center'" title="Key Policy Designation">
			Lorem ipsum and all around - last...
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" style="height: 80%" data-dojo-props="region: 'center'" title="Compliance">
			Lorem ipsum and all around - last...
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" style="height: 80%" data-dojo-props="region: 'center'" title="Decommissioning">
			Lorem ipsum and all around - last...
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" style="height: 80%" data-dojo-props="region: 'center'" title="Key Policy Removal">
			Lorem ipsum and all around - last...
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" selected="true" style="height: 80%" data-dojo-props="region: 'center'" title="Functional Applicability">

			<div data-dojo-type="dijit/layout/LayoutContainer" style="display:block" data-dojo-props="gutter: false">

				<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" style="width: 40%" data-dojo-props="region: 'left'" >
					<h2>Functional Applicability</h2>
					<div id="functionalApplicabilityGridContainer"></div>
				</div>

				<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" data-dojo-props="region: 'center'" >

					<div data-dojo-type="dijit/layout/LayoutContainer" style="margin-top: -5px;" data-dojo-props="gutter: false">
						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'" style="height: 30px;">

							<h2 class="left">Documents</h2>
							<div class="right">
								<button id="BackButtonNode" type="button" class="btn_glyph btn_back">Back</button>
								<button id="ForwardButtonNode" type="button" class="btn_glyph btn_forward">Forward</button>
								<button id="SaveButtonNode" type="button" class="dijitButton">Save</button>
							</div>
						</div>
						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
							<div id="functionalApplicabilityDocumentsGridContainer"></div>
						</div>
					</div>

				</div>

				<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" style="width: 100%" data-dojo-props="region:'bottom'"
				     class="dbLayout-oneCol">
					<!--<div data-dojo-type="dijit/layout/LayoutContainer" data-dojo-props="region:'top', design: 'headline'"">-->
					<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" data-dojo-props="region:'left'" style="width: 30%; float:left;">
						<button id="EditDictionaryuttonNode" type="button" >Edit Dictionary</button>
					</div>
					<div data-dojo-type="dijit/layout/ContentPane" class="edgePanel" data-dojo-props="region:'right'" style="width: 30%; float:right;">
						<button id="CancelButtonNode" type="button"  data-dojo-props="region:'right'" >Cancel</button>
						<button id="CancelButtonNode" type="button"  data-dojo-props="region:'right'" >Commit</button>
					</div>


					<!--</div>-->

				</div>
			</div>
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"
		     title="Geographical Applicability">
			Lorem ipsum and all around - last...
		</div>
	</div>

</div>

<!-- end appLayout -->
</body>


</html>