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

[JonathanUihlein]

1) You are using programmatic selection already, so 'selecting' a feature from a list of already selected features doesn't make much sense in this context. However, there are many ways around this.

Without rewriting most of your application, you could simply change the symbology of your 'selected' feature, while resetting the symbol of your other graphics back to the default.


Something like this:

 function selectState(e) {

           // select the feature
           var fl = app.map.getLayer("NAME");
           var features = fl.getSelectedFeatures();
           var symbol = fl.getSelectionSymbol();
           var id = parseInt(e.target.innerHTML);
           
           var selectedGraphic;
           arrayUtils.forEach(features, function(feature){
               if(feature.attributes.OBJECTID === id){
                   selectedGraphic = feature;
               }
               feature.setSymbol(symbol);
           });
           
           var mySymbol = new SimpleMarkerSymbol().setOutline(null).setColor("#AEC7E3");
           selectedGraphic.setSymbol(mySymbol);           
                    
           app.map.centerAt(selectedGraphic.geometry.getExtent().getCenter());
   

       }

2) Clicking the image does not work in your sample because you're setting the objectID based on the contents of the cell itself in this line:

query.objectIds = [parseInt(e.target.innerHTML)];

You won't need a query if you implement the function in step 1.

[jaykapalczynski]

Thanks Jon....very appreciated.

The changing of symbol works great when selecting the value of the "id" in the dgrid. Thank you...

Very grateful that I can get these examples and learn as I go...great to see this stuff in action...

The Image: As for the selecting the image I can select the image and get into the Function selectState(e){ and force an Alert(""); so I know I am there but the symbol is not being changed. I tried to modify my dgrid to add a get function but that did not work?

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

[JonathanUihlein]

Clicking the image does not work in your sample because you're setting  the objectID based on the contents of the cell itself in this line:

query.objectIds = [parseInt(e.target.innerHTML)];

You shouldn't be using a query anymore but you will still need the objectID without using e.target.innerHTML.

e.target.innerHTML would be your image in this case, not the ID string.

[KenBuja]

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:

dataGrid.on(".dgrid-row:click", gridSelect);
dataGrid.on("show", function () {
    dataGrid.resize();
});
dataGrid.on(mouseUtil.enterRow, gridEnter);

and these are the functions that highlight the grid. I put the highlight graphics into the map.graphics layer.

//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;
            }
        }
    }

//this "flashes" the graphic

    function gridSelect(e) {
        var graphicFlash;
        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":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPoint)
                    break;
                case "polyline":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolyline);
                    break;
                case "polygon": case "extent":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolygon);
                    break;
            }
            map.graphics.add(graphicFlash);
        }

        var shape = graphicFlash.getDojoShape();
        var animStroke = fx.animateStroke({
            shape: shape,
            duration: 500,
            color: { end: new dojo.Color([0, 0, 0, 0]) }
        });
        var animFill = fx.animateFill({
            shape: shape,
            duration: 500,
            color: { end: new dojo.Color([0, 0, 0, 0]) }
        });
        var anim = dojo.fx.combine([animStroke, animFill]).play();
        var animConnect = dojo.connect(anim, "onEnd", function () {
            map.graphics.remove(graphicFlash);
        });
    }

    function findGraphicByAttribute(attributes) {

        for (i = 0; i < layerResultsGraphic.graphics.length; i++) {
            if (JSON.stringify(layerResultsGraphic.graphics.attributes) === JSON.stringify(attributes)) { return layerResultsGraphic.graphics; }
        }
        return null;
    }

[jaykapalczynski]

................................................erase

[JonathanUihlein]

Jay, I am trying to help you as best I can without actually doing your work for you.

Please reread my previous posts to find the answer to your question.

What does e.target.innerHTML equal in this last sample?

[jaykapalczynski]

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/

[jaykapalczynski]

Jay, I am trying to help you as best I can without actually doing your work for you.

Please reread my previous posts to find the answer to your question.

What does e.target.innerHTML equal in this last sample?

Im trying to learn as well Jon and I really appreciate your help....I am assuming because the Cell itself is now represented with an image the inner.html would be targeting the image not the id???

[jaykapalczynski]

I think I am getting close...still trying to get this...I thank you for your guidance

Returns: "NaN"

 var id1 = parseInt(e.currentTarget.id)

Returns string of my grid : "gridNoColumnSets"

 var id1 = e.currentTarget.id;  

Tried this .... Returns "undefined"

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

    function selectState(e) {
       alert("select the feature");
       var fl = app.map.getLayer("NAME");
       var features = fl.getSelectedFeatures();
       var symbol1 = fl.getSelectionSymbol();
       var id1 = parseInt(e.currentTarget.id);

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

       var mySymbol1 = new SimpleMarkerSymbol().setOutline(null).setColor("#AEC7E3");
       selectedGraphic1.setSymbol(mySymbol1);

       app.map.centerAt(selectedGraphic1.geometry.getExtent().getCenter());

    }