I am trying to display coded names (TREE_SPECIES) in the grid, instead of values using ArcGIS JavaScript.
It says updateFeature is undefined. Below is my entire code, which I tried.
<!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>BGSU Memorial Tree Listing</title>
<script src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.highlight-4.js"></script>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h3 {
color:#f89b35;
text-align:center;
}
h4 {
color:#4f2c1d;
text-align:center;
}
#grid {
height: 100%;
width: 100%;
}
.field-OBJECTID {
width: 10px;
font-size: .80em;
font-weight: normal;
}
.field-MEMORIAL {
width: 20px;
font-size: .80em;
font-weight: normal;
}
.field-DONOR {
width: 20px;
font-size: .80em;
font-weight: normal;
}
.field-MEMNUM {
width: 10px;
font-size: .80em;
font-weight: normal;
}
.field-PLINK {
width: 10px;
font-size: .80em;
font-weight: normal;
}
.field-TLINK {
width: 10px;
font-size: .80em;
font-weight: normal;
}
.field-TREE_SPECIES {
width: 10px;
font-size: .80em;
font-weight: normal;
}
.field-TREE_VARIETY {
width: 10px;
font-size: .80em;
font-weight: normal;
}
#grid .dgrid-row-odd {
background: #F2F5F9;
}
.highlight {
background-color: yellow; }
</style>
<script src="http://js.arcgis.com/3.10/"> </script>
<script>
var grid;
var i;
var updateFeature;
require([ // required modules
"esri/layers/FeatureLayer",
"dgrid/Grid",
"dojo/store/Memory",
"dojo/_base/array",
"esri/map",
"esri/tasks/query",
"esri/tasks/QueryTask",
"dojo/_base/declare",
"dojo/on",
"dojo/number",
"dojo/dom",
"dojo/dom-style",
"dojo/ready"
],
function(
FeatureLayer,
Grid,
Memory,
array,
map,
Query,
QueryTask,
declare,
on,
number,
dom,
domStyle,
TREE_VARIETY,
MEMORIAL_TREE_DONOR,
ready
){
var form = dom.byId("text"),
//create the grid
grid = new Grid({
bufferRows: Infinity, // all the data is available in the grid
columns: { //defines the cloumns
OBJECTID: "OBJECTID",
MEMORIAL: "MEMORIAL",
DONOR: "DONOR",
MEMNUM: "MEMNUM",
TREE_SPECIES: "SPECIES",
TREE_VARIETY: "VARIETY",
TLINK: {
label: "TLINK",
formatter: makeLink1
},
PLINK: {
label: "PLINK",
formatter: makeLink2
}
},
},"grid");
// create feature layer
var layer = new FeatureLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTEST/MapServer/0", {
outFields: ["*"]
});
layer.on("load", function(){
var query = new Query();
query.where = "1=1";
query.outFields = ["*"];
/* for (var i = 0; i < layer.fields.length; i++) {
console.debug(layer.fields[i].domain);
var updateFeature = layer.fields[i].domain;
} */
layer.queryFeatures(query, function(featureSet){
// executes on success
console.log("query featureSet", featureSet);
if (featureSet.length>0)
var updateFeature = featureSet[0].getlayer().name();
populateTable(featureSet);
}, function(error){
console.log("query error", error);
});
});
function populateTable(featureSet){
var data = array.map(featureSet.features, function(feature){
return {
"OBJECTID": feature.attributes.OBJECTID,
"MEMORIAL": feature.attributes.MEMORIAL,
"DONOR": feature.attributes.MEMORIAL_TREE_DONOR,
"MEMNUM": feature.attributes.MEMNUM,
"PLINK": feature.attributes.PLINK,
"TLINK": feature.attributes.TLINK,
"TREE_SPECIES":updateFeature.atrributes.TREE_SPECIES,
"TREE_VARIETY": feature.attributes.TREE_VARIETY
};
});
grid.renderArray(data);
}
function makeLink1(url){
console.log("make link", url);
return '<a href="Photo.html?value= '+url+'&DONOR='+DONOR+'&TreeVariety='+TreeVariety+'">' +'Photo'+ '</a>';
}
function makeLink2(url){
console.log("make link", url);
return '<a href="Map.html?value='+url+' ">' +'Plaque'+ '</a>';
}
});
</script>
</head>
<body>
<h3 align="absmiddle" > BGSU Memorial Tree Locations </h3>
<h4 align="center" > <i>Listings | <a target="_self" href="locations.html">Locations</a></i> </h4>
<br>
<div align="center">
<form>
<h4>Enter a name, matching result will be highlighted: <input type="text" id="text" />
<a href="#" onclick="javascript:void($('body').removeHighlight().highlight(document.getElementById('text').value)); return false;"> Search</a> </h4>
</form>
</div>
<br>
<div id="grid">
</div>
</body>
</html>
