AnsweredAssumed Answered

Create a dropdown list from results of a queryTask

Question asked by schlot on Aug 27, 2015
Latest reply on Aug 28, 2015 by thejus.kambi

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="//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"/>
<!-- 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>

Outcomes