populate field attributes in dojo combobox

RichardMoussopo — Thu, 11 Sep 2014 00:09:45 GMT

I would like to populate field attributes in dojo combobox and zoom to the selected feature on selected Index changed. any way to achieve this?

Re: populate field attributes in dojo combobox

RobertScheitlin__GISP — Thu, 11 Sep 2014 01:51:59 GMT

Richard,

Here is a thread that answers this question with sample code https://community.esri.com/message/399170#399170

Re: populate field attributes in dojo combobox

RichardMoussopo — Thu, 11 Sep 2014 19:18:51 GMT

Thank you Robert the link was very helpful. But, now I am having a little issue.

In my case, I have 3 comboboxes populated from 3 different layers and I would like to use the same function (app ={

zoomRow:

})

for all 3 comboboxes. I thought about using the switch case depending on the ComboBox id but no success.

is there a way around this?

Re: populate field attributes in dojo combobox

RobertScheitlin__GISP — Fri, 12 Sep 2014 13:20:04 GMT

Richard,

Here is a sample that show how to reuse the zoomRow for two different comboboxes:

<!DOCTYPE html>  
<html>  

<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />  
  <title>Drop Down Test</title>  
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">     
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">  
  <style>  
    html,  
    body,  
    #mainWindow {  
      height: 100%;  
      width: 100%;  
      margin: 0;  
      padding: 0;  
    }  
    body {  
      background-color: #FFF;  
      overflow: hidden;  
      font-family: "Trebuchet MS";  
    }  
    #header {  
      height: 3%;  
      overflow: auto;  
    }  
  </style>  
  <script>  
    var dojoConfig = {  
      parseOnLoad: true  
    };  
  </script>  
  <script src="http://js.arcgis.com/3.10/"></script>  
  <script>  
    var map;  
    require([  
      "esri/map",  
      "dojo/on",  
      "esri/tasks/query",  
      "esri/layers/FeatureLayer",  
      "dojo/store/Memory",  
      "dojo/_base/array",  
      "dojo/_base/lang",  
      "esri/request",  
      "dojo/json",  
      "dijit/layout/BorderContainer",  
      "dijit/layout/ContentPane",  
      "dijit/form/Button",  
      "dijit/form/ComboBox",  
      "dojo/domReady!"  
    ], function(  
      Map, on, Query, FeatureLayer, Memory, array, lang, esriRequest, json  
    ) {  
      map = new Map("map", {  
        basemap: "topo",  
        center: [-120.1883, 37.0868],  
        zoom: 6  
      });  

      var zipcodes = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/california-zip-codes-census-2010/FeatureServer/0", {  
        mode: FeatureLayer.MODE_SELECTION,  
        outFields: ["*"]  
      });  

      map.addLayers([zipcodes]);  
      map.on("layers-add-result", lang.hitch(this, function(){  
        var url = "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/california-zip-codes-census-2010/FeatureServer/0/generateRenderer";  
        var classificationDef = {"type":"uniqueValueDef","uniqueValueFields":["ZCTA5CE10"]};
        var classificationDef2 = {"type":"uniqueValueDef","uniqueValueFields":["GEOID10"]};
        var str = json.stringify(classificationDef);
        var str2 = json.stringify(classificationDef2);
        esriRequest({  
          url:url,  
          content:{  
            classificationDef:str,  
            f:'json'  
          },  
          handleAs:'json',  
          callbackParamName:'callback',  
          timeout:15000  
        }).then(lang.hitch(this,function(response){  
          var uniqueValueInfos = response && response.uniqueValueInfos;  
          if(uniqueValueInfos){  
            var store2 = new Memory({data:[]});  
            dijit.byId("uniqueValuesSelect").set('store',store2);  
            var data = array.map(uniqueValueInfos,lang.hitch(this,function(info,index){  
              var value = info.value;  
              value = parseFloat(value);  
              var dataItem = {  
                id:index,  
                name:value  
              };  
              return dataItem;  
            }));  
            store2 = new Memory({data:data});  
            dijit.byId("uniqueValuesSelect").set('store',store2);  
          }  
        }),lang.hitch(this,function(error){  
          console.error(error);  
        }));
        esriRequest({  
          url:url,  
          content:{  
            classificationDef:str2,  
            f:'json'  
          },  
          handleAs:'json',  
          callbackParamName:'callback',  
          timeout:15000  
        }).then(lang.hitch(this,function(response){  
          var uniqueValueInfos2 = response && response.uniqueValueInfos;  
          if(uniqueValueInfos2){  
            var store3 = new Memory({data:[]});  
            dijit.byId("uniqueValuesSelect2").set('store',store3);  
            var data2 = array.map(uniqueValueInfos2,lang.hitch(this,function(info,index){  
              var value2 = info.value;  
              //value2 = parseFloat(value2);  
              var dataItem2 = {  
                id:index,  
                name:value2  
              };  
              return dataItem2;  
            }));  
            store3 = new Memory({data:data2});  
            dijit.byId("uniqueValuesSelect2").set('store',store3);  
          }  
        }),lang.hitch(this,function(error){  
          console.error(error);  
        }));
      }));  

      app = {  
        zoomRow: function(id, which){   
          zipcodes.clearSelection();  
          var query = new Query();
          if(which == "zip"){
            query.where = "ZCTA5CE10='" + (id).toString() + "'"; 
          }else if(which == "geo"){
            query.where = "GEOID10='" + (id).toString() + "'"; 
          }
          console.info(query.where);
          query.returnGeometry = true;  
          zipcodes.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {  
            var thePoly = features[0].geometry;  
            var theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent   
            map.setExtent(theExtent);  
          });  
        }  
      };  

    });  
  </script>  
</head>  

<body class="claro">  
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">  
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a California Zip Code and zoom to it on the map:    
      <input id="uniqueValuesSelect" data-dojo-type="dijit.form.ComboBox" value="Zipcode" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value, 'zip');" />
      <input id="uniqueValuesSelect2" data-dojo-type="dijit.form.ComboBox" value="GEOID10" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect2').value, 'geo');" />
    </div>  
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>  
  </div>  
</body>  

</html>

topic Re: populate field attributes in dojo combobox in ArcGIS JavaScript Maps SDK Questions

populate field attributes in dojo combobox

Re: populate field attributes in dojo combobox

Re: populate field attributes in dojo combobox

Re: populate field attributes in dojo combobox