I am using this example from SitePen that create an onDemandList to like a select.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Sitepen Sample</title>
<link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.13/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css"/>
<!-- Based on http://dgrid.io/tutorials/0.4/drop_down/ -->
<style type="text/css">
.mySelect {
border: 1px solid #b5bcc7;
background-color: #fff;
width: 200px;
height: 17px;
position: relative;
padding: 0;
}
.mySelect .label {
line-height: 17px;
vertical-align: middle;
}
.mySelect .arrow {
position: absolute;
top: 0;
right: 0;
background-image: url("//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/form/images/commonFormArrows.png");
background-position: -35px 70%;
background-repeat: no-repeat;
width: 16px;
height: 16px;
border: 1px solid #fff;
border-top: none;
background-color: #efefef;
}
.mySelect .dgrid {
cursor: default;
display: none;
position: absolute;
top: 17px;
left: -1px;
height: auto;
max-height: 20em;
width: 100%;
}
.mySelect .dgrid-scroller {
position: relative;
}
.mySelect .opened {
display: block;
}
</style>
<script type="text/javascript">
window.dojoConfig = {
async: true,
parseOnLoad:false
};
</script>
<script type="text/javascript" src="//js.arcgis.com/3.13compact"></script>
<script type="text/javascript">
require([
'dojo/_base/declare',
'dojo/on',
'dgrid/OnDemandList',
'dgrid/Selection',
"dojo/store/Memory",
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/query',
'dojo/domReady!'
], function(declare, on, List, Selection, Memory, dom, domConstruct, domClass, query) {
var DropDown = declare([ List, Selection ]);
var store = new Memory({
idProperty: 'id',
data: [
{ id: 0, name: 'One', value: 1 },
{ id: 1, name: 'Two', value: 2 },
{ id: 2, name: 'Three', value: 3 },
{ id: 3, name: 'Four', value: 4 }
]
});
function renderItem(item) {
var divNode = domConstruct.create('div');
domConstruct.place(document.createTextNode(item.name), divNode);
return divNode;
}
var dropDown = new DropDown({
selectionMode: 'single',
store: store,
renderRow: renderItem
});
domConstruct.place(dropDown.domNode, 'select');
dropDown.startup();
var open = false;
function toggle(state) {
open = typeof state !== 'undefined' ? state : !open;
domClass.toggle(dropDown.domNode, 'opened', open);
}
on(dom.byId('select'), '.button:click', function () {
toggle();
});
var label = query('.label', dom.byId('select'))[0];
dropDown.on('dgrid-select', function (event) {
var node = renderItem(event.rows[0].data);
domConstruct.place(node, label, 'only');
toggle(false);
});
});
</script>
</head>
<body class="claro">
<div id="select" class="mySelect">
<div class="label button">Label</div>
<div class="arrow button"></div>
</div>
</body>
</html>
Instead I need to use the results of my queryTask as th source for the data. This doesn't display anything. I think my problem is getting the data/Memory formatted correctly so the List knows how to interpret it. Perhaps in my renderItem function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<title>dGrid OnDemandList from QueryTask</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.13/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href= "//js.arcgis.com/3.13/esri/css/esri.css">
<style type="text/css">
#sidebar {
margin: 10px;
}
.mySelect {
border: 1px solid #b5bcc7;
background-color: #fff;
width: 200px;
height: 20px;
position: relative;
padding: 0;
}
.mySelect .label {
line-height: 17px;
vertical-align: middle;
font-size: 1em;
font-weight: normal;
color: #000000;
}
.mySelect .arrow {
position: absolute;
top: 0;
right: 0;
background-image: url("//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/form/images/commonFormArrows.png");
background-position: -35px 70%;
background-repeat: no-repeat;
width: 16px;
height: 16px;
border: 1px solid #fff;
border-top: none;
background-color: #efefef;
}
.mySelect .dgrid {
cursor: default;
display: none;
position: absolute;
top: 17px;
left: -1px;
height: 20em;
width: 100%;
}
.mySelect .dgrid-scroller {
position: relative;
}
.opened {
display: block;
height: 10em;
}
</style>
</head>
<body class="claro">
<script type="text/javascript">
var djConfig = {
parseOnLoad: false,
async: true
};
</script>
<script type="text/javascript" src="//js.arcgis.com/3.13compact">
</script>
<script type="text/javascript">
var pathName = "https://ogitest.oa.mo.gov";
require(['dojo/parser', 'dojo/query', 'dojo/on', 'dojo/dom', 'dojo/dom-class', 'dojo/dom-construct',
'dojo/_base/array', 'esri/tasks/QueryTask', 'esri/tasks/query', "dojo/_base/declare",
'dojo/store/Memory', 'dgrid/OnDemandList', 'dgrid/Selection',
'dojo/domReady!'],
function(parser, query, on, dom, domClass, domConstruct, arrayUtils, QueryTask, Query, declare,
Memory, List, Selection){
parser.parse();
// create list from provider table
function populateProviderList(){
var queryTask = new QueryTask(pathName + '/arcgis/rest/services/DSS/medProvider/MapServer/2');
var queryParams = new Query();
queryParams.outFields = ["*"];
queryParams.where = "1=1";
queryParams.returnGeometry = false;
queryTask.on('complete', providerResultsHandlerGrid);
queryTask.on('error', errorHandler);
queryTask.execute(queryParams);
}
function errorHandler(err){
console.log("error on populate Dropdown, queryTask, error: " + err.details);
}
function providerResultsHandlerGrid(results){
var DropDown = new declare([List, Selection]);
var data = arrayUtils.map(results.featureSet.features, function(feature){
return {
"id": feature.attributes['ID_PROV_TYPE_PK'],
"name": feature.attributes['TX_PROV_DESC'],
"value": feature.attributes['ID_PROV_TYPE_PK']
};
});
var currentMemory = new Memory({
data: data,
idProperty: 'id'
});
var dropDown = new DropDown({
selectionMode: 'single',
store: currentMemory,
renderRow: renderItem
});
domConstruct.place(dropDown.domNode, 'select');
dropDown.startup();
var open = false;
var label = query('.label', dropDown.domNode[0]);
on(dom.byId('select'), '.button:click', function(){
toggle();
});
on(dropDown, 'dgrid-select', function(event){
var node = renderItem(event.rows[0].data);
domConstruct.place(node, label, 'only');
toggle(false);
});
}
function toggle(state){
open = typeof state !== 'undefined' ? state : !open;
console.log("domClass contains opened:" + domClass.contains("select", "opened"));
if (domClass.contains("select", "opened")) {
domClass.toggle(dom.byId('select'), 'opened', open);
}
else {
domClass.add(dom.byId('select'), 'opened');
}
}
function renderItem(item){
var divNode = domConstruct.create('div');
domConstruct.place(document.createTextNode(item.name), divNode);
return divNode;
}
populateProviderList();
});
</script>
<div id="sidebar">
<div id="select" class="mySelect">
<div class="label button">
Pick a category
</div>
<div class="arrow button">
</div>
</div>
</div>
</body>
</html>