Help using the selectedRecords property of the FeatureTable widget in ArcGIS JS API 3.2

1077
3
Jump to solution
04-28-2017 03:05 PM
ShannonDeArmond
Occasional Contributor

I'm trying to figure out the best way to query a table in my js application and make a list of attributes for use elsewhere in my application (for example in the attached code, I'm trying to query the table for all records in California so I can then make a list of all the counties in that state). I thought the selectedRows property would give me exactly what I needed, and while my selection is coming up with the proper number of records, the selectedRows object array is empty. Can anyone tell me what I'm doing wrong? Or if I should take another approach all together?

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.20/"></script>

  <style>
    html, 
    body, 
    #myTableNode {
      width:100%;
      height:100%;
      margin:0;
      padding:0;
    }

  </style>

  <script>
    var map;

    require([
      "esri/layers/FeatureLayer",
      "esri/tasks/query",
      "esri/dijit/FeatureTable",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
    ], function (
      FeatureLayer, Query, FeatureTable,
      dom, parser, ready
    ) {

      parser.parse();

      ready(function(){

        // Creates a feature layer
        var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Census_Counties_20m/FeatureServer/...", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields:  ["FID", "STATE", "COUNTY", "NAME"],
          visible: true,
          id: "fLayer"
        });
        
     // Creates a feature table from the feature layer
        myTable = new FeatureTable({
          featureLayer : myFeatureLayer,
          showGridMenu: true
        }, "myTableNode");

        myTable.startup();
        
     // Creates a selection on the feature table
        var query = new Query();
        query.where = "STATE = '06'";
        myFeatureLayer.queryIds(query, function(objectIds){
          console.log(objectIds);
          myTable.selectRows(objectIds);
       myTable.filterSelectedRecords();
          var myRows = myTable.selectedRows;
          if (myRows) {
            console.log(myRows.length);
          }
        });
      });
    });
  </script>
</head>

<body class="claro esri">
  <div id="myTableNode"></div>
</body>

</html> 
0 Kudos
1 Solution

Accepted Solutions
EdwinRoa
Esri Contributor

Try This. 

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.20/"></script>

  <style>
    html, 
    body, 
    #myTableNode {
      width:100%;
      height:100%;
      margin:0;
      padding:0;
    }

  </style>

  <script>
    var map;

    require([
      "esri/layers/FeatureLayer",
      "esri/tasks/query",
      "esri/dijit/FeatureTable",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
    ], function (
      FeatureLayer, Query, FeatureTable,
      dom, parser, ready
    ) {

      parser.parse();
      ready(function(){
          // Creates a feature layer
        var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Census_Counties_20m/FeatureServer/...", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields:  ["FID", "STATE", "COUNTY", "NAME"],
          visible: true,
          id: "fLayer"
        });
        
          // Creates a feature table from the feature layer
        myTable = new FeatureTable({
          featureLayer : myFeatureLayer,
          showGridMenu: true
        }, "myTableNode");

        myTable.startup();
        
          myTable.on("load", function(){
               // Creates a selection on the feature table
               var query = new Query();
               query.where = "STATE = '06'";
               myFeatureLayer.queryIds(query, function(objectIds){
                    console.log(objectIds);
                    myTable.selectRows(objectIds);
               });
            
               myTable.on("refresh", function(){
                    myTable.getFeatureDataById(myTable.selectedRowIds).then(function(features){
                         console.log("features", features.features);
                    });
               });
          });
      });
    });
  </script>
</head>

<body class="claro esri">
  <div id="myTableNode"></div>
</body>

</html>

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

Shannon,

See my comments in this code:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.20/"></script>

  <style>
    html,
    body,
    #myTableNode {
      width:100%;
      height:100%;
      margin:0;
      padding:0;
    }

  </style>

  <script>
    var map;

    require([
      "esri/layers/FeatureLayer",
      "esri/tasks/query",
      "esri/dijit/FeatureTable",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
      "dojo/on"
    ], function (
      FeatureLayer, Query, FeatureTable,
      dom, parser, ready, on
    ) {

      parser.parse();

      ready(function(){

        // Creates a feature layer
        var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Census_Counties_20m/FeatureServer/...", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields:  ["FID", "STATE", "COUNTY", "NAME"],
          visible: true,
          id: "fLayer"
        });

     // Creates a feature table from the feature layer
        myTable = new FeatureTable({
          featureLayer : myFeatureLayer,
          showGridMenu: true
        }, "myTableNode");

        myTable.startup();
        
//If you want to get the count of the filtered records you listen for the filter event
        on(myTable, "filter", function(evt){
          console.info(evt.ids.length);
        });

//This event will only fire when the user selects row(s) manualy
//then you can get myTable.selectedRows
        on(myTable, "row-select", function(evt){
          console.info(myTable.selectedRows);
        });

     // Creates a selection on the feature table
        var query = new Query();
        query.where = "STATE = '06'";
        query.returnGeometry = false;
        myFeatureLayer.queryIds(query, function(objectIds){
          console.log(objectIds);
          myTable.selectRows(objectIds);
          myTable.filterSelectedRecords();
        });
      });
    });
  </script>
</head>

<body class="claro esri">
  <div id="myTableNode"></div>
</body>

</html>
EdwinRoa
Esri Contributor

Try This. 

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.20/"></script>

  <style>
    html, 
    body, 
    #myTableNode {
      width:100%;
      height:100%;
      margin:0;
      padding:0;
    }

  </style>

  <script>
    var map;

    require([
      "esri/layers/FeatureLayer",
      "esri/tasks/query",
      "esri/dijit/FeatureTable",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
    ], function (
      FeatureLayer, Query, FeatureTable,
      dom, parser, ready
    ) {

      parser.parse();
      ready(function(){
          // Creates a feature layer
        var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Census_Counties_20m/FeatureServer/...", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields:  ["FID", "STATE", "COUNTY", "NAME"],
          visible: true,
          id: "fLayer"
        });
        
          // Creates a feature table from the feature layer
        myTable = new FeatureTable({
          featureLayer : myFeatureLayer,
          showGridMenu: true
        }, "myTableNode");

        myTable.startup();
        
          myTable.on("load", function(){
               // Creates a selection on the feature table
               var query = new Query();
               query.where = "STATE = '06'";
               myFeatureLayer.queryIds(query, function(objectIds){
                    console.log(objectIds);
                    myTable.selectRows(objectIds);
               });
            
               myTable.on("refresh", function(){
                    myTable.getFeatureDataById(myTable.selectedRowIds).then(function(features){
                         console.log("features", features.features);
                    });
               });
          });
      });
    });
  </script>
</head>

<body class="claro esri">
  <div id="myTableNode"></div>
</body>

</html>

ShannonDeArmond
Occasional Contributor

Thank you both! Both Robert Scheitlin, GISP and eroaesri-co-esridist solutions worked for me though I think Edwin's solution will best fit my needs in this case. Thank you for taking the time to help a beginner.

0 Kudos