Return Attributes to HTML DIV

jaykapalczynski · ‎08-31-2018

Ideas on how to modify this example to return at least one attribute from the layers into an html DIV instead of the length or Count of selected features.

ArcGIS API for JavaScript Sandbox

Preferable I would like:

1. To return attributes values for each record into an HTML Div Tag.

2. Be able to select the graphic and highlight the table record

3. Be able to click the table record and highlight the feature in the map

Anyone have a basic example of this?

Click Map, Create Buffer for selection, Return results into controlled DIV tag, Have interaction between the map and the table of results.

jaykapalczynski · ‎09-05-2018

ok....first not sure how to do that so will have to research...second I want to test if the line or any part of it is within the circle....not sure how to test this....I am going to have to do the same for a polygon. If any part of the polygon is in the circle.

jaykapalczynski · ‎09-05-2018

Thank you for your help and comments by the way...much appreciated.

RobertScheitlin__GISP · ‎09-05-2018

Then you need to re-write a bit of your app and remove all the performance enhancing parts of querying the circles extent and then using circle.contains and just to a query of the actual circle geometry from the start. Because a circle is actually a polygon with a lot of points that form a circle you will like have to add a proxy to your app as the circles geometry (all those points) might exceed the limit of a standard GET request.

jaykapalczynski · ‎09-05-2018

Thanks....this is whats frustrating about ESRI....here is an example of select with feature but if you actually want to select a line or polygon this wont work and we dont have an example...Would be nice if they stated that it wont work on lines or polys at the top before I chase a solution down the rabbit hole......no idea how to move on from here but thank you for your help...

RobertScheitlin__GISP · ‎09-05-2018

Jay,

The sample that esri provided is actually a really good sample for optimized querying of point features. The standard way of querying a FL using Geometry is pretty basic so there is not a sample for just that. Here is the sample modified.

In this sample I select the block points and block groups (polygons that intersect)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #container {
      height: 100%;
      visibility: hidden;
    }

    #bottomPane {
      height: 200px;
    }

    #grid {
      height: 100%;
    }

    .dgrid {
      border: none;
    }

    .field-id {
      cursor: pointer;
    }
  </style>

  <script src="http://js.arcgis.com/3.25/"></script>
  <script>
    // load dgrid, esri and dojo modules
    // create the grid and the map
    // then parse the dijit layout dijits
    require([
      "dgrid/OnDemandGrid",
      "dgrid/Selection",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/dom-style",
      "dijit/registry",
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/Color",
      "esri/config",
      "esri/renderers/SimpleRenderer",
      "esri/tasks/QueryTask",
      "esri/tasks/query",
      "esri/geometry/Circle",
      "esri/graphic",
      "esri/dijit/PopupTemplate",
      "esri/InfoTemplate",
      "dojo/_base/declare",
      "dojo/number",
      "dojo/on",
      "dojo/_base/lang",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Grid,
      Selection,
      Memory,
      array,
      domStyle,
      registry,
      Map,
      FeatureLayer,
      SimpleMarkerSymbol,
      SimpleLineSymbol,
      SimpleFillSymbol,
      Color,
      esriConfig,
      SimpleRenderer,
      QueryTask,
      Query,
      Circle,
      Graphic,
      PopupTemplate,
      InfoTemplate,
      declare,
      dojoNum,
      on,
      lang,
      parser
    ) {
      esriConfig.defaults.io.proxyUrl = "proxy/Proxy.ashx"
      parser.parse();

      // create the dgrid
      window.grid = new(declare([Grid, Selection]))({
        // use Infinity so that all data is available in the grid
        bufferRows: Infinity,
        columns: {
          "id": "ID",
          "popuplation": {
            "label": "2000 Population",
            "formatter": dojoNum.format
          },
          "households": "Households",
          "houseunits": "House Units"
        }
      }, "grid");
      // add a click listener on the ID column
      grid.on(".field-id:click", selectBlkPnt);

      window.map = new Map("map", {
        basemap: "streets",
        center: [-95.249, 38.954],
        zoom: 14,
      });

      window.blockUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0";
      window.blockGroupURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1";
      window.outFields = ["OBJECTID", "POP2000", "HOUSEHOLDS", "HSE_UNITS"];
      window.bgoutFields = ["*"];


      var fl = new FeatureLayer(window.blockUrl,{
        id: "blockPnts",
        outFields: window.outFields
      });

      var fl2 = new FeatureLayer(window.blockGroupURL,{
        id: "blockGroup",
        outFields: window.bgoutFields
      });

      // Selection symbol used to draw the selected census block points within the buffer polygon
      var symbol = new SimpleMarkerSymbol(
        SimpleMarkerSymbol.STYLE_CIRCLE,
        12,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_NULL,
          new Color([247, 34, 101, 0.9]),
          1
        ),
        new Color([207, 34, 171, 0.5])
      );
      fl.setSelectionSymbol(symbol);

      // Selection symbol used to draw the selected census block points within the buffer polygon
      var symbol2 = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_NULL,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          new Color([247, 0, 0, 1]),
          3
        ),
        new Color([0, 0, 0, 0.5])
      );
      fl2.setSelectionSymbol(symbol2);

      // Make unselected features invisible
      var nullSymbol = new SimpleMarkerSymbol().setSize(0);
      fl.setRenderer(new SimpleRenderer(nullSymbol));

      // Make unselected features invisible
      var nullSymbol2 = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL).setOutline(null);
      fl2.setRenderer(new SimpleRenderer(nullSymbol2));

      fl.on("click", selectGrid);

      // change cursor to indicate features are click-able
      fl.on("mouse-over", function() {
        window.mapClickEvt.pause();
        map.setMapCursor("pointer");
      });
      fl.on("mouse-out", function() {
        setTimeout(function(){
          window.mapClickEvt.resume();
        }, 800);

        map.setMapCursor("default");
      });

      map.addLayer(fl);
      map.addLayer(fl2);

      var circleSymb = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_NULL,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
          new Color([105, 105, 105]),
          2
        ), new Color([255, 255, 0, 0.25])
      );
      var circle;

      // When the map is clicked create a buffer around the click point of the specified distance
        window.mapClickEvt = on.pausable(map, "click", function(evt){
        circle = new Circle({
          center: evt.mapPoint,
          geodesic: true,
          radius: 1,
          radiusUnit: "esriMiles"
        });
        map.graphics.clear();
        var graphic = new Graphic(circle, circleSymb);
        map.graphics.add(graphic);

        var query = new Query();
        query.geometry = circle;
        // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
        fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer);
        fl2.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer2)
      });

      function selectInBuffer2(features){
        console.info(features);
        // var data = array.map(features, function(feature) {
        //   return {
        //     // property names used here match those used when creating the dgrid
        //     "id": feature.attributes[window.outFields[0]],
        //     "popuplation": feature.attributes[window.outFields[1]],
        //     "households": feature.attributes[window.outFields[2]],
        //     "houseunits": feature.attributes[window.outFields[3]]
        //   };
        // });
        // var memStore = new Memory({
        //   data: data
        // });
        // window.grid.set("store", memStore);
      }

      function selectInBuffer(features){
        var data = array.map(features, function(feature) {
          return {
            // property names used here match those used when creating the dgrid
            "id": feature.attributes[window.outFields[0]],
            "popuplation": feature.attributes[window.outFields[1]],
            "households": feature.attributes[window.outFields[2]],
            "houseunits": feature.attributes[window.outFields[3]]
          };
        });
        var memStore = new Memory({
          data: data
        });
        window.grid.set("store", memStore);
      }

      map.on("load", function(evt) {
        // show the border container now that the dijits
        // are rendered and the map has loaded
        domStyle.set(registry.byId("container").domNode, "visibility", "visible");
      });

      // fires when a row in the dgrid is clicked
      function selectBlkPnt(e) {
        map.graphics.clear();
        var fl = map.getLayer("blockPnts");
        var query = new Query();
        query.objectIds = [parseInt(e.target.innerHTML, 10)];
        query.returnGeometry=true;
        fl.queryFeatures(query, function(results){
          var gra = results.features[0].clone();
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE,
            12,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_NULL,
              new Color([247, 247, 0, 1]),
              1
            ),
            new Color([247, 247, 0, 0.9])
          );
          gra.setSymbol(symbol);
          map.graphics.add(gra);
        });

      }

      // fires when a feature on the map is clicked
      function selectGrid(e) {
        var id = e.graphic.attributes.OBJECTID;
        // select the corresponding row in the grid
        // and make sure it is in view
        grid.clearSelection();
        grid.select(id);
        grid.row(id).element.scrollIntoView();
      }
    });
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
    <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
      <div id="grid"></div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jaykapalczynski · ‎09-05-2018

Thanks for your help....tweaked a couple things on your example to get my grids fired and the proper functions called.....CHEERS and thank you for your thoughts and comments...

Here is my final (with the help of Robert of course) if anyone is interested

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
/* dgrid formatting */
    #gridWMAPoint {
      height: 100%;
       width:50%;
    }
    #gridWMALine {
      height: 100%;
       width:50%;
    }     
     .dgrid-row-odd {
          background: #F2F5F9;
     }     
     .dgrid-cell {
          border: none;
     }
    .dgrid {
      border: none;
    }
     .dgrid-column-name {
        width: auto; 
     }
/* Location of dgrid in the site - Page formatting */     
    #container {
      height: 100%;
      visibility: hidden;
    }
    #bottomPane {
      height: 200px;
    }
     .sides{
       margin:0;
     }
     .left{
       float:left;
       width:75%;
       overflow:hidden;
     }
     .right{
       float:left;
       width:25%;
       overflow:hidden;
     } 
/* Change cursor on hover of selected feature */
    .field-id {
      cursor: pointer;
    }

  </style>

  <script src="http://js.arcgis.com/3.25/"></script>
  <script>

// LOAD DGRID, ESRI and DOJO MODULES
    require([
      "dgrid/OnDemandGrid","dgrid/Selection","dojo/store/Memory","dojo/_base/array","dojo/dom-style","dijit/registry",
      "esri/map","esri/layers/FeatureLayer","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol",
      "esri/Color","esri/renderers/SimpleRenderer","esri/tasks/QueryTask","esri/tasks/query","esri/geometry/Circle","esri/graphic",
      "esri/dijit/PopupTemplate","esri/InfoTemplate","dojo/_base/declare","dojo/number","dojo/on","dojo/_base/lang","dojo/parser",
      "dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/domReady!"
    ], function(
      Grid,Selection,Memory,array,domStyle,registry,
      Map,FeatureLayer,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,
      Color,SimpleRenderer,QueryTask,Query,Circle,Graphic,
      PopupTemplate,InfoTemplate,declare,dojoNum,on,lang,parser
    ) {

      parser.parse();



// DEFINE THE TWO GRIDS BEING USED BELOW.     ---------------------------------------------------------------------------------------          

     // WMA POINT GRID
      window.gridWMAPoint = new(declare([Grid, Selection]))({
        // use Infinity so that all data is available in the grid
        bufferRows: Infinity,  
               subRows:[
                    [
                         {field: "_item", label: "image", rowspan: 2,
                           formatter: function(item){
                              var btn = new dijit.form.Button({
                                   label: "Edit"
                              });
                           return btn;
                           }
                         },
                         {field:"id", label: "ID", rowSpan: 2},
                         {field:"TYPE", label: "type"},                         
                         {field:"WMA", label: "wma" }
                    ],
                    [
                         {field:"Rotate_Val", label: "Rotate Val"},
                         {field:"FG_Symbol", label:  "FG Symbol"}
                    ]     
               ]
      }, "gridWMAPoint");
      // add a click listener on the ID column
      gridWMAPoint.on(".field-id:click", selectWMAPointGrid);

     // WMA LINE GRID
      window.gridWMALine = new(declare([Grid, Selection]))({
        // use Infinity so that all data is available in the grid
        bufferRows: Infinity,  
               subRows:[
                    [
                         {field:"id", label: "ID", rowSpan: 2},
                         {field:"TYPE", label: "type"},                         
                         {field:"WMA", label: "wma" }
                    ],
                    [
                         {field:"Label", label: "Label"},
                         {field:"Name", label:  "Name"}
                    ]     
               ]
      }, "gridWMALine");
      // add a click listener on the ID column
      gridWMALine.on(".field-id:click", selectWMALineGrid);       
 

// DEFINE MAP AND PARAMETERS - LOAD FUNCTION - DEFINE LOCATION MAP -------------------------------------------------------------
       
       window.map = new Map("map", {
          basemap: "gray",
          center: [-79.665, 37.629],
          zoom: 8,
          logo: false,
          showLabels : true
      });  
     // On Map load   
      map.on("load", function(evt) {
        // show the border container now that the dijits
        // are rendered and the map has loaded
        domStyle.set(registry.byId("container").domNode, "visibility", "visible");
      });
     // Display WMAs for spatial reference in the map
       var WMAs = new FeatureLayer("https://xxxxxx/arcgis/rest/services/Projects/Locations/MapServer/6", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          id: "wmas",
          opacity: .5,
          visible: true
       });            
       map.addLayer(WMAs);       

            
// DEFINE SELET SYMBOLOGY FOR POINT - LINE - POLYGON -------------------------------------------------------------------------------            
      
     // Selection symbol POINTS
      var symbolPoint = new SimpleMarkerSymbol(
        SimpleMarkerSymbol.STYLE_CIRCLE,
        12,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_NULL,
          new Color([247, 34, 101, 0.9]),
          1
        ),
        new Color([207, 34, 171, 0.5])
      );
     // Selection symbol LINE
       var symbolLine = new SimpleLineSymbol(
         SimpleLineSymbol.STYLE_SOLID,
        new Color([207, 34, 171, 0.9]), 3);
    // Selection symbol POLYGON
      var symbolPolygon = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_NULL,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          new Color([247, 0, 0, 1]),
          3
        ),
        new Color([0, 0, 0, 0.5])
      );
                  
           
// DEFINE FEATURES THAT ARE GOING TO BE SELECTED ------------------------------------------------------------------------------------       

     // WMA POINT   
      window.WMAPointUrl = "https://xxxxxx/arcgis/rest/services/Projects/Locations/MapServer/2";
      window.PointoutFields = ["OBJECTID", "ID", "TYPE", "WMA", "Rotate_Val", "FG_Symbol", "Lat"];
      var WMAPoints = new FeatureLayer(window.WMAPointUrl,{
        id: "idWMAPoints",
        outFields: ["*"],
          visible: true
      });
      // Selection symbol used to draw the selected census block points within the buffer polygon
      WMAPoints.setSelectionSymbol(symbolPoint);
      // Make POINT unselected features invisible
      var nullSymbol = new SimpleMarkerSymbol().setSize(0);
      WMAPoints.setRenderer(new SimpleRenderer(nullSymbol));
      WMAPoints.on("click", selectWMAPoints);
      // change cursor to indicate features are click-able
      WMAPoints.on("mouse-over", function() {
        window.mapClickEvt.pause();
        map.setMapCursor("pointer");
      });
      WMAPoints.on("mouse-out", function() {
        setTimeout(function(){
          window.mapClickEvt.resume();
        }, 800);
        map.setMapCursor("default");
      });
      map.addLayer(WMAPoints);


     // WMA LINE            
       window.WMALineUrl = "https://xxxxxx/arcgis/rest/services/Projects/Locations/FeatureServer/4";
      window.LineoutFields = ["OBJECTID", "ID", "Type", "WMA", "Label", "Name"];            
       var WMALines = new FeatureLayer(window.WMALineUrl,{
        id: "idWMALines",
        outFields: ["*"]
      });            
      // Selection symbol used to draw the selected lines
       WMALines.setSelectionSymbol(symbolLine);
      // Make LINE unselected features invisible
      var nullSymbol = new SimpleLineSymbol().setWidth(0);
      WMALines.setRenderer(new SimpleRenderer(nullSymbol));
      WMALines.on("click", selectWMALines);       
      // change cursor to indicate features are click-able
      WMALines.on("mouse-over", function() {
        window.mapClickEvt.pause();
        map.setMapCursor("pointer");
      });
      WMALines.on("mouse-out", function() {
        setTimeout(function(){
          window.mapClickEvt.resume();
        }, 800);
        map.setMapCursor("default");
      });
      map.addLayer(WMALines);       
       
       
       
       
// CREATE CIRCLE SMOBOLOGY FOR BUFFER - MAP CLICK TO CREATE BUFFER AND CALL FUNTIONS TO SELECT FEATURES AND POPULATE DGRID -----------            
      // Symbology of the buffer circle
      var circleSymb = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_NULL,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
          new Color([105, 105, 105]),
          2
        ), new Color([255, 255, 0, 0.25])
      );
      var circle;

      // When the map is clicked create a buffer around the click point of the specified distance
      window.mapClickEvt = on.pausable(map, "click", function(evt){
        circle = new Circle({
          center: evt.mapPoint,
          geodesic: true,
          radius: .5,
          radiusUnit: "esriMiles"
        });
        map.graphics.clear();
        var graphic = new Graphic(circle, circleSymb);
        map.graphics.add(graphic);

        var query = new Query();
        query.geometry = circle;

          // Query WMA Points
            WMAPoints.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBufferPoints);
          // Query WMA Lines
        WMALines.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBufferLines);
     });

     
 
//=== FUNCTION CALLED FROM ABOVE - SELECT FEATURES + POPULATE DGRID =================================================================

     // WMA POINT GRID       
      function selectInBufferPoints(features){
        var data = array.map(features, function(feature) {
            return {
              // property names used here match those used when creating the dgrid
              "id": feature.attributes[PointoutFields[0]],
              "TYPE": feature.attributes[PointoutFields[2]],
              "WMA": feature.attributes[PointoutFields[3]],
              "Rotate_Val": feature.attributes[PointoutFields[4]],
              "FG_Symbol": feature.attributes[PointoutFields[5]]
                 };
          });
            alert(JSON.stringify(data));
          var memStore1 = new Memory({
            data: data
          });
          gridWMAPoint.set("store", memStore1);
      }

     // WMA LINE GRID       
       function selectInBufferLines(features){
          var data = array.map(features, function(feature) {
            return {
              // property names used here match those used when creating the dgrid
              "id": feature.attributes[LineoutFields[0]],
              "TYPE": feature.attributes[LineoutFields[1]],
              "WMA": feature.attributes[LineoutFields[2]],
              "Label": feature.attributes[LineoutFields[3]],
              "Name": feature.attributes[LineoutFields[4]]
                 };
          });
            alert(JSON.stringify(data));
          var memStore2 = new Memory({
            data: data
          });
          gridWMALine.set("store", memStore2);
      }

       
//=== INTERACTION BETWEEN MAP AND DGRID - VISA VERSA =================================================================
     
     // WMA POINT GRID
      // fires when a row in the dgrid is clicked
      function selectWMAPointGrid(e) {
        map.graphics.clear();
        var WMAPoints = map.getLayer("idWMAPoints");
        var query = new Query();
        query.objectIds = [parseInt(e.target.innerHTML, 10)];
        query.returnGeometry=true;
        WMAPoints.queryFeatures(query, function(results){
          var gra = results.features[0].clone();
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE,
            12,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_NULL,
              new Color([247, 247, 0, 1]),
              1
            ),
            new Color([247, 247, 0, 0.9])
          );
          gra.setSymbol(symbol);
          map.graphics.add(gra);
        });

      }
      // fires when a feature on the map is clicked
      function selectWMAPoints(e) {
        var id = e.graphic.attributes.OBJECTID;
        // select the corresponding row in the grid
        // and make sure it is in view
        gridWMAPoint.clearSelection();
        gridWMAPoint.select(id);
        gridWMAPoint.row(id).element.scrollIntoView();
      }
       
     // WMA LINE GRID
      // fires when a row in the dgrid is clicked
      function selectWMALineGrid(e) {
        map.graphics.clear();
        var fl2 = map.getLayer("idWMALines");
        var query = new Query();
        query.objectIds = [parseInt(e.target.innerHTML, 10)];
        query.returnGeometry=true;
        fl2.queryFeatures(query, function(results){
          var gra = results.features[0].clone();
           var symbol = new SimpleLineSymbol(
               SimpleLineSymbol.STYLE_SOLID,
               new Color([247,247,0,.9]),
               5
               );
          gra.setSymbol(symbol);
          map.graphics.add(gra);
        });
      }       
      // fires when a feature on the map is clicked
      function selectWMALines(e) {
        var id = e.graphic.attributes.OBJECTID;
        // select the corresponding row in the grid
        // and make sure it is in view
        gridWMALine.clearSelection();
        gridWMALine.select(id);
        gridWMALine.row(id).element.scrollIntoView();
      }       

       
    });
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
    <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
               <div id="gridWMAPoint" class="left"></div>    
               <div id="gridWMALine" class="right"></div>
    </div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jaykapalczynski · ‎09-06-2018

Question. I have this working by itself. I added this to an existing app and put the code within some accordion panes.

I click the map and it alerts me to the data returns.
I go to where the grids are and nothing is showing.
I click on the header (id) and then the data shows up.

I click in the map again and the data changes but the dgrid still has the old data.
I click the header again and the dgrid updates.

trying to figure out why and/or some way of forcing the data to update or show initially...

Any thoughts?

Funny is that the original page with just this code updates fine on the fly...

The data selection and feature selections update in real time...its just the dgrid update that is not occurring. I have to click on the header to get the results to show and then click on it again after a map click to get the dgrid to update with the new results....but again the feature selection and highlighting is occurring in real time.

jaykapalczynski · ‎09-06-2018

I did this and seems to have done the trick

gridWMAPoint.set("store", memStore);
gridWMAPoint.refresh();