topic Re: Populate dropdown, specifying label and values coming from different attributes in ArcGIS JavaScript Maps SDK Questions

Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Wed, 25 Sep 2013 20:20:25 GMT

I have a layer of school districts that contains both the school district name and a district ID number. I have a layer of schools which contains just the district ID number.

I'm populating my dijit.form.Select from the attributes of the school district layer. I need the list to appear as district names, but at the same time, it would be nice if the values were the district IDs. Then I could fire off a query on the school layer using a where clause without having to do any other hoop jumping (I think). This code works to populate my dropdown, I'd just like it to be a little more functional.

function populateDropDownList(){     var queryTask = new QueryTask(educationLayer.url + "/3");     var query = new Query();     query.outFields = ["DIST_NAME"];     query.where = "1=1";     query.returnGeometry = false;       queryTask.on('complete', resultsHandler);     queryTask.on('error', errorHandler);     queryTask.execute(query); }  function resultsHandler(results){     select = registry.byId("distSelect");// a dijit.form.Select      districtList.length = 0;     var numResults = results.featureSet.features.length;     for (var j = 0; j < numResults; j++) {         var distName = results.featureSet.features.attributes.DIST_NAME; //note the attribute name for the district code is DIST_CODE         districtList.push(distName);     }     districtList.sort();     var testList = arrayUtil.map(districtList, function (item, index){     return {         label:item,         value:item         };     });     select.addOption(testList); }

Re: Populate dropdown, specifying label and values coming from different attributes

JasonZou — Wed, 25 Sep 2013 21:09:14 GMT

Try this.

function populateDropDownList(){     var queryTask = new QueryTask(educationLayer.url + "/3");     var query = new Query();     query.outFields = ["DIST_NAME", "DIST_CODE"];    // assuming DIST_CODE is the field for district id     query.where = "1=1";     query.returnGeometry = false;       queryTask.on('complete', resultsHandler);     queryTask.on('error', errorHandler);     queryTask.execute(query); }  function resultsHandler(results){     select = registry.byId("distSelect");// a dijit.form.Select      districtList.length = 0;     var numResults = results.featureSet.features.length;     for (var j = 0; j < numResults; j++) {         var distName = results.featureSet.features.attributes.DIST_NAME;         var distID = results.featureSet.features.attributes.DIST_CODE;         districtList.push({label: distName, value: distID});     }     districtList.sort(function(item1, item2) {         var label1 = item1.label.toLowerCase(),       label2 = item2.label.toLowerCase();     return (label1 > label2) ? 1 : (label1 < label2) ? -1 : 0;     });     select.addOption(districtList); }

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Thu, 26 Sep 2013 12:09:06 GMT

That works great, thanks! You even got the sort I needed.

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Fri, 27 Sep 2013 17:31:20 GMT

I'm using dijit/form/Select, thinking it would let the user enter a letter on the keyboard and jump to that position in the list. Apparently I need FilteringSelect instead. The problem is the syntax for populating the options is not the same at all between the two types of Select. I don't see anywhere in the reference for filteringSelect how I can do this.

Re: Populate dropdown, specifying label and values coming from different attributes

GeorgeSimpson — Fri, 10 Dec 2021 22:46:29 GMT

Populate your FilteringSelect with a dojo/store/Memory store. Something like:




new FilteringSelect({ placeHolder: "Sort Results",
                        
      value: null,
      placeHolder: "Select a Value",
      store: new Memory({ data: results.featureSet.features, idProperty: "DIST_CODE" }),
      labelAttr: "DIST_NAME",
      searchAttr: "DIST_NAME"
});

Re: Populate dropdown, specifying label and values coming from different attributes

JasonZou — Fri, 27 Sep 2013 17:41:34 GMT

For FilteringSelect working with data store, use Memory instead for simplicity. Here is the way to set its options with Memory store.

Add "dojo/store/Memory" to the dependency list, and take Memory as the module alias.

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Fri, 10 Dec 2021 22:46:32 GMT

I know this must be the right path to follow, but so far it's not working. I added the reference for Memory. Most examples I find people are using the querytask to populate a grid. But in this case I'm trying to populate the store of a FilteringSelect. I don't know if I need to define my store or data differently because of that. I know in some instances I need to have an identifier as part of my data definition. But maybe that's for ItemFileReadStore and grids and doesn't apply in this situation.

function resultsHandler(results){
    var select = registry.byId("distSelect");//my filteringSelect dijit
    districtList.length = 0;
    var numResults = results.featureSet.features.length;
    for (var j = 0; j < numResults; j++) {
        var distName = results.featureSet.features.attributes.DIST_NAME;
        var distCode = results.featureSet.features.attributes.DIST_CODE;
        districtList.push({label: distName, value: distCode});
    }
       districtList.sort(function(item1, item2) {
        var label1 = item1.label.toLowerCase(),
         label2 = item2.label.toLowerCase();
        
    return (label1 > label2) ? 1 : (label1 < label2) ? -1 : 0;
    });

   var dataStore = new Memory({data:districtList});
select.set ("store", dataStore);
 // select.addOption(districtList);

}

Re: Populate dropdown, specifying label and values coming from different attributes

GeorgeSimpson — Fri, 27 Sep 2013 18:29:08 GMT

you need to set idProperty on your Store.

new Memory({data:districtList, idProperty:"DIST_CODE"})

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Fri, 27 Sep 2013 18:41:40 GMT

There are no values in my Select and when I click on it, I get an error TypeError: _f.store.query is not a function. Could it be something different than idProperty?

Re: Populate dropdown, specifying label and values coming from different attributes

JasonZou — Fri, 27 Sep 2013 18:59:14 GMT

George is right. Set idProperty to 'value' instead.

var dataStore = new Memory({data:districtList, idProperty:"value"});

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Fri, 10 Dec 2021 22:46:35 GMT

There must be something about the objects in the data store. If I look at what's in districtList, it contains label and value. So I thought maybe the issue was that idProperty should be value, not DIST_CODE.

   var dataStore = new Memory({data:districtList, idProperty:"value"})

Setting a breakpoint, I can see that select dijit goes from having just one entry in the 'store' value of "Pick a district" to a long list, starting with

Object { label="Adair Co. R-I", value="001090"}.

idProperty is defined as value. Should I not have quoted it? It seems like it should be. It looks to me like the store is getting set, but it's not the right format so it still doesn't work as a dropdown.

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Fri, 10 Dec 2021 22:46:37 GMT

When I look at the dojo example for using a datastore for a filteringselect, they are using name and id, not label and value, so I thought maybe that was the problem.

var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL"},
            {name:"Alaska", id:"AK"},
            {name:"American Samoa", id:"AS"},
            {name:"Arizona", id:"AZ"},
            {name:"Arkansas", id:"AR"}
        ]
    });

So I change what I was pushing to my districtList:

districtList.push({name: distName, id: distCode});

But it didn't help ...

Re: Populate dropdown, specifying label and values coming from different attributes

GeorgeSimpson — Fri, 27 Sep 2013 19:29:11 GMT

Are labelAttr and searchAttr defined for your select? They should be set to "label" if they are not.

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Fri, 10 Dec 2021 22:46:40 GMT

They were not. This started out as a simple Select and all I did was switch the type to FilteringSelect.

         
<select id="distSelect" data-dojo-type="dijit/form/FilteringSelect" 
         data-dojo-props="title:'Find schools in selected district',maxHeight:200, size: 30, labelAttr:'label', searchAttr:'label'">
         <option>Pick a district</option>
     </select>

This must not be right. I'm getting an error
TypeError: _32[this.searchAttr] is undefined

Like I mentioned, this is my first AMD, so I'm a little uncertain on syntax.

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Fri, 10 Dec 2021 22:46:42 GMT

On 2nd thought that's not going to work, because 'label' probably doesn't exist until it runs through my populateDropdownList function.

I changed it to this. Still doesn't work, though.

function resultsHandler(results){
    var select = registry.byId("distSelect");
    districtList.length = 0;
    var numResults = results.featureSet.features.length;
    for (var j = 0; j < numResults; j++) {
        var distName = results.featureSet.features.attributes.DIST_NAME;
        var distCode = results.featureSet.features.attributes.DIST_CODE;
        districtList.push({label: distName, value: distCode});
    }
   districtList.sort(function(item1, item2) {
    var label1 = item1.name.toLowerCase(),
    label2 = item2.name.toLowerCase();        
  return (label1 > label2) ? 1 : (label1 < label2) ? -1 : 0;
   });
   var dataStore = new Memory({data:districtList, idProperty:"value"})
select.set ("store", dataStore);
select.set ("labelAttr", "label");
select.set ("searchAttr", "value");
 // select.addOption(districtList);
 console.log (districtList);

}

Re: Populate dropdown, specifying label and values coming from different attributes

GeorgeSimpson — Fri, 10 Dec 2021 22:46:45 GMT

Try this:


<!DOCTYPE html>
<html>
    <head>        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Select</title>
        <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css" />
        <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
        <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/document.css" />

        <style>
            
        html, body, .dijitBorderContainer {
          width: 100%;
          height: 100%;
          margin: 0;
          overflow:hidden;          
        }
        
        </style>
    </head>
    
    <body class="claro">
       <select id="distSelect" data-dojo-type="dijit/form/FilteringSelect" 
         data-dojo-props="title:'Find schools in selected district',maxHeight:200, size: 30, labelAttr:'label', searchAttr:'label',autoComplete:false,queryExpr:'*${0}*',placeHolder:'Pick a District'">
         
     </select>
        
    </body>
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            parseOnLoad:true
        };
        </script>
        <script src="http://js.arcgis.com/3.7/"></script>
        <script type="text/javascript">
            require(["dojo/_base/declare", "dojo/ready", "dijit/registry", "dijit/form/Button", "dijit/form/FilteringSelect", "dojo/store/Memory"],
            function (declare, ready, registry, Button, FilteringSelect, Memory) {
                
                //fire when dojo is "ready"
                ready(function () {

                    //create a distric list
                    var districtList = [
                        { label: "District One", value: "Dist 1" },
                        { label: "District Two", value: "Dist 2" },
                        { label: "District Three", value: "Dist 3" },
                        { label: "District Four", value: "Dist 4" }
                    ];

                    //add a button
                    var button = new Button({ label: "Populate Select",
                        onClick: function () {
                        //get the filteringselect
                            var select = registry.byId("distSelect");

                            //set the select's store using the districtlist
                            select.set("store", new Memory({ data: districtList, idProperty: "value" }));
                        }
                    });

                    button.placeAt(document.body);

                });
            });
        </script>
</html>

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Mon, 30 Sep 2013 14:56:29 GMT

That example works. Now I have to figure out how to do this more dynamically because I have to generate the list from a function. There are hundreds of school district names.

I don't have any "dojo/_base/declare" in my code. I'm not sure what that does. Maybe that's what I'm missing.

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Mon, 30 Sep 2013 15:10:52 GMT

I finally figured it out! I finally noticed that my Memory was declared as the class ContentPane. That wasn't right! So I sorted out my requires etc and now it is working. That is by far the most klunky aspect to using AMD.

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Fri, 10 Dec 2021 22:46:48 GMT

Not quite figured out after all. When I try to entering a letter to move to that place in the list (the only reason I switched to FilteringSelect in the first place), it tells me the value entered isn't valid. In the example, I saw the query filter set as

queryExpr:'*${0}*'

But when I looked at the variable, that was the property already, so I didn't explicitly set it again. It seems redundant to do so.

Re: Populate dropdown, specifying label and values coming from different attributes

TracySchloss — Mon, 30 Sep 2013 18:34:53 GMT

After all this, I'm not getting the behavior I really need. I have district names for 'name' and for the values, I have a 6 digit numeric code, which is the common data element between my district polygons and school point layers. When trying to use the 'filtering' aspect of the dijit, it is expecting the code. My intent was for the user to end a "B" for example and skip to that section of the list. Nobody is going to know the internal code!