Row in dgrid remaining highlighted even after selecting another row

BrettGreenfield__DNR_ · ‎11-13-2013

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>

BrettGreenfield__DNR_ · ‎11-15-2013

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.

View solution in original post

NumaGremling · ‎11-13-2013

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.

JohnathanBarclay · ‎11-13-2013

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

NumaGremling · ‎11-13-2013

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.

BrettGreenfield__DNR_ · ‎11-14-2013

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.

BrettGreenfield__DNR_ · ‎11-15-2013

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.

Vara_PrasadM_S · ‎08-01-2014

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.

JohnathanBarclay · ‎11-15-2013

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

MichaelGaigg · ‎03-26-2015

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

TracySchloss · ‎02-27-2015

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.");
          }
        });
}