AnsweredAssumed Answered

Row in dgrid remaining highlighted even after selecting another row

Question asked by bgfield on Nov 13, 2013
Latest reply on Mar 26, 2015 by mgaigg-esristaff
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>

Outcomes