AnsweredAssumed Answered

Unable to obtain datagrid object in javascript

Question asked by tjones on Aug 5, 2015
Latest reply on Jan 26, 2016 by rcsellman

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[i];
            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

Outcomes