<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Simple</title>
<!--These are ext and plugins that we use from ext-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<!--End-->
<!--These are specific to htmltreegrid-->
<script type="text/javascript" src="http://htmltreegrid.com/demo/minified-compiled-dojo.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/examples/js/Configuration.js"></script>
<script type="text/javascript" src="http://htmltreegrid.com/demo/themes.js"></script>
<!--End-->
<!--css imports-->
<link rel="stylesheet" href="http://htmltreegrid.com/demo/flexicious/css/flexicious.css" type="text/css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojox/widget/Toaster/Toaster.css"/>
<!--End-->
<script type="text/javascript">
require(["dojo/dom", "dojo/_base/fx", "dojo/domReady!"], function (dom, fx) {
//This is how you define the grid - you pass in a div element as a constructor, and a data provider.
//This is one of the ways in which this can be done, you can specify configuration and themes as we will see in later examples
var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),
{
dataProvider: [
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
});
});
</script>
</head>
<body>
<div id="gridContainer" style="height: 400px;width: 100%;"></div>
</body>
</html>