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>           
                    ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Jay,

   It sounds like this sample is what you are looking for then:

https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=fl_dgrid 

[jaykapalczynski]

What the heck is Window.grid and Window.map

[RobertScheitlin__GISP]

window is a global variable in JS apps and they are using it to reference the map and the grid.

[jaykapalczynski]

I cant seem to get this working...I have a query that works but just send to a DIV...I am trying to use this queries results to use in the dGrid as well....

Maybe you can see what the heck is going on...

1. So I create the Grid (which I can see in my app when I run it with the header labels)
2. Create a Query Task
3. On the click of a button I set the WHERE statement
4. I then run a Query Task Execute that populates the DIV.....THIS WORKS FINE
5. I then (from the example) call a populateGrid Function to populate the Grid
6. Here I am creating another Query Task and run it....

Nothing gets populated in the Grid?????

var map = new Map("map", {
      basemap: "dark-gray",
      center: [-79.665, 37.629],
      zoom: 8,
      logo: false,
      showLabels : true
}); 

// create the dgrid
 window.grid = new (declare([Grid, Selection]))({
     // use Infinity so that all data is available in the grid
     bufferRows: Infinity,
     columns: {
        "County_Nam": "County_Nam",
        "Case_Numbe": "Case Number",
        "Date_Arres": "Arrest",
        "Violation_": "Violation",
        "Officer_Na": "Officers"
       }
 }, "grid");   
 
// QUERY FOR County and Squad 
var queryTask = new QueryTask("https://xxx/arcgis/rest/services/Projects/xxx/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); 
   populateGrid(Memory);          
}

function populateGrid(Memory) {
   alert("You are in Populate Grid");
   var qt = new QueryTask("https://xxx/arcgis/rest/services/Projects/xxx/FeatureServer/5");
   var query = new Query();
     query.outSpatialReference = {wkid:4326}; //4326 //102100 //3857
     query.where = "County_Nam = '"+ (dom.byId("CountyName").value) +"' AND Squad = '"+ (dom.byId("Squad").value) +"' ";
     query.returnGeometry = false;
     query.outFields = ["County_Nam","Case_Numbe","Date_Arres","Violation_","Officer_Na"];
     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
           "County_Nam": feature.attributes[window.outFields[0]],
           "Case_Numbe": feature.attributes[window.outFields[1]],
           "Date_Arres": feature.attributes[window.outFields[2]],
           "Violation_": feature.attributes[window.outFields[3]],
           "Officer_Na": feature.attributes[window.outFields[4]] 
         };
     });
     var memStore = new Memory({ data: data });
          window.grid.set("store", memStore);
     });
 }
 
 function showResultsCountySquad (results) {
      var resultItems = [];
      var resultCount = results.features.length; 
         
      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("inforesultsCountySquad").innerHTML = resultItems.join("");  
     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Jay,

   I am very confused as to why you are running the same query twice?...  Once in the executeCountySquad and again in the populateGrid.

You should just use the results from your one query to do both if you really still want the showResultsCountySquad function to populate the inforesultsCountySquad innerHTML.

Something like:

 function showResultsCountySquad (results) {
      var resultItems = [];
      var resultCount = results.features.length;

      var data = array.map(results.features, function(feature) {
        var featureAttributes = feature.attributes;
        for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
         }
        resultItems.push("<br>");
        return {
           // property names used here match those used when creating the dgrid
           "County_Nam": feature.attributes[window.outFields[0]],
           "Case_Numbe": feature.attributes[window.outFields[1]],
           "Date_Arres": feature.attributes[window.outFields[2]],
           "Violation_": feature.attributes[window.outFields[3]],
           "Officer_Na": feature.attributes[window.outFields[4]] 
         };
      });
      var memStore = new Memory({ data: data });
          window.grid.set("store", memStore);
      });
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

I have been trying to do just that....no go...

I put this in there and now I dont even get results in the DIV

I am using index of outfields 0-4 

     var map = new Map("map", {
      basemap: "dark-gray",
      center: [-79.665, 37.629],
      zoom: 8,
       logo: false,
       showLabels : true
    });

// QUERY FOR County and Squad 
     var queryTask = new QueryTask("https://xxx/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;

            var data = array.map(results.features, function(feature) {
               var featureAttributes = feature.attributes;
               for (var attr in featureAttributes) {
                      resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
                }
               resultItems.push("<br>");
               return {
                  // property names used here match those used when creating the dgrid
                  "County_Nam": feature.attributes[outFields[0]],
                  "Case_Numbe": feature.attributes[outFields[1]],
                  "Date_Arres": feature.attributes[outFields[2]],
                  "Violation_": feature.attributes[outFields[3]],
                  "Officer_Na": feature.attributes[outFields[4]] 
                };
            dom.byId("inforesultsCountySquad").innerHTML = resultItems.join("");
            });
            var memStore = new Memory({ data: data });
                 window.grid.set("store", memStore);
     }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

I did this and now getting them in the DIV but Still not in the grid....uggg

     function showResultsCountySquad (results) {

       var resultItems = [];
      var resultCount = results.features.length;

            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("inforesultsCountySquad").innerHTML = resultItems.join(""); 
          
        var data = array.map(results.features, function(feature) {
               var featureAttributes = feature.attributes;
               for (var attr in featureAttributes) {
                      resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
                }
               resultItems.push("<br>");
               return {
                  // property names used here match those used when creating the dgrid
                  "County_Nam": feature.attributes[window.outFields[0]],
                  "Case_Numbe": feature.attributes[window.outFields[1]],
                  "Date_Arres": feature.attributes[window.outFields[2]],
                  "Violation_": feature.attributes[window.outFields[3]],
                  "Officer_Na": feature.attributes[window.outFields[4]] 
                };

        });
          var memStore = new Memory({ data: data });
          window.grid.set("store", memStore);
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

am I missing a Require???

require([
"esri/map", "esri/tasks/query", "esri/tasks/QueryTask", "esri/geometry/webMercatorUtils", "dojo/dom", "dojo/on", "esri/layers/FeatureLayer", "esri/dijit/Legend","esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol","esri/layers/LabelClass", "esri/dijit/BasemapToggle","esri/dijit/HomeButton", "esri/dijit/Search", "esri/dijit/LocateButton","esri/layers/GraphicsLayer","esri/InfoTemplate",
"esri/Color", "dojo/_base/array", "dojo/parser", "esri/InfoTemplate", "esri/renderers/ClassBreaksRenderer","dijit/form/CheckBox", "dojo/dom-construct",
"dojo/keys","esri/SnappingManager","esri/dijit/Measurement","esri/tasks/GeometryService","esri/config", "esri/sniff","esri/dijit/BasemapGallery",
"esri/dijit/Bookmarks","esri/layers/OpenStreetMapLayer","esri/dijit/OverviewMap","dgrid/Grid","dojo/_base/declare","dgrid/Selection",
"dgrid/OnDemandGrid","dojo/store/Memory","dgrid/Keyboard",
"esri/layers/LabelLayer", "esri/symbols/TextSymbol", "esri/symbols/Font", "esri/symbols/SimpleLineSymbol",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer","esri/dijit/Scalebar","dijit/TitlePane",
"dojo/domReady!"
], function(
Map, Query, QueryTask, webMercatorUtils, dom, on, FeatureLayer, Legend, SimpleFillSymbol,
SimpleRenderer, SimpleMarkerSymbol, LabelClass, BasemapToggle, HomeButton, Search, LocateButton, GraphicsLayer,InfoTemplate,
Color, arrayUtils, parser, InfoTemplate, ClassBreaksRenderer, CheckBox, domConstruct,
keys,SnappingManager, Measurement, GeometryService,esriConfig, has,BasemapGallery,
Bookmarks,OpenStreetMapLayer,OverviewMap,Grid,declare,Selection,
OnDemandGrid,Memory,Keyboard,
LabelLayer, TextSymbol, Font, SimpleLineSymbol
) {

[RobertScheitlin__GISP]

Jay,

   What errors do you get in the browsers web console?

From the looks of your requires (which, Wow you sure are using a lot in this app) you have dojo array as arrayUtils so this line would be:

var data = arrayUtils.map(results.features, function(feature) {

Also you might want to loose one of your duplicate "esri/InfoTemplate" in your requires.