AnsweredAssumed Answered

Struggling to populate FilteringSelect in my custom widget

Question asked by correaj on Mar 21, 2014
Latest reply on Mar 26, 2014 by jgrayson-esristaff
Hello all,

I'm trying to create a widget that filters down options based on attributes. This widget isn't near completion because I cannot get the first item to populate. As you all know, you cannot reference your nodes using byId() when you're referencing a template mixin but rather reference it by using this.data-dojo-attach-point_name. I am doing just that and seem to be able to add child option nodes to my FilteringSelect drop down menu but only outside the queryTask.execute() function within the postCreate function. Somehow the reference to my FilteringSelect element gets lost when entering the function call within queryTask.execute(query, addItem) and nothing gets added. I've highlighted in green what seems to work and then highlighted in red what doesn't. Can someone please share a way that I can actually reference the attach-point of my FilteringSelect and add children to it within the scope of the execute function? Help would be appreciated.



----- template -------
<div>
<label>County:</label>
<br>
<select data-dojo-type="dijit/form/FilteringSelect" data-dojo-attach-point="fsCounty" >
</select>
<br>
<label>Township:</label>
<br>
<select data-dojo-type="dijit/form/FilteringSelect" data-dojo-attach-point="fsTownship">
</select>
</div>
--------------------

require([
"dojo/_base/declare", "dojo/_base/array", "dojo/dom", "dojo/dom-construct", "dojo/parser", "dojo/ready", "dojo/data/ItemFileReadStore",
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./widget/template/SearchFormTemplate.html",
"esri/layers/FeatureLayer", "esri/tasks/query", "esri/tasks/QueryTask", "dijit/form/FilteringSelect"
], function( declare, array, dom, domConstruct, parser, ready, ItemFileReadStore, _WidgetBase, TemplatedMixin, template, FeatureLayer, Query, QueryTask ){

declare( "AttributeFilter", [_WidgetBase, TemplatedMixin ], {

templateString: template,

options: {
theme: "nihilo"
},

_map: null,
_layer: "http://services..............",
_criteria1: "COUNTY",
_criteria2: "NAME",
_countyOptionArray: null,
_selectorOne: null,

constructor: function(){

this._countyOptionArray = new Array();

},
postCreate: function() {

var query = new Query();
query.outFields = [this._criteria1];
query.where = "COUNTY IS NOT NULL";
query.returnGeometry = false;

var queryTask = new QueryTask(this._layer);

var fsCounty = this.fsCounty;

var option = document.createElement("option");
option.text = "Select a County";

fsCounty.add(option);


queryTask.execute(query, function(results){

var zone;
var values = [];
var testVals = {};

var features = results.features;
array.forEach(features, function (feature) {

zone = feature.attributes.COUNTY;

if (!testVals[zone]) {
testVals[zone] = true;
values.push({ name: zone });
}
});


//ComboBox's data source
var dataItems = {
identifier: 'name',
label: 'name',
items: values
};

array.forEach(dataItems.items, addItem );

});

function addItem(item){

var option = document.createElement("option");
option.text = item.name;
option.value = item.name;

console.log(option.text);

fsCounty.add(option);


}
},
setMap: function (m){
this._map = m;
},

selectPopulate: function(){

},
selectZoom: function(){

}

});

ready(function(){

parser.parse();
});

});

Outcomes