SYNCHRONIZING MAP AND DATA GRID SAMPLE

JuneAcosta

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>

robotprince

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!