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
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...", { 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...", { 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>