Community
Select to view content in your preferred language

Create a dropdown list from results of a queryTask

4392
6
08-27-2015 01:32 PM
TracySchloss
by
Honored Contributor
‎08-27-2015 01:32 PM

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>
0 Kudos
6 Replies
thejuskambi
by
Frequent Contributor
‎08-27-2015 01:39 PM

Sorry my mistake I did not see the require.

0 Kudos
TracySchloss
by
Honored Contributor
‎08-27-2015 01:44 PM

Yeah, it's pretty common to see OnDemandGrid be used as Grid, so I did something similar when I required OnDemandList.

I've had issues with several of the options for select/combobox/filteringselect not working across all platforms, so I'm always looking for alternatives.  I've had good luck with OnDemandGrid, so I figured I'd take OnDemandList for a spin too.

0 Kudos
thejuskambi
by
Frequent Contributor
‎08-27-2015 01:58 PM

In my personal opinon, we should not use OnDemandGrid as Grid. It could confuse. Its not an issue as long as you are aware. I kind of have a habit of nameing it as name of module, it makes it easier to understand.

0 Kudos
thejuskambi
by
Frequent Contributor
‎08-27-2015 01:54 PM

Found the issue, The css style mySelect .dgrid has property display set to none. which makes the items not visible even though they are available. Change the css and it should start showing the items.

0 Kudos
TracySchloss
by
Honored Contributor
‎08-27-2015 02:02 PM

It was set to none in the original sitePen as well, and commenting that out didn't help me.  I also realized that the field I was using for ID wasn't numeric.  I know that's not going to work.  I switched it to use the index as the ID instead, but still no luck. 

0 Kudos
thejuskambi
by
Frequent Contributor
‎08-28-2015 06:43 AM

I got it to work, there were couple of mistake like the variable label was refering to wrong node, the opened class was applied to wrong node etc.

<!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: 17px;  
                    position: relative;  
                    padding: 0;  
                }  
                  
                .mySelect .label {  
                    line-height: 17px;  
                    vertical-align: middle;  
                    font-size: 1em;  
                    font-weight: normal;  
                    color: #000000;
                    white-space:nowrap;
                    overflow:hidden;   
                }  
                  
                .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 !important;  
                      
                }  
            </style>  
            <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 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'  
                        });  
                          
                        dropDown.set('store', currentMemory);
                    }
                    
                    var DropDown = declare([ List, Selection ]);
                    
                    function renderItem(item) {
                        var divNode = domConstruct.create('div');  
                           domConstruct.place(document.createTextNode(item.name), divNode);  
                        return divNode;  
                      }  
  
                      var dropDown = new DropDown({  
                        selectionMode: 'single',  
                        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);  
                      });
                      
                    populateProviderList();  
                });  
            </script> 
        </head>  
        <body class="claro">  
             
            <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>
0 Kudos