Can a FeatureTable only display the FeatureLayer's selection when the FeatureLayer is in MODE_SELECTION?

CraigPatterson — Fri, 22 Apr 2016 00:57:04 GMT

I've created a FeatureLayer with it's Mode = MODE_SELECTION. I've created a FeatureTable and set it's featureLayer to this layer. I use a QueryTask to select the features I want.

Unfortunately, when the web page loads, the FeatureTable loads all the the feature class' features even though the FeatureLayer has no selected features. I don't see any settings for the FeatureTable to have it only show the selected records. Is this a bug or am I overlooking something?

Thanks,

Craig

Re: Can a FeatureTable only display the FeatureLayer's selection when the FeatureLayer is in MODE_SELECTION?

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:41:35 GMT

Craig,

I think this is just by design. Here is a workaround though:

<!DOCTYPE html>
<html>

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

  <style>
    html, body, #map{
      width:100%;
      height:100%;
      margin:0;
      padding:0;
    }
    #header {
      overflow:hidden;
      border:none;
      border-bottom:3px solid #badb9c;
      font-family:Windows;
      font-size:14pt;
      color:#000000;
      background:#80bb7e;
    }
    .filterTb {
      padding-left: 12px;
    }
    .esri-feature-table .esri-feature-table-menu {
      background-color: #80bb7e;
    }
  </style>

  <script>
    var map;

    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/geometry/webMercatorUtils",
      "esri/map",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dojo/_base/array",
      "esri/Color",
      "dijit/registry",
      "esri/tasks/query",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox"
    ], function (
      FeatureLayer, FeatureTable, webMercatorUtils, Map, SimpleMarkerSymbol,
      domConstruct, dom, parser, ready, on, lang, array, Color,
      registry, Query, Button, ContentPane, BorderContainer, TextBox
    ) {
      parser.parse();

      ready(function(){

        var myFeatureLayer, mySelFeatureLayer;
        var lastWhere = "";
        var map = new Map("map",{
          basemap: "streets"
        });

        map.on("load", loadTable);

        function loadTable(){

          // Create the feature layer
          myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", {
            mode: FeatureLayer.MODE_ONDEMAND,
            visible: true,
            outFields: ["*"],
            id: "fLayer"
          });

          // Create the selection feature layer
          mySelFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", {
            mode: FeatureLayer.MODE_SELECTION,
            visible: true,
            outFields: ["*"],
            id: "selfLayer"
          });
          var selectionSymbol = new SimpleMarkerSymbol().setColor(new Color([0,255,0,0.2]));
          mySelFeatureLayer.setSelectionSymbol(selectionSymbol);

          //set map extent
          on(myFeatureLayer, "load", function(evt){
            var extent = myFeatureLayer.fullExtent;
            if (webMercatorUtils.canProject(extent, map)) {
              map.setExtent( webMercatorUtils.project(extent, map) );
            }
          });

          on(dijit.byId("stringTextBox"), 'change', function(value){
            var userVal = dijit.byId("stringTextBox").get('value');
            var oidFld = mySelFeatureLayer.objectIdField;
            var query = new Query();
            if(value.length >= 3){
              lastWhere = query.where = "Sci_Name LIKE '%" +  userVal + "%'";
              mySelFeatureLayer.selectFeatures(query,FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) {
                var objectIds = array.map(features, lang.hitch(this, function(feat){
                  return feat.attributes[oidFld];
                }));
                myFeatureTable.selectedRowIds = objectIds;
                myFeatureTable._showSelectedRecords();
              }));
            }else{
              if(lastWhere !== ''){
                mySelFeatureLayer.clearSelection();
                myFeatureTable.selectedRowIds = [-1];
                myFeatureTable._showSelectedRecords();
                lastWhere = '';
              }
            }
          });

          map.addLayers([myFeatureLayer, mySelFeatureLayer]);

          myFeatureTable = new FeatureTable({
            "featureLayer" : mySelFeatureLayer,
            "outFields":  ["Collected","Crew","Status","Spp_Code", "Height", "Cmn_Name","Sci_Name","Street","Native"],
            "map" : map
          }, 'myTableNode');

          myFeatureTable.startup();
          on(mySelFeatureLayer, "load", function(evt){
            myFeatureTable.selectedRowIds = [-1];
            myFeatureTable._showSelectedRecords();
          });

        }
      });
    });
  </script>
</head>

<body class="claro esri">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >
      Filter table by Sci Name:
      <input id="stringTextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, intermediateChanges:true, placeholder:'Carpinus'" class="dijit-form-TextBox filterTb" />
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:70%">
      <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:30%">
      <div id="myTableNode"></div>
    </div>
  </div>
</body>
</html>

topic Re: Can a FeatureTable only display the FeatureLayer's selection when the FeatureLayer is in MODE_SELECTION? in ArcGIS Server with JavaScript API Questions

Can a FeatureTable only display the FeatureLayer's selection when the FeatureLayer is in MODE_SELECTION?

Re: Can a FeatureTable only display the FeatureLayer's selection when the FeatureLayer is in MODE_SELECTION?