The ArcGIS Server JS API contains a new FeatureTable class, which shows the attribute table corresponding to a FeatureLayer. There is an option syncSelection which:

Enables an interaction between the map and the feature table. Setting this property to true allows selection of a feature on a map via clicking row in the table, and selection of a table's row via clicking a feature on the map

However, this doesn't seem to honour a selection set made programatically against the layer.

Taking the sample at https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=featuretable, if I apply a selection to the FeatureLayer it is not reflected in the FeatureTable:

// Create the feature layer
myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", {
  mode: FeatureLayer.MODE_SELECTION,
  visible: true,
  outFields: ["*"],
  id: "fLayer"
var myQuery = new Query();
myQuery.where = "Spp_Code ='SABA'";

This correctly applies the selection to the feature layer (note that the map only contains one point), but not to the feature table (it lists all 1146 points with 0 selected):

enter image description here

Is there a way to refresh the feature table to reflect the selection set?

  • As a note, I tried to call myFeatureTable.grid.select() on rows where the FID matched the selection results in the featureLayer "selection-complete" callback, and I ran into circular callbacks. Perhaps adding a check to see if the row was selected or not would have worked. Will research more later.
    – raykendo
    Jun 21, 2016 at 18:16

3 Answers 3


This is my solution for viewing only what it is visible on the map (in view:)

    _selectViewIds: function() {
        var objectIdFieldName = this.layer.layerObject.objectIdField;
        q = new Query();
        q.outFields = [objectIdFieldName];
        q.geometry = this.map.extent;
        var exp=this.layer.layerObject.getDefinitionExpression();
        q.where = exp;
        q.returnGeometry = true;
        new QueryTask(this.layer.layerObject.url).execute(q).then(lang.hitch(this, function(ev) {
            var selectedIds = ev.features.map(function(f) {return f.attributes[objectIdFieldName];});



        on(selectFeaturesBtn, 'change', lang.hitch(this, function(ev) {
            if(selectFeaturesBtn.isChecked()) {
                on(this.map, "extent-change", lang.hitch(this, this._selectViewIds, this));
            } else {

Beginning at 3.16 and later, the implementation of that SyncSelection boolean is slightly different than you described:

Enables an interaction between the map and the feature table. Setting this property to true allows selection of a feature on a map via clicking a row in the table. However, it won't enable selection of records in the table when user clicks on a feature on the map. To enable selection from the map to the table, the developer must explicitly implement the layer's click logic. This is because the application might have its own selection logic elsewhere or their own click logic. (Added at v3.16)

So, I know it's a royal pain, but I believe you have to loop through the map-layers selected features and select them AGAIN by call the selection click event on them (programmatically.)


Hook to the selection-complete event, use getSelectedFeatures(), map the result to an array of IDs, and pass that to the FeatureTable via selectRows. Then hook selectFeatures to the click event and you're done.

As a rough idea:

layer.on("click", function(evt) {
    var query = new Query();
    query.geometry = evt.mapPoint;
    layer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function() {
        var ids = layer.getSelectedFeatures().map(function(feature) {
            return feature.attributes[objectIDFieldName];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.