I am attempting to write the results of a map search to a datagrid in a widget for ESRI's Web App Builder. I'm following an example from ESRI that comes from here: Show find task results in a DataGrid | ArcGIS API for JavaScript
The problem I am having is that I cannot obtain the datagrid object. On line 124 I receive this error message:
"resultsgrid.setStore is not a function"
It is apparent from the debug code that I am not actually obtaining the "real" datagrid object, but I cannot discern how to get it.
HTML:
<div>
<div data-dojo-attach-point="SearchDiv" style="width:100%; height: 200px; background-color: #d9dde0";>
<select class="select-type" id="SelectType" data-dojo-attach-point="selecttype">
<option value="PoleNumber">Pole</option>
<option value="TransformerNumber">Transformer</option>
<option value="SWNO">SWNO</option>
</select>
<input type="text" class="tb-searchvalue" id="SearchValue" maxlength="10" data-dojo-attach-point="tbsearchvalue">
<button type="button" class="btn-search" data-dojo-attach-point="btnSearch" data-dojo-attach-event="onclick:_onPointBtnClicked">Search</button>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" id="ResultsContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
<table data-dojo-type="dojox/grid/DataGrid" data-dojo-attach-point="TestGrid" class="results-datagrid" data-dojo-id="gridresults" id="grid" data-dojo-props="rowsPerPage:'10', rowSelector:'20px'" style="width:100%; height: 200px; background-color: #8080c0;">
<thead>
<tr>
<th field="POLE_NO">PoleNumber</th>
<th field="PNO">PNO</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
JS:
define([
'dojo/parser',
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/_base/query',
'dojo/_base/html',
'dojo/_base/array',
'dojo/_base/fx',
'dojo/promise/all',
'dojo/Deferred',
'esri/map',
'esri/graphic',
'esri/graphicsUtils',
'dojo/on',
'jimu/BaseWidget',
'dojo/dom',
'dijit/registry',
'dojo/_base/connect',
'dojo/_base/array',
'dojo/data/ItemFileReadStore',
'esri/tasks/query',
'esri/tasks/QueryTask',
'esri/layers/FeatureLayer',
'jimu/MapManager',
'esri/geometry/Extent',
'esri/Color',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleFillSymbol'
],
function(parser, declare, lang, query, html, array, fx, all, Deferred, Map, Graphic, graphicsUtils, on, BaseWidget, dom, registry, connect, arrayUtils, ItemFileReadStore, Query, QueryTask, FeatureLayer, MapManager, Extent, Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) { //a
parser.parse();
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], { //b
// Custom widget code goes here
baseClass: 'jimu-widget-nessearch',
name: 'Search',
//this property is set by the framework when widget is loaded.
//name: 'CustomWidget',
//methods to communication with app container:
postMixInProperties: function(){
this.inherited(arguments);
this.operationalLayers = [];
var strClearResults = this.nls.clearResults;
// var tip = esriLang.substitute({clearResults:strClearResults},this.nls.operationalTip);
// this.nls.operationalTip = tip;
// if(this.config){
// this._updateConfig();
// }
},
startup: function() { //c
// this.mapIdNode.innerHTML = 'map id:' + this.map.id;
console.log('startup');
}, //c
_onPointBtnClicked: function(){ //d
var query = new Query();
query.outSpatialReference = this.map.spatialReference; //The basemap's spatial reference does not match the other layers. Set the query to match.
query.returnGeometry = true;
this.map.graphics.clear();
switch (dom.byId("SelectType").selectedIndex) { //e
case 0: //First
queryTask = new esri.tasks.QueryTask(<Layer 0);
query.outFields = ["POLE_NO", "PNO", "NODE_ID"];
query.where = "UPPER(POLE_NO) LIKE UPPER('%" + dom.byId("SearchValue").value + "%')";
infoTemplate = new esri.InfoTemplate("${POLE_NO}", "Pole Number : ${POLE_NO}<br/> PNO : ${PNO}<br/> NODE_ID : ${NODE_ID}");
break;
} //e
var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 204]), 1.5), new Color([0, 0, 255, 0.5]));
queryTask.execute(query, lang.hitch(this, showResults))
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
//Performance enhancer - assign featureSet array to a single variable.
//New Datagrid code***********************************************
//create array of attributes
var items = arrayUtils.map(featureSet, function (result) {
return result.feature.attributes;
});
//Create data object to be used in store
var data = {
identifier : "POLE_NO", //This field needs to have unique values
label : "PoleNumber", //Name field for display. Not pertinent to a grid but may be used elsewhere.
items : items
};
//Create data store and bind to grid.
store = new ItemFileReadStore({
data : data
});
var resultsgrid = registry.byId("grid");
//var resultsgrid = dom.byId("grid");
resultsgrid.setStore(store);
resultsgrid.on("rowclick", onRowClickHandler);
var myFeatureExtent = esri.graphicsExtent(resultFeatures);
this.map.setExtent(myFeatureExtent.expand(2.5));
//****************************************************************
var resultFeatures = featureSet.features;
if (resultFeatures.length > 0) {
for (var i = 0, il = resultFeatures.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(markerSymbol);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
this.map.graphics.add(graphic);
var myFeatureExtent = esri.graphicsExtent(resultFeatures);
this.map.setExtent(myFeatureExtent.expand(2.5));
}
}else{
//alert("No features were found using the provided search string.");
}
}
return;
} //d
}); //b
}); //a
