topic Re: Row in dgrid remaining highlighted even after selecting another row in ArcGIS JavaScript Maps SDK Questions

Row in dgrid remaining highlighted even after selecting another row

BrettGreenfield__DNR_ — Wed, 13 Nov 2013 17:28:09 GMT

I'm working with the dgrid sample for my own map. I've got most everything set up and functioning the way I want, but if I've clicked on a row in the grid, and then click on another row, both rows are highlighted. If I click another row, all three are highlighted, and so forth. I tried adding the grid.selectionClear(); line to the function but it doesn't seem to do anything. I also don't see anything in the sample code that instructs the grid to clear its current selection when a new row is clicked. Any ideas?

Code:

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Charter Guide Map</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">   <style>     html, body {        height: 100%;        width: 100%;        margin: 0;        padding: 0;        overflow: hidden;     }  td  {  padding:3px;  }     #container {        height: 100%;        visibility: hidden;     }     #bottomPane { height: 200px; }     #grid { height: 100%; }     .dgrid { border: none; }     .field-Business_C { cursor: pointer; }   </style>    <script src="http://js.arcgis.com/3.7/"></script>   <script>     // load dgrid, esri and dojo modules     // create the grid and the map     // then parse the dijit layout dijits     require([       "dojo/ready",       "dgrid/OnDemandGrid",       "dgrid/Selection",        "dojo/store/Memory",        "dojo/_base/array",       "dojo/dom-style",       "dijit/registry",       "esri/map",        "esri/layers/FeatureLayer",        "esri/symbols/SimpleFillSymbol",       "esri/tasks/QueryTask",       "esri/tasks/query",       "dojo/_base/declare",        "dojo/number",        "dojo/on",        "dojo/parser",        "dijit/layout/BorderContainer",        "dijit/layout/ContentPane"       ], function(         ready,         Grid,          Selection,          Memory,          array,         domStyle,         registry,         Map,          FeatureLayer,          SimpleFillSymbol,         QueryTask,         Query,         declare,          dojoNum,          on,          parser       ) {         ready(function() {            parser.parse();            // create the dgrid           grid = new (declare([Grid, Selection]))({             // use Infinity so that all data is available in the grid             bufferRows: Infinity,             columns: {               "Business_C": "Business/Captain Name",               "Address": "Address",      "Phone_1": "Phone Number",      "Email_Addr": "Email Address",      "Maximum_Si": "Max Size of Charter",      "Web_Addres": "Website",      "Region_s_" : "Regions"             }           }, "grid");           // add a click listener on the ID column           grid.on(".field-Business_C:click", selectCaptain);            map = new Map("map", {             basemap: "satellite",             center: [-76.5, 38.9],             zoom: 9           });            chartersUrl = "http://services.arcgis.com/njFNhDsUCentVYJW/arcgis/rest/services/CharterGuide/FeatureServer/0";           outFields = ["Business_C", "Address", "Phone_1", "Email_Addr", "Maximum_Si", "Web_Addres", "Region_s_", "Chesapeake", "Vessel_Nam", "Phone_2", "Fishing_Me", "Other_Regi", "Targeted_S"];                var infoTemplate = new esri.InfoTemplate();           infoTemplate.setTitle("${Business_C}");     infoTemplate.setContent( "<table border='0', width='100%'>"          + "<tr><td width='50%' width='100%' valign='top'>Vessel Name:</td><td width='50%' valign='bottom'> ${Vessel_Nam}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Business/Captain Name:</td><td width='50%' valign='bottom'> ${Business_C}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Marina Address:</td><td width='50%' valign='bottom'> ${Address}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Phone 1:</td><td width='50%' valign='bottom'> ${Phone_1}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Phone 2:</td><td width='50%' valign='bottom'> ${Phone_2}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Email:</td><td width='50%' valign='bottom'> ${Email_Addr}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Maximum Size of Charter:</td><td width='50%' valign='bottom'> ${Maximum_Si}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Web Address:</td><td width='50%' valign='bottom'> ${Web_Addres}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Fishing Method:</td><td width='50%' valign='bottom'> ${Fishing_Me}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Regions Covered:</td><td width='50%' valign='bottom'> ${Region_s_}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Chesapeake Bay:</td><td width='50%' valign='bottom'> ${Chesapeake}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Other Regions Covered:</td><td width='50%' valign='bottom'> ${Other_Regi}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Targeted Species:</td><td width='50%' valign='bottom'> ${Targeted_S}</td></tr>"          + "</table>"     );                   map.infoWindow.resize(400,300)          var highlight = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 16, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,255]), 3), new dojo.Color([0,255,255,0]));                          var fl = new FeatureLayer(chartersUrl, {             id: "charters",             mode: 1,             outFields: outFields,    infoTemplate: infoTemplate           });          fl.on("click", function() {       map.graphics.clear();     });            // change cursor to indicate features are click-able           fl.on("mouse-over", function() {             map.setMapCursor("pointer");           });           fl.on("mouse-out", function() {             map.setMapCursor("default");           });            map.addLayer(fl);            map.on("load", function( evt ){             // show the border container now that the dijits              // are rendered and the map has loaded             domStyle.set(registry.byId("container").domNode, "visibility", "visible");             populateGrid(Memory); // pass a reference to the MemoryStore constructor           });            function populateGrid(Memory) {             var qt = new QueryTask(chartersUrl);             var query = new Query();             query.where = "1=1";             query.returnGeometry = false;             query.outFields = outFields;             qt.execute(query, function(results) {               var data = array.map(results.features, function(feature) {                 return {                   // property names used here match those used when creating the dgrid                   "Business_C": feature.attributes[outFields[0]],                   "Address": feature.attributes[outFields[1]],       "Phone_1": feature.attributes[outFields[2]],       "Email_Addr": feature.attributes[outFields[3]],       "Maximum_Si": feature.attributes[outFields[4]],       "Web_Addres": feature.attributes[outFields[5]],       "Region_s_": feature.attributes[outFields[6]]                 }               });               var memStore = new Memory({ data: data });               grid.set("store", memStore);             });           }           // fires when a row in the dgrid is clicked           function selectCaptain(e) {       grid.clearSelection();       map.infoWindow.hide();       map.graphics.clear();             var fl = map.getLayer("charters");             var query = new Query();             captainName = (e.target.innerHTML);    query.where = "Business_C = '" + captainName + "'";             fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {               map.centerAt(result[0].geometry);      map.graphics.add(new esri.Graphic(result[0].geometry, highlight));             });           }              }       );     });   </script> </head>  <body class="tundra">   <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">     <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>     <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div>     </div>   </div> </body> </html>

Re: Row in dgrid remaining highlighted even after selecting another row

NumaGremling — Sun, 12 Dec 2021 03:09:21 GMT

Hi Brett,

thank you for asking this question, because I have the exact same one! I was working off a sample, and I must have deleted something that makes my grid behave the way you described it.

Anyways, I have been attempting to solve the issue by changing CSS, looking at GitHub and this article, but I have not been successful. I would not mind if no selection at all showed up ever, but I am not sure how to access the blueish background. I have tried many rules but none of them seem to give me what I want.
The closest I have come to making it showing up only once is when using this rule:

.dgrid-selected{visibility:hidden;}

But that obviously hides the whole thing and does not do what we want. I also noticed that using certain classes has no effect whatsoever, no matter which rule is applied.

I hope my links can help to some degree. Please let me know if you figure it out. Thank you.

Re: Row in dgrid remaining highlighted even after selecting another row

JohnathanBarclay — Thu, 14 Nov 2013 06:44:55 GMT

Try adding selectionMode: "single" in your grid constructor.

Re: Row in dgrid remaining highlighted even after selecting another row

NumaGremling — Thu, 14 Nov 2013 06:55:48 GMT

Just gave this a shot. In my case this will make the first selected row unselect when I click a second one, but from then on it will just add them all up again like before.

Re: Row in dgrid remaining highlighted even after selecting another row

BrettGreenfield__DNR_ — Thu, 14 Nov 2013 12:31:21 GMT

In my case, selectionMode: "single" doesn't have any effect at all.

I also just now noticed that by including that grid.selectionClear(); line in my function, the first row of the grid will never highlight, so it seems like every time that function fires it's not clearing my selection, it's just clearing the first row.

Re: Row in dgrid remaining highlighted even after selecting another row

BrettGreenfield__DNR_ — Fri, 15 Nov 2013 13:05:03 GMT

I was playing around with this more and found the answer, and it's really, really silly. When you create your grid, one of the column IDs must be "id", just like in the sample. As soon as I made that change, the problem disappeared. The column label can still be whatever you want.

Re: Row in dgrid remaining highlighted even after selecting another row

JohnathanBarclay — Fri, 15 Nov 2013 14:01:05 GMT

I was playing around with this more and found the answer, and it's really, really silly. When you create your grid, one of the column IDs must be "id", just like in the sample. As soon as I made that change, the problem disappeared. The column label can still be whatever you want.

Dojo stores require an id field to function correctly. If your data does not contain a field called id, you can set the stores idProperty.

e.g. idProperty: OBJECTID

Re: Row in dgrid remaining highlighted even after selecting another row

Vara_PrasadM_S — Fri, 01 Aug 2014 07:10:27 GMT

Thanks Brett!

It solved my issue. (FYI for others who are facing the same issue, The "id" is case sensitive. We should provide in small letters.)

With Regards,

Vara Prasad.

Re: Row in dgrid remaining highlighted even after selecting another row

TracySchloss — Sun, 12 Dec 2021 03:09:24 GMT

I have a column called id, but it still highlights all selected records, like you're describing. I'm building a grid based on the results of a findTask, using dGrid and Memory. I haven't been explicitly assigning columns, because the grid has always been OK defining it this way. Maybe there is an issue specifically with Selection that needs them?

function executeServerFind (){
  var searchText = dom.byId('txtSearch').value;
  searchFindParams.searchText = searchText;
            var data = [];
    if (resultGrid) {
        resultGrid.refresh();
    }
  searchFindTask.execute(searchFindParams, function(results){
      if (results.length > 0) {
        data = arrayUtils.map(results, function (result) {
            return {
              "id": result.feature.attributes.ESRI_OID,
              "fieldname": result.foundFieldName,
              "fieldvalue": result.value,           
              "itemname": result.feature.attributes.Item_Name,
              "description":result.feature.attributes.ItemFunctionDescription,
              "agency":result.feature.attributes.AgencyAcronym,
              "location":result.feature.attributes.EntityLocationName,
              "address":result.feature.attributes.EntityLocationAddress1,
              "city":result.feature.attributes.EntityLocationCity
            };
            });
        var memory= new Memory({
                data: data,
                idProperty: 'id'
            });
      resultGrid = new (declare([Grid, Selection]))({
      renderRow: resultRenderRowFunction,
        showHeader: false
        }, "resultsGridDiv");
       
      resultGrid.set("store", memory);


      resultGrid.on('.dgrid-row:click',function(event){
        var row = resultGrid.row(event);
        var featureLayer = map.getLayer("allLayer");
        var gridQuery = new Query();                                         
        gridQuery.objectIds = [row.data.id];
        allLayer.selectFeatures(gridQuery, FeatureLayer.SELECTION_NEW, function(results) {
          if ( results.length > 0 ) {
            var feature = results[0];
            feature.setInfoTemplate(infoTemplate);
            var resultGeometry = results[0].geometry;
            var extent = map.extent;
                  if(!extent.contains(resultGeometry)) {
                      map.centerAt(resultGeometry)
                    }
            map.infoWindow.setFeatures(results);
            map.infoWindow.show(resultGeometry);           
          } else {
            console.log("error in grid.on click function");
          }
        });
      });
          } else {
            console.log("Nothing found.");
          }
        });
}

Re: Row in dgrid remaining highlighted even after selecting another row

TracySchloss — Fri, 27 Feb 2015 17:28:53 GMT

Found it! In the earlier post, Brent indicated that selectMode:single didn't help. But in my example, that's what I was missing.

Re: Row in dgrid remaining highlighted even after selecting another row

MichaelGaigg — Sun, 12 Dec 2021 03:09:26 GMT

Johnathan's answer is the correct one. You have to set the idProperty to a unique field. Default is "id" but it's a good practice to always set it.

var dataStore = new Memory({
     data: myData,
     idProperty: "id"
});
this.dataGrid.set("store", dataStore);