nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

All comments

jaykapalczynski

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

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

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

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

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

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

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.

jay.jpg

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());

    }

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

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/

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

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

kenbuja

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

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.

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

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.