topic Re: destroy featureTable in ArcGIS JavaScript Maps SDK Questions

destroy featureTable

RichardMoussopo — Thu, 28 Apr 2016 14:37:50 GMT

There is only one method on the FeatureTable widget (startup). is there anyway to completely destroy the featureTable and recreate it each time the selection query changes.

I could create my own table to display selection query result but I would prefer using featureTable widget because of the editing capability to it.

Re: destroy featureTable

EvelynHernandez — Thu, 28 Apr 2016 14:59:54 GMT

Why u just dont show it at startup (hide it with css) and then when u make a selection u show the table with the selected data making a query with geometry?

And if the user click on something else that is not the map or the table itself u hide it again?

Re: destroy featureTable

RichardMoussopo — Thu, 28 Apr 2016 15:06:55 GMT

that is exactly the logic I am going to use now but the only issue is that the table is not refreshing at all. I am using myFeatureTable.grid.refresh(); but nothing happens the table keeps the same result set from the first query.

Re: destroy featureTable

EvelynHernandez — Thu, 28 Apr 2016 15:19:05 GMT

Maybe if u show ur code in jsfiddle we can see what is going wrong.

But remember that u need to do the query every time when u select a new item (or when u change ur map extent), so u will have to make a listener that allows to perform the query every time u make a selection or change the map extent.

For example, in my case i had to make a table that refreshes the result every time i change the map extent, so i applied a listener on the map, like:

map.on('extent-change', ()=>{ getInfoByExtent((map.extent), (myresultcallback)=>{do something with the callback that i got } });

My query is:

function getInfoByExtent(extent, callback){

var qTask = new esri.tasks.QueryTask(mylayer);

var q= new esri.tasks.Query();

q.where = "1=1";

q.returnGeometry = true;

q.outFields=["*"];

q.geometry = extent;

q.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;

qTask.execute(q, (featureSet)=>{

callback(featureSet.features);

}, (Errorq)=>{

console.log(Errorq,"Error doing query by extent");

return 0;

});

}

Re: destroy featureTable

RichardMoussopo — Thu, 28 Apr 2016 20:28:33 GMT

here is the sample code. I am expecting it to work a bit more like the FeatureTable from ArcGIS Online:

<!DOCTYPE html>

<html>

<head>

<title>FeatureTable Formatting</title>

<style>

html, body, #map {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

</style>

// Sample from http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=featuretable_formatting

// Globals

var map, myFeatureLayer, myFeatureTable;

require([

"esri/layers/FeatureLayer",

"esri/dijit/FeatureTable",

"esri/tasks/query",

"esri/tasks/QueryTask",

"esri/geometry/Extent",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/Color",

"esri/map",

"dojo/dom-construct",

"dojo/dom",

"dojo/number",

"dojo/parser",

"dojo/ready",

"dojo/on",

"dojo/_base/lang",

"dijit/registry",

"dijit/form/Button",

"dijit/layout/ContentPane",

"dijit/layout/BorderContainer",

"dijit/form/TextBox"

], function (

FeatureLayer, FeatureTable,Query, QueryTask, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map,

domConstruct, dom, dojoNum, parser, ready, on,lang,

registry, Button, ContentPane, BorderContainer, TextBox

) {

parser.parse();

ready(function(){

map = new Map("map",{

basemap: "dark-gray",

extent: new Extent({xmax: -13035353.854156237, xmin: -13053431.211345658,

ymax: 4038351.1313028745, ymin: 4034089.766975982,

"spatialReference":{"wkid":102100,"latestWkid":3857}

})

});

var myFeatureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Redlands_Emergency_Facilities/FeatureServer/0",{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"],

visible: true,

id: "fLayer"

});

//set a selection symbol for the featurelayer.

var selectionSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 197, 1])));

myFeatureLayer.setSelectionSymbol(selectionSymbol);

map.addLayer(myFeatureLayer);

map.on("load", loadTable);

map.on("extent-change", updateTableByExtent);

function updateTableByExtent(ext){

console.log("Map Extent: ", ext.extent);

var qTask = new QueryTask(myFeatureLayer);

var q= new Query();

q.where = "1=1";

q.returnGeometry = true;

q.outFields=["*"];

q.geometry = ext.extent;

q.spatialRelationship = Query.SPATIAL_REL_CONTAINS;

qTask.execute(q, successCallBack, errorCallBack);

function successCallBack(result){

// Update the featureTable here ====> this should work more like the featureTable widget on ArcGIS Online

console.log(result);

}

function errorCallBack(err){

console.log("Ooops Error: ", err);

}

function loadTable(){

//create new FeatureTable and set its properties

myFeatureTable = new FeatureTable({

featureLayer : myFeatureLayer,

map : map,

gridOptions: {

allowSelectAll: true,

allowTextSelection: true,

editable: true,

//zoomToSelection: false, //disable pan/zoom action on the map for selected features

// showGridHeader: false,

// showGridMenu: false,

dateOptions: {

//set date options at the feature table level

//all date fields will adhere this

datePattern: "EEEE, MMMM d, y"

//define order and visibility of fields. If the fields are not listed in 'outFIelds'

// then they will be hidden when the table starts.

outFields: ["factype", "facname", "organiz", "capacity", "curcapacity", "hoursoper",

"daysoper", "opsstatus", "opendate", "imageurl", "pocname", "pocphone"

fieldInfos: [

{

alias: 'Facility Type',

{

alias: 'Open Hours',

{

format: {

}

{

alias: 'Open Days',

{

alias: 'Status',

{

alias: 'Last Update',

//this will override FeatureTable.dateOptions

//settings

dateOptions: {

datePattern: 'M/d/y',

}

{

alias: 'More Info',

editable: false

{

alias: 'Phone #',

format: {

}

}, 'myTableNode');

myFeatureTable.startup();

}

});

</script>

</head>

</div>

</div>

</body>

</html>

Re: destroy featureTable

RichardMoussopo — Fri, 29 Apr 2016 14:42:28 GMT

Thank you Jeff for this trick. it works good.

Now the only issue I have is that the table is loading all attributes from the FeatureLayer. I only want the table to load only the selected features in the featureLayer. I have the fLayer added to the map with MODE ONDEMAND. I tried flayer.setDefinitionExpression(whereClause) it works ok but limit the records set for the next query.

Re: destroy featureTable

RobertScheitlin__GISP — Fri, 29 Apr 2016 18:54:55 GMT

Richard,

The FeatureTable does not respect the records available based on the FeatureLayers Mode (i.e. onDemand or Selection) but I provided some code to work around that in this thread:

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

Re: destroy featureTable

JonathanUihlein — Sun, 12 Dec 2021 06:24:59 GMT

Hi Richard,

I've updated some code in your sample and it should work as expected:

  // use a url string, not a layer object reference
  var qTask = new QueryTask("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Redlands_Emergency_Facilities/FeatureServer/0");
//... 
//...
function successCallBack(result){
  if (myFeatureTable && myFeatureTable.dataStore) {
    // requires "dojo/_base/array" 
    var newData = array.map(result.features, function(feature) {
      return feature.attributes;
    });
    myFeatureTable.dataStore.data = newData;
    // The following 2 lines are a way to get the header counts to refresh as expected..
    // .. FeatureTable should probably handle this internally when dataStore is updated (potential 3.17 update)
    myFeatureTable.featureCount = newData.length;
    myFeatureTable.clearSelection();
    myFeatureTable.refresh();
  }
}

Let me know if you run into any issues with the above.

Re: destroy featureTable

LauraMiles1 — Wed, 03 Aug 2016 18:47:52 GMT

myFeatureTable.grid.refresh(); is still not functioning in 3.17, but I was able to use your solution Jeff.

Re: destroy featureTable

Ronald_GuiovanniVenegas_Pulido — Fri, 26 Jan 2018 14:43:31 GMT

Good morning,

I don't know if the original subject of this question is still a problem. A few weeks ago I come across with the same issue and I manage to solve it by destroing the container of the FeatureTable. This is he code of my solution (with some extra code that you may not need at all):

var editorWidget;
var featureTable0;
var featureTable1;
var map;
var capaVisible = [];
var definitivo = [];
var relationships = [];
var relationship0;
var relationship1;
var relationship2;
var names = [];
var name0;
var name1;
var name2;
var myFeatureLayer0 = null;
var capasUsuario = [];
//var webmap = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //Mapa de consulta (Servidor de pruebas)
var webmap = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //Mapa de edición (Servidor pruebas)

require([
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"dojo/ready",
"dojo/parser",
"esri/arcgis/Portal",
"esri/arcgis/OAuthInfo",
"esri/IdentityManager",
"esri/config",
"esri/tasks/GeometryService",
"esri/symbols/PictureMarkerSymbol",
"esri/arcgis/utils",
"esri/dijit/LayerList",
"esri/tasks/query",
"dojo/on",
"dojo/dom",
"dojo/dom-attr",
"dojo/_base/lang",
"dojo/_base/array",
"esri/dijit/editing/Editor",
'dojo/_base/html',
"esri/dijit/HomeButton",
"dojo/domReady!"
], function (
FeatureLayer,
FeatureTable,
ready,
parser,
arcgisPortal,
OAuthInfo,
esriId,
config,
GeometryService,
PictureMarkerSymbol,
arcgisUtils,
LayerList,
Query,
on,
dom,
domAttr,
lang,
array,
Editor,
html,
HomeButton
) {
ready(function () {

var info = new OAuthInfo({
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
portalUrl: "https://your.server/arcgis",
popup: false
});

esriId.registerOAuthInfos([info]);

esriId.checkSignInStatus(info.portalUrl + "/sharing").then(
function () {
createMap();
}
).otherwise(
function () {
esriId.getCredential(info.portalUrl + "/sharing").then(function () {
createMap();
});
}
);

on(dom.byId("return"), "click", function () {
window.location.replace("inicio.php");
});

on(dom.byId("sign-out"), "click", function () {
esriId.destroyCredentials();
});

function createMap() {

parser.parse();

config.defaults.io.proxyUrl = "https://your.server/apps/edicion/Net/proxy.ashx";
config.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

//Creando el mapa
arcgisUtils.arcgisUrl = "https://your.server/arcgis/sharing/rest/content/items";

arcgisUtils.createMap(webmap, "map", {
ignorePopups: true
}).then(function (response) {

map = response.map;
var capas = arcgisUtils.getLayerList(response);
//var capasTematicas = capas.reverse();
var capasTematicas = capas;

for (var i = 0; i < arreglo.length; i++) {
for (var j = 0; j < capasTematicas.length; j++) {
if ((capasTematicas.layer.layerId === parseInt(arreglo[0])) && (capasTematicas.layer.arcgisProps.title === arreglo[1])) {
capasUsuario.push(capasTematicas);
}
}
}

var myWidget = new LayerList({
map: map,
layers: capasUsuario.reverse()
}, "layerList");
myWidget.startup();

var table1 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode3'
}, "myTableNode0");

var table2 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode4'
}, "myTableNode1");

var table3 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode5'
}, "myTableNode2");

// FeatureLayer editable
myFeatureLayer0 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

// FeatureLayer editable
var myFeatureLayer1 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

// FeatureLayer editable
var myFeatureLayer2 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

domAttr.set("tab0", "innerHTML", "Seleccione una capa para ver las tablas relacionadas");
domAttr.set("tab1", "innerHTML", ".");
domAttr.set("tab2", "innerHTML", ".");

//Crea un nuevo FeatureTable y establece sus propiedades
featureTable0 = new FeatureTable({
featureLayer: myFeatureLayer0,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode3');
featureTable0.startup();

//Crea un nuevo FeatureTable y establece sus propiedades
featureTable1 = new FeatureTable({
featureLayer: myFeatureLayer1,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode4');
featureTable1.startup();

//Crea un nuevo FeatureTable y establece sus propiedades
featureTable2 = new FeatureTable({
featureLayer: myFeatureLayer2,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode5');
featureTable2.startup();

on(myWidget, "toggle", lang.hitch(this, function (evt) {
array.map(myWidget.layers, function (layer, indx) {

if (evt.visible) {
if (indx === evt.layerIndex) {
if (layer.visibility === true) {
if (typeof capaVisible !== 'undefined') {
capaVisible.push(layer);
}
}
layer.layer.setVisibility(true);
layer.visibility = true;
}
if (indx !== evt.layerIndex) {
layer.layer.setVisibility(false);
layer.visibility = false;
}
}
});

if (typeof capaVisible[0] !== 'undefined') {
if (typeof capaVisible[0].layer.relationships[0] !== 'undefined') {
if (typeof capaVisible[0].layer.relationships[1] !== 'undefined') {
relationships = [];
names = [];
name0 = capaVisible[0].layer.name;
name1 = capaVisible[0].layer.relationships[0].name;
name2 = capaVisible[0].layer.relationships[1].name;
names.push(name0);
names.push(name1);
names.push(name2);
relationship0 = capaVisible[0].layer.layerId.toString();
relationship1 = capaVisible[0].layer.relationships[0].relatedTableId.toString();
relationship2 = capaVisible[0].layer.relationships[1].relatedTableId.toString();
relationships.push(relationship0);
relationships.push(relationship1);
relationships.push(relationship2);

if (featureTable0 && featureTable1 && featureTable2) {
featureTable0.destroy();
featureTable1.destroy();
featureTable2.destroy();
featureTable0 = null;
featureTable1 = null;
featureTable2 = null;
capaVisible = [];
loadTable(relationships, names);
}
} else if (typeof capaVisible[0].layer.relationships[1] === 'undefined') {
relationships = [];
names = [];
name0 = capaVisible[0].layer.name;
name1 = capaVisible[0].layer.relationships[0].name;
name2 = ".";
names.push(name0);
names.push(name1);
names.push(name2);
relationship0 = capaVisible[0].layer.layerId.toString();
relationship1 = capaVisible[0].layer.relationships[0].relatedTableId.toString();
relationship2 = "0";
relationships.push(relationship0);
relationships.push(relationship1);
relationships.push(relationship2);

} else if (typeof capaVisible[0].layer.relationships[0] === 'undefined') {
relationships = [];
names = [];
name0 = capaVisible[0].layer.name;
name1 = ".";
name2 = ".";
names.push(name0);
names.push(name1);
names.push(name2);
relationship0 = capaVisible[0].layer.layerId.toString();
relationship1 = "0";
relationship2 = "0";
relationships.push(relationship0);
relationships.push(relationship1);
relationships.push(relationship2);

});
}

function loadTable(id, nombre) {
map.removeLayer(myFeatureLayer0);
domAttr.set("tab0", "innerHTML", nombre[0]);
domAttr.set("tab1", "innerHTML", nombre[1]);
domAttr.set("tab2", "innerHTML", nombre[2]);

var table1 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode3'
}, "myTableNode0");

var table2 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode4'
}, "myTableNode1");

var table3 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode5'
}, "myTableNode2");

// FeatureLayer1 editable
myFeatureLayer0 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/" + id[0], {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

// Recuadro azul al seleccionar un feature en el mapa
var selectionSymbol = new PictureMarkerSymbol("img/select.png", 35, 35);

myFeatureLayer0.setSelectionSymbol(selectionSymbol);

// Cuando un usuario hace clic sobre un elemento en el mapa, la fila correspondiente en la primer tabla
// (Tabla de featureLayer) se selecciona
myFeatureLayer0.on("click", function (evt) {
var idProperty = myFeatureLayer0.objectIdField,
feature,
featureId,
query;

if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
feature = evt.graphic,
featureId = feature.attributes[idProperty];

query = new Query();
query.returnGeometry = false;
query.objectIds = [featureId];
query.where = "1=1";

myFeatureLayer0.selectFeatures(query, FeatureLayer.SELECTION_NEW);
}
});
map.addLayer(myFeatureLayer0);

//Crea una nueva FeatureTable y establece sus propiedades
featureTable0 = new FeatureTable({
featureLayer: myFeatureLayer0,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode3');
featureTable0.startup();

console.log("featureTable0");
console.log(featureTable0);

// FeatureLayer2 editable
var myFeatureLayer1 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/" + id[1], {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

//Crea una nueva FeatureTable y establece sus propiedades
featureTable1 = new FeatureTable({
featureLayer: myFeatureLayer1,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode4');
featureTable1.startup();

console.log("featureTable1");
console.log(featureTable1);

// FeatureLayer2 editable
var myFeatureLayer2 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/" + id[2], {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

//Crea una nueva FeatureTable y establece sus propiedades
featureTable2 = new FeatureTable({
featureLayer: myFeatureLayer2,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode5');
featureTable2.startup();

// Escucha al evento para refrescar la información
featureTable0.on("refresh", function (evt) {
//console.log("refresh event - ", evt);
});

featureTable0.on("show-related-records", function (evt) {
console.log("show-related-records", evt);
});

// Escucha al evento para refrescar la información
featureTable1.on("refresh", function (evt) {
//console.log("refresh event - ", evt);
});

// Escucha al evento para refrescar la información
featureTable2.on("refresh", function (evt) {
//console.log("refresh event - ", evt);
});

relationships = null;
}

});
});

And in this video you can see how this code works (of course, the HTML code is on a different file):

(view in My Videos)

I hope this answer helps with this problem

Re: destroy featureTable

JeffJacobson — Sun, 12 Dec 2021 06:24:56 GMT

Richard Moussopo, you are correct when you state that the FeatureTable does not update when you update your FeatureLayer. I contacted Esri customer support in February about this and was told to use the workaround that you are trying, to destroy and recreate the table each time the feature layer is updated.

I asked them to create an enhancement request to keep the features in sync, which they did:

#ENH-000094524 [Enhancement] Update Featuretable when the underlying Featurelayer's definition query changes

Below is the function I used to create the table, which will destroy the previous table each time it is called.

var table;
function createTable() {
    // Destroy existing table.
    if (table) {
        table.destroyRecursive();
        registry.byId("tablePane").domNode.innerHTML = '<div id="table"></div>';
    }

    /**
     * Resizes the table panel as the table is collapsed or expanded.
     * @param {Event} e - Table close button click event.
     */
    function resizeTablePanel(e) {
        var gridHeaderNode = registry.byId(table._gridHeaderNode || table._gridMenu).domNode;
        var tableNode = registry.byId("tablePane").domNode;
        var borderContainer = registry.byId("borderContainer");
        var isOpening = e.target.classList.contains("toggleClosed");
        if (isOpening) {
            tableNode.style.height = tableNode.dataset.openHeight || "50%";
        } else {
            // Store the old height.
            tableNode.dataset.openHeight = tableNode.style.height || [tableNode.clientHeight, "px"].join("");
            // Set to "closed" height.
            tableNode.style.height = [gridHeaderNode.clientHeight, "px"].join("");
        }
        borderContainer.resize();
    }

    // Create the feature table
    table = new FeatureTable({
        featureLayer: layer,
        outFields: outFields,
        editable: false,
        syncSelection: false,
        zoomToSelection: false,
        // These fields are hidden by default, but user can turn them back on.
        hiddenFields: [
            "Direction_Ind",
            "RouteID",
            "Begin_ARM",
            "End_ARM",
            "SRMP_Begin_AB_Ind",
            "SRMP_End_AB_Ind",
            "SRMP_Date",
            "LRSDATE",
            "RelRouteType",
            "RelRouteQual",
            "Mid_Arm",
            "Mid_Mile_Post",
            "Project_List",
            "LOC_ERROR"
        ],
        showGridHeader: true,
        map: map
    }, "table");
    table.startup();

    // 3.15 event handler setup.

    /**
     *
     * @param {DGridRow[]} rows - The rows that were selected
     */
    table.on("dgrid-select", function (rows) {
        selectOrDeselectFeatures(rows);
    });

    /**
     *
     * @param {DGridRow[]} rows - The rows that were unselected
     */
    table.on("dgrid-deselect", function (rows) {
        selectOrDeselectFeatures(rows, true);
    });

    // 3.16 event handler setup

    /////**
    //// *
    //// * @param {DGridRow[]} rows - The rows that were selected
    //// */
    ////table.on("row-select", function (rows) {
    ////    selectOrDeselectFeatures(rows);
    ////});

    /////**
    //// *
    //// * @param {DGridRow[]} rows - The rows that were unselected
    //// */
    ////table.on("row-deselect", function (rows) {
    ////    selectOrDeselectFeatures(rows, true);
    ////});


    // resize panel when table close is toggled.
    table.tableCloseButton.addEventListener("click", resizeTablePanel);
}