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.



     <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>
      <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 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;">
          <th field="POLE_NO">PoleNumber</th>
          <th field="PNO">PNO</th>






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
  //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.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:' +;
   }, //c

   _onPointBtnClicked: function(){ //d
    var query = new Query();
    query.outSpatialReference =; //The basemap's spatial reference does not match the other layers. Set the query to match.
    query.returnGeometry = true;
    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}");

    } //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 =, 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.on("rowclick", onRowClickHandler);

            var myFeatureExtent = esri.graphicsExtent(resultFeatures);
                 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];
            //Set the infoTemplate.
            //Add graphic to the map graphics layer.
            var myFeatureExtent = esri.graphicsExtent(resultFeatures);
        //alert("No features were found using the provided search string.");
  } //d

  }); //b
}); //a