How to add image in featuretable grid in ArcGIS API for js 4. x FeaturerTable widget as suggested in below post, please suggest.
Below is the code for 3x
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>FeatureTable Formatting</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
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(){
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: [
{
name: 'Building_Size_Sqft',
alias: 'Building Size',
editable: false,
format: {
template: "${value} sqft"
}
},
{
name: 'Available_Size_Sqft',
alias: 'Available Size',
format: {
template: "${value} sqft"
}
},
{
name: 'Primary_Parking_Type',
format: {
template: "${value} parking"
}
},
{
name: 'OBJECTID',
alias: ' ',
editable: false,
format: {
template: '<span class="esri-icon-zoom-in-magnifying-glass"></span>'
}
}
],
}, '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>
<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>
