Zoom to Button in each row of FeaureTable widget of arcgis api for js 4.x

ImtiyazPasha — Tue, 09 Aug 2022 06:40:09 GMT

Hi,

How to add image in featuretable grid in ArcGIS API for js 4. x FeaturerTable widget as suggested in below post, please suggest.

https://community.esri.com/t5/arcgis-api-for-javascript-questions/add-image-in-featuretable-grid/td-p/758691.

Below is the code for 3x

<!DOCTYPE html>

<html>

<head>

<title>FeatureTable Formatting</title>

<style>

html, body, #map {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

</style>

require([

"esri/layers/FeatureLayer",

"esri/dijit/FeatureTable",

"esri/geometry/Extent",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/Color",

"esri/map",

"esri/graphicsUtils",

"esri/tasks/query",

"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, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map,

graphicsUtils, Query,

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

registry, Button, ContentPane, BorderContainer, TextBox

) {

parser.parse();

ready(function(){

var map = new Map("map",{

basemap: "dark-gray-vector"

});

map.on("load", loadTable);

function loadTable(){

var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/New_Real_Estate/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);

// create new FeatureTable and set its properties

var myFeatureTable = new FeatureTable({

featureLayer : myFeatureLayer,

map : map,

showAttachments: true,

// only allows selection from the table to the map

// syncSelection: true,

// zoomToSelection: true,

gridOptions: {

allowSelectAll: true,

allowTextSelection: true,

editable: true,

dateOptions: {

// set date options at the feature table level

// all date fields will adhere this

datePattern: "MMMM d, y"

// define order of available fields. If the fields are not listed in 'outFields'

// then they will not be available when the table starts.

outFields: ["Address", "Created_Date", "Use_Type", 'OBJECTID'],

// use fieldInfos property to change field's label (column header),

// the editability of the field, and to format how field values are displayed

fieldInfos: [

{

alias: 'Building Size',

editable: false,

format: {

}

{

alias: 'Available Size',

format: {

}

{

format: {

}

{

alias: ' ',

editable: false,

format: {

}

}, 'myTableNode');

myFeatureTable.on("load", function(evt){

myFeatureTable.grid.on("td.field-OBJECTID:click", function(evt){

var OID = myFeatureTable.selectedRows[0].OBJECTID;

console.log(OID);

zoomToSelected(OID);

//Do your zoom event stuff here

});

myFeatureTable.startup();

// listen to show-attachments event

myFeatureTable.on("show-attachments", function(evt){

console.log("show-attachments event - ", evt);

});

function zoomToSelected(Id){

var query = new Query();

query.returnGeometry = true;

query.outFields = [ "*" ];

query.where = "OBJECTID = '" + Id + "'" ;

myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features){

var extent = graphicsUtils.graphicsExtent(features).expand(1.25);

map.setExtent(extent);

});

}

});

</script>

</head>

</div>

</div>

</body>

</html>

Re: Zoom to Button in each row of FeaureTable widget of arcgis api for js 4.x

ImtiyazPasha — Wed, 10 Aug 2022 20:04:28 GMT

Just checking no solution for 4.x FeatureTable widget?

topic Re: Zoom to Button in each row of FeaureTable widget of arcgis api for js 4.x in ArcGIS JavaScript Maps SDK Questions

Zoom to Button in each row of FeaureTable widget of arcgis api for js 4.x

Re: Zoom to Button in each row of FeaureTable widget of arcgis api for js 4.x