<!DOCTYPE html>
<html>
<head>
  <meta name="robots" content="noindex">
  <title>SheetJS + Dojo Memory Store Demo</title>
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dijit/themes/claro/claro.css">
</head>
<body class="claro">
  <h1>SheetJS + Dojo Memory Store Demo</h1>
  <br/>
  This demo fetches <a href="https://docs.sheetjs.com/pres.xlsx">https://docs.sheetjs.com/pres.xlsx</a>, parses the file, generates a Memory store from the first worksheet, and loads a Combo box. When a President is selected, the text box will display the "Index" field from the dataset.
  <br/>
  (this HTML page is not minified -- feel free to view source!)<br/><br/>
  <a href="https://docs.sheetjs.com">SheetJS CE Documentation</a><br/><br/>
<script>
  dojoConfig = {
    parseOnLoad: true,
    packages: [
      { name: "xlsx", location: "https://cdn.sheetjs.com/xlsx-latest/package/dist", main: "xlsx.full.min" }
    ]
  };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dojo/dojo.js" data-dojo-config=""></script>
<script>
require([
  "dojo/ready",
  "dojo/request/xhr",
  "dojo/store/Memory",
  "dijit/registry",
  "xlsx"
], function(ready, xhr, Memory, registry, _XLSX) {
  ready(function() {
    /* fetch test file */
    xhr("https://docs.sheetjs.com/pres.xlsx", {
      headers: { "X-Requested-With": null },
      handleAs: "arraybuffer"
    }).then(function(ab) {
      /* read ArrayBuffer */
      var wb = XLSX.read(ab);
      /* generate row objects from first worksheet */
      var ws = wb.Sheets[wb.SheetNames[0]];
      var aoo = XLSX.utils.sheet_to_json(ws);

      /* generate memory store and assign to combo box*/
      var store = new Memory({ data: aoo });
      registry.byId("combo").store = store;

      /* when a President is selected, display the index */
      registry.byId("combo").watch("item", function(w, oitem, nitem) {
        registry.byId("pindex").set("value", nitem.Index);
      });
    });
  });
});
</script>
<b>Select a president</b><br/>
<div id="combo" data-dojo-type="dijit/form/ComboBox" data-dojo-props="searchAttr:'Name'"></div><br/>
<b>Index of Selected President</b><br/>
<div id="pindex" data-dojo-type="dijit/form/TextBox"></div>
</body>
</html>