AnsweredAssumed Answered

Can't sort 3.17 FeatureTable

Question asked by jestanford on Jul 6, 2016
Latest reply on Apr 10, 2017 by Faiyazkhan

Hi,

I have an existing app that has a FeatureTable populated by a FeatureLayer that has been created client side from the results of a query. I recently migrated the app from 3.16 to 3.17 and was pleased to see that a few issues have been resolved but a new one popped up which is that I can no longer sort the table.

 

When I click on the column header I don't get the popup menu that allows the user to choose ascending or descending. I also don't get any console errors.

 

To show what I mean, I combined these two samples, Feature collection | ArcGIS API for JavaScript 3.17 and Using FeatureTable | ArcGIS API for JavaScript 3.17. That code is listed below.

 

Any ideas are appreciated!

Thanks!

Jill

 

<!DOCTYPE html>
<html>

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

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

  <script>
    var map;

    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/geometry/webMercatorUtils",
      "esri/map",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dijit/registry",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox",
      "esri/request",
        "dojo/_base/array",
        "esri/geometry/Point",
        "esri/graphic"
    ], function (
      FeatureLayer, FeatureTable, webMercatorUtils, Map,
      domConstruct, dom, parser, ready, on,lang,
      registry, Button, ContentPane, BorderContainer, TextBox, esriRequest, array, Point, Graphic
    ) {
      parser.parse();

      ready(function(){

        var myFeatureLayer;
        var map = new Map("map",{
          basemap: "dark-gray"
        });

        map.on("load", loadTable);

        function loadTable(){
       
         //create a feature collection for the flickr photos
        var featureCollection = {
          "layerDefinition": null,
          "featureSet": {
            "features": [],
            "geometryType": "esriGeometryPoint"
          }
        };
        featureCollection.layerDefinition = {
          "geometryType": "esriGeometryPoint",
          "objectIdField": "ObjectID",
          "drawingInfo": {
            "renderer": {
              "type": "simple",
              "symbol": {
                "type": "esriPMS",
                "url": "images/flickr.png",
                "contentType": "image/png",
                "width": 15,
                "height": 15
              }
            }
          },
          "fields": [{
            "name": "ObjectID",
            "alias": "ObjectID",
            "type": "esriFieldTypeOID"
          }, {
            "name": "description",
            "alias": "Description",
            "type": "esriFieldTypeString"
          }, {
            "name": "title",
            "alias": "Title",
            "type": "esriFieldTypeString"
          }]
        };

        //create a feature layer based on the feature collection
        myFeatureLayer = new FeatureLayer(featureCollection, {
          id: 'flickrLayer'
        });

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

          map.addLayer(myFeatureLayer);

          myFeatureTable = new FeatureTable({
            "featureLayer" : myFeatureLayer,
            "map" : map
          }, 'myTableNode');

          myFeatureTable.startup();
          requestPhotos();
        }

      function requestPhotos() {
        //get geotagged photos from flickr
        //tags=flower&tagmode=all
        var requestHandle = esriRequest({
          url: "https://api.flickr.com/services/feeds/geo?&format=json",
          callbackParamName: "jsoncallback"
        });
        requestHandle.then(requestSucceeded, requestFailed);
      }

      function requestSucceeded(response, io) {
        //loop through the items and add to the feature layer
        var features = [];
        array.forEach(response.items, function(item) {
          var attr = {};
          attr["description"] = item.description;
          attr["title"] = item.title ? item.title : "Flickr Photo";

          var geometry = new Point(item);

          var graphic = new Graphic(geometry);
          graphic.setAttributes(attr);
          features.push(graphic);
        });

        myFeatureLayer.applyEdits(features, null, null);
      }

      function requestFailed(error) {
        console.log('failed');
      }

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

<body class="claro esri">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
      <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%">
      <div id="myTableNode"></div>
    </div>
  </div>
</body>
</html>


Outcomes