select with buffer and highlight from dgrid

[jaykapalczynski]

I have a working example below JSFiddler link. Was wondering if anyone might has a few to look this over and see if they can shed some like on this.

http://jsfiddle.net/Jaykapalczynski/HjMB9/14/

• The user can click the Buffer button and then click in the map. 


• A buffer is created and the points are selected within the buffer


• These results are returned to a dgrid


• Within the dgrid you can select the ID number and it turns the point blue in the map.

My issues and things I need to figure out.
1.  How can I modify my code so the function selectState(e) {...  does not create a new symbol selection set but rather simply highlight the record begin selected via the dgrid.  Leaving all the original points that were selected from the initial buffer and simply highlight the one selected from clicking on the ID in the dgrid..It turns the record BLUE but all the other ones disappear 

2.  If you notice I have 2 column sets....the second one has an image that I want to put in place of the ID number.  With a graphic like an "Identify"....I can get this to work, but when I click this image it removed all the graphics as it does explained above, but additionally when done with the image is does not turn the point blue.  This part breaks.  Not sure why
Obviously the image wont appear do to the location not being valid but the code still runs.

Find these two lines of code in the jsfiddle
Comment the first one out and then uncomment the second one. And rerun to verify #2 above.

        gridNoColumnSets.set("columnSets", columnExample1);
        //gridNoColumnSets.set("columnSets", columnExample2);

Hope someone can help.....Thanks..cheers

[KenBuja]

Thanks Ken....I I tweaked the JSFiddle to reflect your example sand now when I click the map I dont get any return to the grid...thoughts?

http://jsfiddle.net/Jaykapalczynski/HjMB9/17/

You should get into the habit of using debugging tools like Firebug. These are the errors from your Fiddle

[ATTACH=CONFIG]33445[/ATTACH]

For the mouseUtils error, you'll have to add the "dgrid/util/mouse" module in your require statement.

[jaykapalczynski]

You should get into the habit of using debugging tools like Firebug. These are the errors from your Fiddle

[ATTACH=CONFIG]33445[/ATTACH]

For the mouseUtils error, you'll have to add the "dgrid/util/mouse" module in your require statement.

Thanks Ken...I KEEP forgetting about that...thanks for the advice...
I added the reference and now am getting errors on the ROW...maybe because the way I am defining my grid with columns?

Sort of two threads forming here..I very much appreciate both Jon and Your help Ken....

http://jsfiddle.net/Jaykapalczynski/HjMB9/30/

Uncaught TypeError: Cannot read property 'row' of undefined (index):807
gridEnter (index):807
(anonymous function) mouse.js:2
(anonymous function) init.js:215
Uncaught TypeError: Cannot read property 'row' of undefined (index):836
2
Uncaught TypeError: Cannot read property 'row' of undefined 

[KenBuja]

This line

var gridId = e.currentTarget.id;

is returning the name of the div that the grid is stored in, not the grid itself. So then this line

var selectedGrid = dijit.byId(gridId);

returns an "undefined"

[jaykapalczynski]

This line

var gridId = e.currentTarget.id;

is returning the name of the div that the grid is stored in, not the grid itself. So then this line

var selectedGrid = dijit.byId(gridId);

returns an "undefined"

So how do I drill down to the grid itself then?  I am able to hit the Grids ID name... Very confused right now...appreciate your help very very much

[jaykapalczynski]

again I really do appreciate you help with this...really trying to learn and understand this. Not looking for a hand out in any means

I can see where the innerHTML is targeting the image itself.  It no longer is getting the ID of the feature in question
Cant seem to see how to grab the objectID.
I can see where the current target row (part I cant figure out) should be begin define, then is used as the For Each loop goes through all the features trying to find the specific one that matches the current row/objectid the user is in.
All the other features are set back to original SelectionSymbol
the "selectedGraphic1" is then set to the new SimpleMarkerSymbol
the map is then centered via the selectedGrpahic 1 geometry.

Am confused if I need to be doing this in the Function and the Grids Column definition (as seen below with the Get Function) as well.


I tried this , uncommented all my attempts:

  
       var fl = app.map.getLayer("NAME");
       var features = fl.getSelectedFeatures();
       var symbol1 = fl.getSelectionSymbol();
     
//    var id1 = e.current.id;

//    var id1 = e.currentTarget.id;

//    var id1 = e.current.objectID;

//    var id1 = e.currentTarget.objectID;

//    var gridId= e.currentTarget.objectID;
//    var id1= parseInt(gridId);

       var selectedGraphic1;
       arrayUtils.forEach(features, function(feature){
           if(feature.attributes.OBJECTID === id1){
               selectedGraphic1 = feature;
           }
           feature.setSymbol(symbol1);
       });

Grid Columns Definition

 var columnExample2 = 
[
 [
         [
                  {label: 'id', field: 'id', sortable: false,
          formatter: function () {
          return '<img src="images/Identify.png"/>';
   },
          get: function (object) {
      return object["objectID"];
   }
     },
                 {label: 'access', field: 'ACCESSAREA', sortable: true}
                ],
         [
                    {label: 'waterbody', field: 'WATERBODY', colSpan: 2}
                ],
  [
                    {label: 'location', field: 'LOCATION', colSpan: 2, sortable: false}
                ]
         ],
];

[jaykapalczynski]

Take a look at this site where a feature is highlighted from a grid. The feature can be highlighted by moving the mouse over the row in the grid or by clicking on the row. When the grid (dataGrid) is created, I add on listeners:

//this highlights the graphic
    function gridEnter(e) {
        map.graphics.clear();

        var gridId = e.currentTarget.id;
        var selectedGrid = dijit.byId(gridId);

        var row = selectedGrid.row(e);

        graphicHighlight = findGraphicByAttribute(row.data);
        if (graphicHighlight !== null) {
            switch (graphicHighlight.geometry.type) {
                case "point": case "multipoint":
                    map.graphics.add(new esri.Graphic(graphicHighlight.geometry, symbolHighlightPoint));
                    break;
                case "polyline":
                    map.graphics.add(new esri.Graphic(graphicHighlight.geometry, symbolHighlightPolyline));
                    break;
                case "polygon": case "extent":
                    map.graphics.add(new esri.Graphic(graphicHighlight.geometry, symbolHighlightPolygon));
                    break;
            }
        }
    }

Per your prior example....whats in this Function findGraphicByAttribute(row.data)

Thanks...Think I am almost there.

UPDATE:  SEE my next post...It was there.

[jaykapalczynski]

ooppppssss my bad..the function is there.....brb