Can't sort 3.17 FeatureTable

Question

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 Using FeatureTable

FaiyazKhan1 · Answer

There is nice little way mentioned over StackOverflow, have a look to it

Change default Sort order for Arcgis Javascript Feature Table - Stack Overflow

JillianStanford · Answer

Thanks for your reply, Undral.

Here's a quick and dirty workaround that I came up with, in case anyone else needs this functionality. I'd be interested in hearing if someone has a more elegant solution.

After creating the feature table, I create the menu that allows the user to choose the direction of sorting. By specifying the targetNodeId and selector properties it will appear as the context menu when the user right clicks a column header.

var sortMenu = new Menu({
     id: "sortMenu",
     targetNodeIds: [tableDiv.id],
     selector: ".dgrid-sortable"
 });

sortMenu.addChild(new MenuItem({
     id: "sortAscending",
     label: "Sort Ascending",
     iconClass: "iconSortAscending",
     onClick: lang.hitch(this, "_onSortAscendingClick")
}));

sortMenu.addChild(new MenuItem({
     id: "sortDescending",
     label: "Sort Descending",
     iconClass: "iconSortDescending",
     onClick: lang.hitch(this, "_onSortDescendingClick")
}));

sortMenu.startup();

The only way I could see to capture the name of the field to be sorted was to grab it from the contextmenu event of the column header.

dojo.forEach(this._resultsAttributeTable.columns, lang.hitch(this, function(column) {
     on(column.headerNode, 'contextmenu', lang.hitch(this, function(e) {
          if (e.currentTarget.hasOwnProperty("field")) {
               this._fieldSort = e.currentTarget.field;
          }
     }));
 }));

Finally, do the sorting when the menu item is clicked.

_onSortAscendingClick: function(e) {
     if (this._fieldSort) {
          this._resultsAttributeTable.grid.set('sort', this._fieldSort);
          this._fieldSort = null;
     }
},

_onSortDescendingClick: function(e) {   
      if (this._fieldSort) {
          this._resultsAttributeTable.grid.set('sort', [ { attribute: this._fieldSort, descending: true } ]);
          this._fieldSort = null;
     }
}

Thanks!

Jill

UndralBatsukh · Answer

Hi Jillian,

I can reproduce the problem you are running into and thank you for reporting it. Unfortunately, I could not find a workaround. I will let you know if I find a workaround.