multiselect widget not populating

KaitlynnDavis · ‎12-10-2013

For those who may be dojo savvy: I am trying to build a multiselect widget to place in an attribute inspector and it is not populating with my options. It just stays blank. Does anyone familiar with the widget see anything wrong with the way I set it up?

[HTML]
var testm = dojo.byId('testmulti');
var op1 = dojo.doc.createElement('option');
op1.innerHTML = "option1";
op1.value = "option1";
testm.appendChild(op1);
var op2 = dojo.doc.createElement('option');
op1.innerHTML = "option2";
op1.value = "option2";
testm.appendChild(op2);

var myMultiSelect = new dijit.form.MultiSelect({ name: 'testmulti', id: 'testmulti', style: "width:150px;"}, testm);

var layers = dojo.map(results, function(result) {
return {
featureLayer:result.layer,
showAttachments:true,
showDeleteButton:true,
fieldInfos:[
{fieldName: "TEST", visible: true,'label':"test 1", 'customField': myMultiSelect},
{fieldName: "TEST2", visible: true, 'label':"test 2"}
]
};
});
[/HTML]

KellyHutchins · ‎12-11-2013

Looks like you need to call startup on your multiselect after creating it. Here's a quick sample showing how to populate a multiselect widget with the fields in a layer.


<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer On Demand</title> 

    <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">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      #ms_panel{
        z-index: 30;
        position: absolute;
        top:30px;
        right:30px;
      }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script> 
    <script> 
      var map;
      require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "dijit/form/MultiSelect", "dojo/_base/array", "dojo/dom-construct", "dojo/parser", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, InfoTemplate, FeatureLayer, MultiSelect, array, domConstruct,
        parser, dom
      ) {
        parser.parse();
        map = new Map("mapDiv", { 
          basemap: "national-geographic",
          center: [-96.541, 38.34],
          zoom: 6
        });
       
        map.on("load", initOperationalLayer);

        function initOperationalLayer() {
          var infoTemplate = new InfoTemplate("${state_name}", "Population (2000):  ${pop2000:NumberFormat}");
          var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            infoTemplate: infoTemplate
          });
          
          featureLayer.on("load", function(){
    
            var select = dom.byId("multiselectDiv");

            var fields = featureLayer.fields;
            //create an option for each field
            array.forEach(fields, function(field){
              var option = domConstruct.create("option",{
                "innerHTML": field.name,
                "value": field.name
              });
             select.appendChild(option);
            });

            var multiselect = new MultiSelect({
              name: "layerFields", 
              multiple:true
            }, select);
            multiselect.startup();

          });

          map.addLayer(featureLayer);
          map.infoWindow.resize(155,75);
        }
      });
    </script> 
  </head> 
  <body class="claro"> 
    <div id="mapDiv"></div>
    <div id="ms_panel">
      <select id="multiselectDiv"></select>
    </div>

  </body> 
</html>

KaitlynnDavis · ‎01-29-2014

I've gotten back to this after a little time away from it and have accomplished creating a multiselect widget as a field for the editor using the following:

var test = win.doc.createElement('select');
var testm = dom.byId(test);
var op1 = win.doc.createElement('option');
op1.innerHTML = "optionone";
op1.value = "optionone";
testm.appendChild(op1);
var op2 = win.doc.createElement('option');
op2.innerHTML = "optiontwo";
op2.value = "optiontwo";
testm.appendChild(op2);

var myMultiSelect = new MultiSelect({ name: 'testmulti', id: 'testmulti', style: "width:150px;"}, testm);

Because Dojo's multiselect widget is based off the native select element, you first have to create a select, then append option elements to it, and finally assign the select you created to the multiselect. After setting it up, 'myMultiSelect' is then assigned to the customField property when creating the editor fields.

Now that it's created though I'm having trouble syncing my selections to my database. The trouble is that multiselects pass values as an array of strings, instead of a plain string. I'm pretty sure my database doesn't like this because the error code I get for my update response is 1016, which the esri docs equate to "setting of value failed". Is there something I can do client side to ensure the selections made in the multiselect widget are passed as a comma delimited string? On the ArcMap end of things, the field my values should be going into is a String field, and I don't see any other format types that would be suitable for arrays, so I figure a code-based solution is the best way to go

KeithGerhartz1 · ‎01-20-2015

Kaitlynn, Were you able to succeed in doing this. If so, then could you post your code? Thank you!