Lidia,
OK here is the sample re-worked to show all the data.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>dGrid - 4.9</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#info,
#gridDisplay {
position: absolute;
bottom: 0;
left: 0;
height: 35%;
background-color: white;
border-color: grey;
width: 100%;
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
#info {
z-index: 90;
font-size: 16px;
padding-left: 20px;
}
#info * {
padding-right: 20px;
}
#gridDisplay {
z-index: 80;
}
.info {
line-height: 20px;
padding-left: 5px ! important;
}
.dgrid-header,
.dgrid-header-row {
background-color: #eee;
color: #57585A;
}
.dgrid-row-even {
background-color: #F7F8F8;
}
.dgrid-row-odd {
background-color: #EFEFEF;
}
.dgrid-selected {
background: #B4DAF5;
}
.dgrid-row {
border: none
}
</style>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/CSVLayer",
"esri/Graphic",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/geometry/SpatialReference",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection"
],
function(
WebMap, MapView, CSVLayer, Graphic, Legend, Expand, SpatialReference,
OnDemandGrid, ColumnHider, Memory, StoreAdapter, Selection
) {
let map, view, csvLayer, csvLayerView, grid;
const gridDiv = document.getElementById("grid");
const infoDiv = document.getElementById("info");
setupTheView();
const gridFields = ["__OBJECTID", "Category", "Season", "Name",
"Nature", "wmo_wind"
];
const dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "__OBJECTID"
})
});
csvLayer.when(function() {
createGrid(csvLayer.fields);
view.whenLayerView(csvLayer).then(function(layerView) {
csvLayerView = layerView;
popGrid();
});
})
.catch(errorCallback);
function popGrid() {
view.graphics.removeAll();
if (csvLayerView) {
const query = {
where: "1=1",
outFields: ["*"]
};
csvLayerView.queryFeatures(query).then(function(results) {
const graphics = results.features;
if (graphics.length > 0) {
gridDiv.style.zIndex = 90;
infoDiv.style.zIndex = 80;
document.getElementById("featureCount").innerHTML =
"<b>Showing attributes for " +
graphics.length.toString() + " features </b>"
} else {
gridDiv.style.zIndex = 80;
infoDiv.style.zIndex = 90;
}
const data = graphics.map(function(feature, i) {
return Object.keys(feature.attributes)
.filter(function(key) {
return (gridFields.indexOf(key) !== -1);
})
.reduce(function(obj, key) {
obj[key] = feature.attributes[key];
return obj;
}, {});
});
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
})
.catch(errorCallback);
}
}
function selectFeatureFromGrid(event) {
view.popup.close();
const row = event.rows[0]
const id = row.data.__OBJECTID;
const query = {
objectIds: [parseInt(id)],
outFields: ["*"],
returnGeometry: true,
outSpatialReference: view.SpatialReference
};
csvLayerView.queryFeatures(query).then(function(results) {
const graphics = results.features;
view.graphics.removeAll();
view.goTo(graphics[0].geometry);
const selectedGraphic = new Graphic({
geometry: graphics[0].geometry,
symbol: {
type: "simple-marker",
style: "circle",
color: "orange",
size: "12px",
outline: {
color: [255, 255, 0],
width: 2
}
}
});
view.graphics.add(selectedGraphic);
})
.catch(errorCallback);
}
function createGrid(fields) {
var columns = fields.filter(function(field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
}).map(function(field) {
if (field.name === "__OBJECTID") {
return {
field: field.name,
label: field.name,
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});
grid = new(OnDemandGrid.createSubclass([Selection, ColumnHider]))({
columns: columns
}, "grid");
grid.on("dgrid-select", selectFeatureFromGrid);
}
function setupTheView() {
const url =
"https://arcgis.github.io/arcgis-samples-javascript/sample-data/hurricanes.csv";
csvLayer = new CSVLayer({
title: "Hurricanes",
url: url,
spatialReference: new SpatialReference({wkid: 54042}),
copyright: "NOAA",
popupTemplate: {
title: "{Name}",
content: [{
type: "text",
text: "Category {Category} storm with that occurred at {ISO_time}."
}, {
type: "fields",
fieldInfos: [{
fieldName: "wmo_pres",
label: "Pressure"
}, {
fieldName: "wmo_wind",
label: "Wind Speed (mph)"
}]
}],
fieldInfos: [{
filedName: "ISO_time",
format: {
dateFormat: "short-date-short-time"
}
}]
},
renderer: {
type: "unique-value",
field: "Category",
uniqueValueInfos: createUniqueValueInfos()
}
});
map = new WebMap({
portalItem: {
id: "7d127cef99a44327b79f5185602b8b6b"
},
layers: [csvLayer]
});
view = new MapView({
container: "viewDiv",
map: map,
highlightOptions: {
color: "#2B65EC",
fillOpacity: 0.4
},
padding: {
bottom: infoDiv.clientHeight
}
});
const legendExpand = new Expand({
view: view,
content: new Legend({
view: view,
style: "card"
})
});
view.ui.add(legendExpand, "top-left");
}
function createUniqueValueInfos() {
const fireflyImages = [
"cat1.png",
"cat2.png",
"cat3.png",
"cat4.png",
"cat5.png"
];
const baseUrl =
"https://arcgis.github.io/arcgis-samples-javascript/sample-data/";
return fireflyImages.map(function(url, i) {
return {
value: i + 1,
symbol: {
type: "picture-marker",
url: baseUrl + url
}
}
});
}
function errorCallback(error) {
console.log("error:", error)
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="info">
<span class="info">
<b>Populating grid...</b>
</span>
<br />
</div>
<div id="gridDisplay">
<span class="info" id="featureCount"></span>
<div id="grid"></div>
</div>
</div>
</body>
</html>