In my App, I create a FeatureTable that works with a FeatureLayer. When the FeatureTable displays the data and the FeatureLayer is drawn on the Map. I need to fire an event on clicking a row of the Grid, and retrieve the record's cells values. Below is the related code. However, when I click a row, nothing happens. What's wrong with my code? Thanks if you can help.
myTable = new mv.esriModules.FeatureTable({
layer: myFeatureLayer,
visibleElements: { selectionColumn: true },
fieldConfigs: _fieldsConfig,
container: document.getElementById("tableDiv")
items: [{
label: "Zoom to feature(s)",
iconClass: "esri-icon-zoom-in-magnifying-glass",
clickFunction: function (event) { //
debugger;
//zoomToSelectedFeatureTable();
//console.log("Need to build zoomToSelectedFeatureTable function");
}
}]
});
Solved! Go to Solution.
It looks like you're configuring the FeatureTable incorrectly. You left off the menuConfig property for the items
myTable = new mv.esriModules.FeatureTable({
layer: myFeatureLayer,
visibleElements: { selectionColumn: true },
fieldConfigs: _fieldsConfig,
container: document.getElementById("tableDiv"),
menuConfig: {
items: [{
label: "Zoom to feature(s)",
iconClass: "esri-icon-zoom-in-magnifying-glass",
clickFunction: function (event) { //
debugger;
//zoomToSelectedFeatureTable();
//console.log("Need to build zoomToSelectedFeatureTable function");
}
}]
}
});
It would help if you use the Insert Code option when adding code.
It looks like you're configuring the FeatureTable incorrectly. You left off the menuConfig property for the items
myTable = new mv.esriModules.FeatureTable({
layer: myFeatureLayer,
visibleElements: { selectionColumn: true },
fieldConfigs: _fieldsConfig,
container: document.getElementById("tableDiv"),
menuConfig: {
items: [{
label: "Zoom to feature(s)",
iconClass: "esri-icon-zoom-in-magnifying-glass",
clickFunction: function (event) { //
debugger;
//zoomToSelectedFeatureTable();
//console.log("Need to build zoomToSelectedFeatureTable function");
}
}]
}
});
It would help if you use the Insert Code option when adding code.
Dear Ken: Thanks for your response. I used your code, but it still does not fire. Is there something still missin? Thanks again.
myTable = new mv.esriModules.FeatureTable({
layer: myFeatureLayer, visibleElements: { selectionColumn: true },
fieldConfigs: _fieldsConfig,
container: document.getElementById("tableDiv"),
menuConfig: {
items: [{
label: "Zoom to feature(s)",
iconClass: "esri-icon-zoom-in-magnifying-glass",
clickFunction: function (event) { //
debugger;
//zoomToSelectedFeatureTable();
}
}]
}
});
Dear Ken: For the code below
this.gridTbl = $('#tableDiv'); // the Grid container
this.gridTbl.click(function(e) {
debugger; }
if I click a row of the grid, the event fire. Is it possible to retrieve the row's value through the 'e'? Through debugging, I can see some expected values (but not all). Thanks if you can help.
}
That will give you information about the cell of the table you click on, but I'm not seeing anything about the row itself. Here's how to get the text of the cell
console.log(e.target.innerText);
That code refers to the context menu that you didn't want from your other thread.
I did use
.esri-feature-table__menu .esri-button-menu{display:none;}
through e.target.innerHTML, I can retrieve only the cell's value. What I can retrieve the row's value? Thanks for your help.
I don't know if that's possible. The FeatureTable widget is lacking in a few things.
However, remember that you have the selection-changed event (from this discussion) you can use.