AnsweredAssumed Answered

Populate the combo box - Hi, i am new to the javascript development and am not able to populate the combobox in the following code , can some one please help

Question asked by chissarya on Jul 14, 2014
Latest reply on Jul 18, 2014 by jeff.pace

<!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>Feature Layer Only Map</title>

    <link rel="stylesheet" href="http://desktop101.ksrsac.com/KSRSAC/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

 

 

    <style>

        html,

        body {

            height: 100%;

            width: 100%;

            margin: 0;

        }

        body {

            background-color: #FFF;

            overflow: hidden;

            font-family: "Trebuchet MS";

        }

        #header {

            background-image: url(http://desktop101.ksrsac.com/KSRSAC/LefttPane/images/banner.jpg);

            background-repeat: repeat-x;

            border: solid 4px #224a54;

            color: #FFF;

            font-size: 18pt;

            text-align: left;

            font-weight: 700;

            height: 70px;

            margin: 2px;

        }

        #leftPane {

            background-color: #FFF;

            color: #3f3f3f;

            border: solid 2px #224a54;

            width: 20%;

            margin: 5px;

            padding: 2px;

        }

        #map {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

        .dijitTabInnerDiv {

            background-color: #ecefe4;

        }

        #tabs {

            padding: 5px;

        }

        #HomeButton {

            position: absolute;

            top: 200px;

            left: 280px;

            z-index: 50;

        }

    </style>

    <script>

        dojoConfig = {

            parseOnLoad: true

        }

    </script>

    <script src="http://desktop101.ksrsac.com/KSRSAC/arcgis_js_api/library/3.9/3.9/js/dojo/dojo/dojo.js"></script>

 

 

 

 

    <script src="http://js.arcgis.com/3.9/"></script>

    <script>

        require([

            "dojo/dom-construct",

            "esri/map",

            "esri/layers/FeatureLayer",

            "esri/geometry/Extent",

            "esri/InfoTemplate",

            "esri/dijit/HomeButton",

            "esri/dijit/OverviewMap",

            "dojo/parser",

            "dojo/store/Memory",

            "dijit/form/ComboBox",

 

  "esri/tasks/QueryTask",

  "esri/tasks/Query",

  "dijit/layout/BorderContainer",

            "dijit/layout/TabContainer",

            "dijit/layout/ContentPane",

            "dojo/domReady!"

 

 

        ], function (

            domConstruct,

            Map,

            FeatureLayer,

            Extent,

            InfoTemplate,

            HomeButton,

            OverviewMap,

            parser,

            Memory,

            ComboBox

 

 

 

 

        ) {

            parser.parse();

            var bounds = new Extent({

                "xmin": 7583508.66876001,

                "ymin": 754519.306341084,

                "xmax": 10843390.8045407,

                "ymax": 4451565.92247309,

                "spatialReference": {

                    "wkid": 3857

                }

            });

 

 

            var map = new Map("map", {

                extent: bounds

            });

 

 

            var url = "http://164.100.133.66/ArcGIS/rest/services/Basemap/StateBasemap/MapServer/6";

            var template = new InfoTemplate("Tank Information System", "<tr>State Name: <td>${STATE}</tr></td><br><tr>Objectid:<td>${OBJECTID}</tr></td><br><tr>Shape length:<td>${Shape_Length}</tr></td><br><tr>Shape Area:<td>${Shape_Area}sq Meters</tr></td>");

 

 

            var fl = new FeatureLayer(url, {

                id: "6",outFields: ["*"],

                infoTemplate: template

            });

 

 

            //var overviewMapDijit = new OverviewMap({ map: map, visible: true});

            var home = new HomeButton({

                map: map

            }, "HomeButton");

 

 

 

 

            //QUERY TASK FOR DROP DOWN

            function init() {

                queryTask = new esri.tasks.QueryTask("http://164.100.133.66/ArcGIS/rest/services/Basemap/StateBasemap/MapServer/6");

                var query = new Query();

                query = new esri.tasks.Query();

                query.returnGeometry = false;

                query.outFields = ["STATE"];

                query.where = "STATE<> ''";

                queryTask.execute(query, populateList);

            }

 

 

 

 

            function populateList(results) {

                //Populate the ComboBox with unique values

                var zone;

                var values = [];

                var testVals = {};

 

 

                //Add option to display all zoning types to the ComboBox

                values.push({name: "ALL"

                   

                })

 

 

                //Loop through the QueryTask results and populate an array

                //with the unique values

                var features = results.features;

                dojo.forEach(features, function (feature) {

                    zone = feature.attributes.STATE;

                    if (!testVals[zone]) {

                        testVals[zone] = true;

                        values.push({ name: zone});

                                   

                    }

                });

                //Create a ItemFileReadStore and use it for the

                //ComboBox's data source

                var dataItems = {

                    identifier: 'name',

                    label: 'name',

                    items: values

                };

                var store = new Memory({data: dataItems});

                dijit.byId("mySelect").store = store;

            }

 

 

            map.addLayer(fl);

            //overviewMapDijit.startup();

            home.startup();

  init.startup();

dojo.addOnLoad(init);

            });

 

 

    </script>

</head>

 

 

<body class="claro">

    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">

 

 

        <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">

            <div id="title">"Tank Information System"

            </div>

        </div>

 

 

        <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">

            <div data-dojo-type="dijit.layout.TabContainer">

                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Table of Content', selected:'true'">

                    Content for the first tab

                </div>

                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Search'">

                    Content for the second tab

                    <select id="mySelect" dojoType="ComboBox" style="width:200px;font-size:16px;"

          autoComplete="true"

             forceValidOption="false"

             value="Select Zoning Type"

             onchange="applyLayerDef(this)" >

                    </select>

                </div>

            </div>

        </div>

        <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

        <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">

            <span id="dataSource">

        </span>

        </div>

        <div id="HomeButton"></div>

    </div>

</body>

 

 

</html>

Outcomes