topic Re: Create a dropdown list from results of a queryTask in ArcGIS JavaScript Maps SDK Questions

Create a dropdown list from results of a queryTask

TracySchloss — Sat, 11 Dec 2021 22:51:07 GMT

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>

Re: Create a dropdown list from results of a queryTask

thejuskambi — Thu, 27 Aug 2015 20:39:11 GMT

Sorry my mistake I did not see the require.

Re: Create a dropdown list from results of a queryTask

TracySchloss — Thu, 27 Aug 2015 20:44:58 GMT

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.

Re: Create a dropdown list from results of a queryTask

thejuskambi — Thu, 27 Aug 2015 20:54:49 GMT

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.

Re: Create a dropdown list from results of a queryTask

thejuskambi — Thu, 27 Aug 2015 20:58:17 GMT

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.

Re: Create a dropdown list from results of a queryTask

TracySchloss — Thu, 27 Aug 2015 21:02:45 GMT

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.

Re: Create a dropdown list from results of a queryTask

thejuskambi — Sat, 11 Dec 2021 22:51:10 GMT

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>