Return Results Options

[jaykapalczynski]

I have an app that has a few different queries that query the same data...it then places this data in DIV

<div id="inforesults">Results:</div>

Everything seems to be working fine I just desire more functionality.  What I would like to do is:

• Move the data into a table format that has sorting
• Allow the user to select a record and highlight the map and visa versa.

Just not sure where to go from here.  What are my options for a results container that would achieve this.  Maybe something that I can easily stylize with CSS

   // QUERY FOR County and Squad 
   var queryTask = new QueryTask("https://xxxx/arcgis/rest/services/Projects/xxxx/FeatureServer/5");
   var query = new Query();
   query.outSpatialReference = {wkid:4326}; //4326 //102100 //3857
   query.returnGeometry = true;
   query.outFields = ["*"];

    on(dom.byId("executeCountySquad"), "click", executeCountySquad);
    function executeCountySquad () {
        query.where = "County_Nam = '"+ (dom.byId("CountyName").value) +"' AND Squad = '"+ (dom.byId("Squad").value) +"' ";
     queryTask.execute(query, showResultsCountySquad);
    }
    function showResultsCountySquad (results) {
     var resultItems = [];
        var resultCount = results.features.length; 
         alert(resultCount) 
         for (var i = 0; i < resultCount; i++) {
            var featureAttributes = results.features[i].attributes;
            for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
            }
            resultItems.push("<br>");
        }
        dom.byId("inforesults").innerHTML = resultItems.join("");  
    }


//======================================================

<input id="executeCountySquad" type="button" value="Get Details County Squad">                          
<div id="inforesultsCountySquad" style="padding:5px; font-size:8px; height:Auto; margin:5px; background-color:#eee;">Results:</div>           
                    ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

I call this Function on ID click

      // create the dgrid
      window.grid = new(declare([Grid, Selection]))({
        // use Infinity so that all data is available in the grid
        bufferRows: Infinity,
        columns: {
          "id": "ID",
          "County_Nam": "County_Nam",
          "UCR_Code": "UCR_Code",
          "Case_Numbe": "Case_Numbe",
          "Statute": "Statute",
          "Statute_De": "Statute_De",
          "Date_Arres": "Date_Arres"       
         }
      }, "grid");
          // add a click listener on the ID column
      window.grid.on(".field-id:click", selectState);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

// fires when a row in the dgrid is clicked
function selectState(e) {
alert("record Selected");
// select the feature

var fl = map.getLayer("countiesGraphicsLayer");
var query = new Query();
query.objectIds = [parseInt(e.target.innerHTML, 10)];
fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {
if ( result.length ) {
// re-center the map to the selected feature
window.map.centerAt(result[0].geometry.getExtent().getCenter());
} else {
console.log("Feature Layer query returned no features... ", result);
}
});

}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Although I am not defining a Feature Layer like in the example....I am creating a new Graphics Layer when I draw the results..

queryTask.on("complete", function(event) {
        var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));

        var symbol = new SimpleMarkerSymbol({
          "color": [255, 255, 255, 64],
          "size": 12,
          "angle": -30,
          "xoffset": 0,
          "yoffset": 0,
          "type": "esriSMS",
          "style": "esriSMSCircle",
          "outline": {
            "color": [0, 0, 0, 255],
            "width": 1,
            "type": "esriSLS",
            "style": "esriSLSSolid"
          }
        });

        var features = event.featureSet.features;
        var countiesGraphicsLayer = new GraphicsLayer();
        var featureCount = features.length;

        map.graphics.clear();
        for (var i = 0; i < featureCount; i++) {

          var graphic = features[i]; //Feature is a graphic
          graphic.setSymbol(symbol);
          graphic.setInfoTemplate(infoTemplate);
          map.graphics.add(graphic);
        }
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍