topic SYNCHRONIZING MAP AND DATA GRID SAMPLE in ArcGIS JavaScript Maps SDK Questions

SYNCHRONIZING MAP AND DATA GRID SAMPLE

JuneAcosta — Wed, 21 Apr 2010 20:28:42 GMT

I have been testing the various samples as a way to learn how to customize with the Javascript API. I came across the Synchronizing Map and Data Sample and I tried to modfiy it to use a line layer instead of a polygon. I can't seem to get the selection in the grid to sync up with the features in the map. Here is the sample code with my changes:

      var map,selectionLayer,majorProject;
      var resizeTimer;

      function init() {
        var initExtent = new esri.geometry.Extent(-161.015,-45.489,-35.156,91.0925,
                new esri.SpatialReference({"wkid":4236}));
        map = new esri.Map("map",{extent:initExtent});
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

//add the ArcGIS Online Streetmap service, hide it so the imagery appears first
        majorProject = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisweb03v/ArcGIS/rest/services/majorProject/MapServer");
        map.addLayer(majorProject);

        //define default and selected symbology
        dojo.connect(map,"onLoad",function(){
          selectionLayer = new esri.layers.GraphicsLayer();
          selectionLayer.setRenderer(new esri.renderer.SimpleRenderer(new esri.symbol.SimpleLineSymbol().setColor(
             new dojo.Color([255,255,0]))));

   //selectionLayer.setRenderer(new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255])).setWidth(5));
          map.addLayer(selectionLayer);

          var defaultRenderer = new esri.renderer.SimpleRenderer(
            new esri.symbol.SimpleLineSymbol().setColor( new dojo.Color([0,0,0])));
          map.graphics.setRenderer(defaultRenderer);
          executeTask();
        });
        //Highlight map graphic when hovering over row
        dojo.connect(grid, "onMouseOverRow", function(evt){
          if(evt.rowIndex === -1){
            return;
          }
          var rowId   = grid.getItem(evt.rowIndex).OBJECTID;
          selectionLayer.clear();
          //add a new graphic to the selection layer
          dojo.some(map.graphics.graphics,function(graphic){
          if ((graphic.attributes) && graphic.attributes.OBJECTID === rowId) {
            var selectedState = new esri.Graphic(graphic.geometry).setAttributes(
                graphic.attributes);
            selectionLayer.add(selectedState);
            return true;
          }
         });
       });

        dojo.connect(grid,"onMouseOutRow",function(){
         selectionLayer.clear();
        });

        //change the row's background color to yellow on mouse hover
        dojo.connect(grid,"onStyleRow",function(row){
          if (row.over) {
            row.customStyles+='background-color:#FFFF00;';
          }
        });

        //add logic to resize the map when the browser size changes
        dojo.connect(dijit.byId('map'), 'resize', function() {
          resizeMap();
        });

        //modify the grid so only the STATE_NAME field is sortable
        grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } };
      }

      function executeTask(){
        //var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
var queryTask = new esri.tasks.QueryTask("http://gisweb03v/ArcGIS/rest/services/majorProject/MapServer/1");
        var query = new esri.tasks.Query();
        query.returnGeometry=true;
        query.outFields = ["NAME","STATUS","OBJECTID"];
        query.where = "1=1";
        dojo.connect(queryTask,"onComplete",function(featureSet){
          //build an array of attributes
          var items = dojo.map(featureSet.features,function(feature){
            return feature.attributes;
          });
          var data = {
              identifier:"OBJECTID",
              items:items};
          store = new dojo.data.ItemFileReadStore({data:data});
          grid.setStore(store);
          grid.setSortIndex(1,"true"); //sort on the state name
          dojo.forEach (featureSet.features, function(feature) {
            map.graphics.add(feature);
          });
      });

        dojo.connect(map.graphics,"onMouseOver",function(evt){
          selectionLayer.clear();
          //loop through the grid and find the row associated with the graphic
          for (var i=0, il=grid.rowCount; i<il; i++) {
            if((grid.getItem(i)) && grid.getItem(i).OBJECTID === evt.graphic.attributes.OBJECTID){
             grid.rows.setOverRow(i);
             grid.scrollToRow(i);
             var selectedState = new esri.Graphic(evt.graphic.geometry).setAttributes(
                 evt.graphic.attributes);
             selectionLayer.add(selectedState);
             break;
            }
           }
         });

        dojo.connect(map.graphics,"onMouseOut",function(evt){
         selectionLayer.clear();
         grid.rows.setOverRow(-1);
         });
        queryTask.execute(query);
    }

    //Handle resize of browser
    function resizeMap() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
      }, 800);
    }

dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer"
    design="headline" gutters="false" style=
    "width:100%; height:100%;">
      <div id="map" dojotype="dijit.layout.ContentPane" region=
              "center" style="margin:5px;">
      </div>
      <div dojotype="dijit.layout.ContentPane" region="left" style=
              "width:28%;margin:5px">
        <table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid"
              selectionMode="none">
         <thead>
            <tr>
              <th field="OBJECTID" width="35px">ID</th>
              <th field="NAME" width="100px">TRAIL</th>
              <th field="STATUS" width="100%">STATUS</th>

SYNCHRONIZING MAP AND DATA GRID SAMPLE

KellyHutchins — Mon, 26 Apr 2010 14:56:47 GMT

You mentioned that the selection isn't syncing up - does this mean that features are getting selected but maybe not the ones you'd expect?

SYNCHRONIZING MAP AND DATA GRID SAMPLE

JuneAcosta — Mon, 26 Apr 2010 15:19:33 GMT

Features in the map are not getting selected when I select a record from the data grid. When I hover over features in the map nothing gets selected (highlighted) as well and nothing is selected in the grid.

SYNCHRONIZING MAP AND DATA GRID SAMPLE

KellyHutchins — Sat, 11 Dec 2021 07:52:21 GMT

If you add a breakpoint, using a tool like Firebug for Firefox or Developer Tools in IE is there a value returned for the OBJECTID associated with the graphic. The snippet of code below is executed when you hover over a row in the data grid. Dojo.some looks through all the map's graphics until it finds one that meets the criteria. In this case once a graphic is found with the same objectid as the row's id then it will add a selection graphic to the map.

dojo.some(map.graphics.graphics,function(graphic){
if ((graphic.attributes) && graphic.attributes.OBJECTID === rowId) {
var selectedState = new esri.Graphic(graphic.geometry).setAttributes(
graphic.attributes);
selectionLayer.add(selectedState);
return true;
}
});

SYNCHRONIZING MAP AND DATA GRID SAMPLE

JuneAcosta — Mon, 26 Apr 2010 17:55:01 GMT

I'm somewhat new to this. I got Firefox w/Firebug up and running, and, yes the objectID is returned.

SYNCHRONIZING MAP AND DATA GRID SAMPLE

KellyHutchins — Mon, 26 Apr 2010 21:12:00 GMT

I think it might be the symbology, can you try replacing the line where the renderer for the selection layer with this one:

   selectionLayer.setRenderer(new esri.renderer.SimpleRenderer(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new dojo.Color([0,255,200]), 14)));

And the default renderer line with this one:

 var defaultRenderer = new esri.renderer.SimpleRenderer(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2));

SYNCHRONIZING MAP AND DATA GRID SAMPLE

JuneAcosta — Tue, 27 Apr 2010 14:29:53 GMT

The symbology doesnt seem to be the issue- I did notice that when hovering over the features in the map the 'onMouseOver" event is not being triggered. My service is not a tiled service- would that be the problem?

Re: SYNCHRONIZING MAP AND DATA GRID SAMPLE

robotprince — Wed, 26 May 2010 10:13:05 GMT

I have been testing the various samples as a way to learn how to customize with the Javascript API. I came across the Synchronizing Map and Data Sample and I tried to modfiy it to use a line layer instead of a polygon. I can't seem to get the selection in the grid to sync up with the features in the map. Here is the sample code with my changes:

      var map,selectionLayer,majorProject;
      var resizeTimer;

      function init() {
        var initExtent = new esri.geometry.Extent(-161.015,-45.489,-35.156,91.0925,
                new esri.SpatialReference({"wkid":4236}));
        map = new esri.Map("map",{extent:initExtent});
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

//add the ArcGIS Online Streetmap service, hide it so the imagery appears first
        majorProject = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisweb03v/ArcGIS/rest/services/majorProject/MapServer");
        map.addLayer(majorProject);

        //define default and selected symbology
        dojo.connect(map,"onLoad",function(){
          selectionLayer = new esri.layers.GraphicsLayer();
          selectionLayer.setRenderer(new esri.renderer.SimpleRenderer(new esri.symbol.SimpleLineSymbol().setColor(
             new dojo.Color([255,255,0]))));

   //selectionLayer.setRenderer(new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255])).setWidth(5));
          map.addLayer(selectionLayer);

          var defaultRenderer = new esri.renderer.SimpleRenderer(
            new esri.symbol.SimpleLineSymbol().setColor( new dojo.Color([0,0,0])));
          map.graphics.setRenderer(defaultRenderer);
          executeTask();
        });
        //Highlight map graphic when hovering over row
        dojo.connect(grid, "onMouseOverRow", function(evt){
          if(evt.rowIndex === -1){
            return;
          }
          var rowId   = grid.getItem(evt.rowIndex).OBJECTID;
          selectionLayer.clear();
          //add a new graphic to the selection layer
          dojo.some(map.graphics.graphics,function(graphic){
          if ((graphic.attributes) && graphic.attributes.OBJECTID === rowId) {
            var selectedState = new esri.Graphic(graphic.geometry).setAttributes(
                graphic.attributes);
            selectionLayer.add(selectedState);
            return true;
          }
         });
       });

        dojo.connect(grid,"onMouseOutRow",function(){
         selectionLayer.clear();
        });

        //change the row's background color to yellow on mouse hover
        dojo.connect(grid,"onStyleRow",function(row){
          if (row.over) {
            row.customStyles+='background-color:#FFFF00;';
          }
        });

        //add logic to resize the map when the browser size changes
        dojo.connect(dijit.byId('map'), 'resize', function() {
          resizeMap();
        });

        //modify the grid so only the STATE_NAME field is sortable
        grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } };
      }

      function executeTask(){
        //var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
var queryTask = new esri.tasks.QueryTask("http://gisweb03v/ArcGIS/rest/services/majorProject/MapServer/1");
        var query = new esri.tasks.Query();
        query.returnGeometry=true;
        query.outFields = ["NAME","STATUS","OBJECTID"];
        query.where = "1=1";
        dojo.connect(queryTask,"onComplete",function(featureSet){
          //build an array of attributes
          var items = dojo.map(featureSet.features,function(feature){
            return feature.attributes;
          });
          var data = {
              identifier:"OBJECTID",
              items:items};
          store = new dojo.data.ItemFileReadStore({data:data});
          grid.setStore(store);
          grid.setSortIndex(1,"true"); //sort on the state name
          dojo.forEach (featureSet.features, function(feature) {
            map.graphics.add(feature);
          });
      });

        dojo.connect(map.graphics,"onMouseOver",function(evt){
          selectionLayer.clear();
          //loop through the grid and find the row associated with the graphic
          for (var i=0, il=grid.rowCount; i<il; i++) {
            if((grid.getItem(i)) && grid.getItem(i).OBJECTID === evt.graphic.attributes.OBJECTID){
             grid.rows.setOverRow(i);
             grid.scrollToRow(i);
             var selectedState = new esri.Graphic(evt.graphic.geometry).setAttributes(
                 evt.graphic.attributes);
             selectionLayer.add(selectedState);
             break;
            }
           }
         });

        dojo.connect(map.graphics,"onMouseOut",function(evt){
         selectionLayer.clear();
         grid.rows.setOverRow(-1);
         });
        queryTask.execute(query);
    }

    //Handle resize of browser
    function resizeMap() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
      }, 800);
    }

dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer"
    design="headline" gutters="false" style=
    "width:100%; height:100%;">
      <div id="map" dojotype="dijit.layout.ContentPane" region=
              "center" style="margin:5px;">
      </div>
      <div dojotype="dijit.layout.ContentPane" region="left" style=
              "width:28%;margin:5px">
        <table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid"
              selectionMode="none">
         <thead>
            <tr>
              <th field="OBJECTID" width="35px">ID</th>
              <th field="NAME" width="100px">TRAIL</th>
              <th field="STATUS" width="100%">STATUS</th>

Do you have any example? it's so complex! Thanks so much!