Satya,
Here is your code working to populate the grid when there is an actual vname value in the data. I did not work on any of your other errors.
<!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>AP Housing Application</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style type="text/css">
body,
html,
#main {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
dojoConfig = {
parseOnLoad: true
};
</script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
}
/* Change color of icons to match bar chart and selection symbol */
.esriPopup.dark div.titleButton,
.esriPopup.dark div.titlePane .title,
.esriPopup.dark div.actionsPane .action {
color: #000000;
font-weight: bold;
}
/* Additional customizations */
.esriPopup.dark .esriPopupWrapper {
border: none;
}
.esriPopup .contentPane {
text-align: left;
}
.esriViewPopup .gallery {
margin: 0 auto;
}
.title {
padding: 10px;
background: #fafafa;
}
.title .logo img {
float: left;
margin-right: 10px;
}
.title .logo h1 {
color: #C9584F;
padding: 0px;
font-size: 30px;
font-weight: bold;
float: left;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
.title .logo h1>span {
color: #111;
padding: 0px;
font-size: 20px;
font-weight: bold;
}
.title .cm {
float: right;
text-align: center;
color: #C9584F;
font-size: 15px;
}
.title .cm h2 {
color: #C9584F;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif
}
</style>
<script>
var map;
var veTileLayer;
var findTask, findParams;
var center, zoom;
var grid, store, store3;
var county;
var resizeTimer;
require([
"esri/map", "esri/tasks/query", "esri/tasks/QueryTask", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/_base/array", "dojo/DeferredList",
"dijit/form/ComboBox", "dojo/data/ItemFileReadStore", "dojo/store/Memory",
"esri/virtualearth/VETiledLayer", "dijit/form/Button",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"dijit/registry",
"dojox/grid/DataGrid",
"esri/dijit/Popup", "esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol", "esri/Color",
"dojo/dom-class", "dojo/dom-construct",
"dojox/charting/Chart", "dojox/charting/themes/Dollar",
"dojo/on", "dojo/domReady!"],
function (
Map, Query, QueryTask, parser, BorderContainer, ContentPane,
arrayUtils, DeferredList,
ComboBox, ItemFileReadStore, Memory,
VETiledLayer, Button,
SimpleMarkerSymbol, SimpleLineSymbol, registry, DataGrid,
Popup, PopupTemplate,
FeatureLayer,
SimpleFillSymbol, Color,
domClass, domConstruct,
Chart, theme,
on) {
parser.parse();
var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));
//Add the dark theme which is customized further in the <style> tag at the top of this page
domClass.add(popup.domNode, "dark");
map = new Map("map", {
basemap: "satellite",
center: [79.2, 18.10],
zoom: 6,
infoWindow: popup
});
var template = new PopupTemplate({
title: "AP HOUSING APPLICANTS <BR>",
description: "<BR> BENEFICIARY ID: {ben_id} <br> <br>BENEFICIARY NAME: {ben_name} <br><br>FATHER'S NAME: {father_nam}<br><br>AADHAR ID : {uid} <br><br> SCHEME NAME: {scheme_nam} <br><br>LATITUDE: {lat} <br><br> LONGITUDE: {lon} <br>",
});
var featureLayer = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: template
});
veTileLayer = new VETiledLayer({
bingMapsKey: 'Ame5R45lEOTdPXxlhxuAXN2sDT8vyEJcgXGeZpPOPHBLbg2XqkPMaL5OJHp0OlV0',
mapStyle: VETiledLayer.MAP_STYLE_AERIAL
});
map.addLayer(veTileLayer);
map.addLayer(featureLayer);
var polygonQuery = null;
var polygonQueryTask = null;
var polygonQuery1 = null;
var polygonQueryTask1 = null;
var polygonQuery2 = null;
var polygonQueryTask2 = null;
var polygonQuery3 = null;
var polygonQueryTask3 = null;
// RIYAS: Wait till map is loaded before firing query, needed for getting map spatial reference
map.on("load", function () {
var queryTask = new QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/1");
//Define query parameters
var query = new Query();
query.outFields = ["dname"];
query.returnGeometry = true;
query.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query.where = "dname <> ''"
queryTask.execute(query, populateList);
// RIYAS: Setup query to behave as identify
polygonQueryTask = new QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/1");
polygonQuery = new Query();
polygonQuery.returnGeometry = true;
polygonQuery.outFields = ["*"];
polygonQuery.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
polygonQuery.outSpatialReference = map.spatialReference;
// RIYAS: Setup query to behave as identify
polygonQueryTask1 = new QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/2");
polygonQuery1 = new Query();
polygonQuery1.returnGeometry = true;
polygonQuery1.outFields = ["*"];
polygonQuery1.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
polygonQuery1.outSpatialReference = map.spatialReference;
// RIYAS: Setup query to behave as identify
polygonQueryTask2 = new QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/3");
polygonQuery2 = new Query();
polygonQuery2.returnGeometry = true;
polygonQuery2.outFields = ["*"];
polygonQuery2.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
polygonQuery2.outSpatialReference = map.spatialReference;
polygonQueryTask3 = new QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/0");
polygonQuery3 = new Query();
polygonQuery3.returnGeometry = true;
polygonQuery3.outFields = ["*"];
polygonQuery3.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
polygonQuery3.outSpatialReference = map.spatialReference;
});
var infoTemplate = new esri.InfoTemplate("District: ${dname}", "District : ${dname}<br/>");
var infoTemplate1 = new esri.InfoTemplate("DISTRICT: ${dname}", "District : ${dname}<br/> Mandal : ${mname}<br/> ");
var infoTemplate2 = new esri.InfoTemplate("DISTRICT: ${dname}", "District : ${dname}<br/> Mandal : ${mname}<br/> Village : ${vname}<br/>");
var infoTemplate3 = new esri.InfoTemplate("DISTRICT: ${ben_id}", "BENEFICIARY : ${ben_id}<br/>BENEFICIARY name : ${ben_name}<br/>fathers nme : ${father_nam}<br/> AADHAR : ${uid}<br/> scheme name : ${scheme_nam}<br/> District : ${dname}<br/> Mandal : ${mname}<br/> Village : ${vname}<br/>");
var infoTemplates = [infoTemplate, infoTemplate1, infoTemplate2, infoTemplate3];
// RIYAS: Execute query to behave as identify
function executeIdentifyTask(where, pnt) {
polygonQuery.where = where;
polygonQuery1.where = where;
polygonQuery2.where = where;
polygonQuery3.where = where;
var deferred = polygonQueryTask
.execute(polygonQuery);
var deferred1 = polygonQueryTask1
.execute(polygonQuery1);
var deferred2 = polygonQueryTask2
.execute(polygonQuery2);
var deferred3 = polygonQueryTask3
.execute(polygonQuery3);
// InfoWindow expects an array of features from each deferred
// object that you pass. If the response from the task execution
// above is not an array of features, then you need to add a callback
// like the one above to post-process the response and return an
// array of features.
var defList = new DeferredList([deferred, deferred1, deferred2, deferred3]).then(function (results) {
var features = [];
arrayUtils.forEach(results, function (result, idx) {
if (result[0] === true) {
features = features.concat(arrayUtils.map(result[1].features, function (feature) {
feature.setInfoTemplate(infoTemplates[idx]);
return feature;
}));
}
});
map.infoWindow.setFeatures(features);
map.infoWindow.show(pnt);
});
}
map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer", {
"opacity": 1,
"id": "dynamic"
}));
function populateList(results) {
//initialize InfoTemplate
//create symbol for selected features
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 0.1, null, new Color([255, 255, 0, 0.5]));
//Populate the dropdown list box with unique values
// var county;
var values = [];
var testVals = {};
//Add option to display all zoning types to the dropdown list
values.push({
name: ""
})
var features = results.features;
dojo.forEach(features, function (feature) {
county = feature.attributes.dname;
if (!testVals[county]) {
testVals[county] = true;
values.push({
name: county,
shape: feature.geometry,
centroid: feature.geometry.type === "point" ? feature.geometry : feature.geometry.getCentroid()
}); // RIYAS: set shape to list store
}
});
var dataItems = {
identifier: 'name',
label: 'name',
items: values
};
var store = new dojo.store.Memory({
data: dataItems
});
dijit.byId("mySelect").store = store;
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = results.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(symbol);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
// This takes the graphics array you get back from your query and
// gets the overall extent for them. Make sure return geometry is set to
// true in your query.
var extent = esri.graphicsExtent(results.features);
// Use that to set the extent, 1.5 is something I use in my app, but play with
// it to find a setting you like, setting the second parameter to true will get you an extend
// that is at the closest level of your cached service.
map.setExtent(extent.expand(1.0), true);
}
}
// this replaces your applyLayerDef() function
dijit.byId("mySelect").on("change", function () {
//Filter the layer to display only the selected zoning types
var county = dijit.byId("mySelect").value;
var centroid = dijit.byId("mySelect").item.centroid;
if (county !== 'ALL') {
var layerDefs = [];
layerDefs[2] = "dname = " + "'" + county + "'";
layerDefs.visibleLayers = [2];
map.setExtent(dijit.byId("mySelect").item.shape.getExtent(infoTemplate).expand(1.7));
// RIYAS: Get shape from list store and zoom to its extent
executeIdentifyTask("dname = '" + county + "'", centroid);
}
var queryTask1 = new QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/2");
var query1 = new Query();
query1.outFields = ["dname", "mname"];
query1.returnGeometry = true;
query1.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query1.where = "mname<> '' and dname='" + dijit.byId("mySelect").value + "'"
queryTask1.execute(query1, populateList1);
});
function populateList1(results1) {
//create symbol for selected features
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 0.1, null, new Color([255, 255, 0, 0.5]));
//Populate the dropdown list box with unique values
var city;
var values1 = [];
var testVals1 = {};
//Add option to display all zoning types to the dropdown list
values1.push({
name: ""
})
var features1 = results1.features;
dojo.forEach(features1, function (feature1) {
city = feature1.attributes.mname;
if (!testVals1[city]) {
testVals1[city] = true;
values1.push({
name: city,
shape: feature1.geometry,
centroid: feature1.geometry.type === "point" ? feature1.geometry : feature1.geometry.getCentroid()
}); // RIYAS: set shape to list store
}
});
var dataItems1 = {
identifier: 'name',
label: 'name',
items: values1
};
var store1 = new Memory({
data: dataItems1
});
dijit.byId("mySelect1").store = store1;
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures1 = results1.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures1.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic1 = resultFeatures1;
graphic1.setSymbol(symbol);
//Set the infoTemplate.
graphic1.setInfoTemplate(infoTemplate1);
//Add graphic to the map graphics layer.
map.graphics.add(graphic1);
// This takes the graphics array you get back from your query and
// gets the overall extent for them. Make sure return geometry is set to
// true in your query.
var extent1 = esri.graphicsExtent(results1.features);
// Use that to set the extent, 1.5 is something I use in my app, but play with
// it to find a setting you like, setting the second parameter to true will get you an extend
// that is at the closest level of your cached service.
map.setExtent(extent1.expand(1.0), true);
}
}
// this replaces your applyLayerDef() function
dijit.byId("mySelect1").on("change", function () {
//Filter the layer to display only the selected zoning types
var city = dijit.byId("mySelect1").value;
var centroid = dijit.byId("mySelect1").item.centroid;
if (city !== 'ALL') {
var layerDefs1 = [];
layerDefs1[2] = "mname = " + "'" + city + "'";
layerDefs1.visibleLayers = [2];
map.setExtent(dijit.byId("mySelect1").item.shape.getExtent(infoTemplate1).expand(1.7));
// RIYAS: Get shape from list store and zoom to its extent
executeIdentifyTask("mname = '" + city + "'", centroid);
}
var queryTask2 = new QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/3");
var query2 = new Query();
query2.outFields = ["*"];
query2.returnGeometry = true;
query2.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query2.where = "dname='" + dijit.byId("mySelect").value + "'and mname='" + dijit.byId("mySelect1").value + "'and vname<>''";
queryTask2.execute(query2, populateList2);
});
function populateList2(results2) {
//create symbol for selected features
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 0.1, null, new Color([255, 255, 0, 0.5]));
//Populate the dropdown list box with unique values
var vill;
var values2 = [];
var testVals2 = {};
//Add option to display all zoning types to the dropdown list
values2.push({
name: ""
})
var features2 = results2.features;
dojo.forEach(features2, function (feature2) {
vill = feature2.attributes.vname;
if (!testVals2[vill]) {
testVals2[vill] = true;
values2.push({
name: vill,
shape: feature2.geometry,
centroid: feature2.geometry.type === "point" ? feature2.geometry : feature2.geometry.getCentroid()
}); // RIYAS: set shape to list store
}
});
var dataItems2 = {
identifier: 'name',
label: 'name',
items: values2
};
var store2 = new dojo.store.Memory({
data: dataItems2
});
dijit.byId("mySelect2").store = store2;
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures2 = results2.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures2.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic2 = resultFeatures2;
graphic2.setSymbol(symbol);
//Set the infoTemplate.
graphic2.setInfoTemplate(infoTemplate2);
//Add graphic to the map graphics layer.
map.graphics.add(graphic2);
// This takes the graphics array you get back from your query and
// gets the overall extent for them. Make sure return geometry is set to
// true in your query.
var extent2 = esri.graphicsExtent(results2.features);
// Use that to set the extent, 1.5 is something I use in my app, but play with
// it to find a setting you like, setting the second parameter to true will get you an extend
// that is at the closest level of your cached service.
map.setExtent(extent2.expand(1.0), true);
}
}
// this replaces your applyLayerDef() function
dijit.byId("mySelect2").on("change", function () {
//Filter the layer to display only the selected zoning types
var vill = dijit.byId("mySelect2").value;
var centroid = dijit.byId("mySelect2").item.centroid;
if (vill !== 'ALL') {
var layerDefs1 = [];
layerDefs1[2] = "vname = " + "'" + vill + "'";
layerDefs1.visibleLayers = [2];
map.setExtent(dijit.byId("mySelect2").item.shape.getExtent(infoTemplate2).expand(1.7));
// RIYAS: Get shape from list store and zoom to its extent
executeIdentifyTask("vname = '" + vill + "'", centroid);
}
var queryTask3 = new QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/0");
var query3 = new Query();
query3.returnGeometry = true;
query3.outFields = ["*"];
query3.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query3.where = "dname='" + dijit.byId("mySelect").value + "'and mname='" + dijit.byId("mySelect1").value + "'and vname='" + dijit.byId("mySelect2").value + "'"
console.info("Query3 where: " + query3.where);
queryTask3.execute(query3, populateList3);
});
function populateList3(results3) {
//create symbol for selected features
map.graphics.clear();
symbol1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 1, null, new Color([255, 255, 0, 0.5]));
var items123 = arrayUtils.map(results3.features, function (result3) {
var graphic = result3;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result3.attributes;
});
//Populate the dropdown list box with unique values
var FID;
var values3 = [];
var item123 = [];
var testVals3 = {};
//Add option to display all zoning types to the dropdown list
values3.push({
name: ""
})
var dataItems3 = {
identifier: 'FID',
label: 'FID',
//Changed to item "S" 123
items: items123
};
var store3 = new ItemFileReadStore({
data: dataItems3
});
var grid = registry.byId("grid");
grid.setStore(store3);
grid.on("rowclick", onRowClickHandler);
map.centerAndZoom(center, zoom);
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures3 = results3.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures3.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic3 = resultFeatures3;
graphic3.setSymbol(symbol1);
//Set the infoTemplate.
graphic3.setInfoTemplate(infoTemplate3);
//Add graphic to the map graphics layer.
map.graphics.add(graphic3);
// This takes the graphics array you get back from your query and
// gets the overall extent for them. Make sure return geometry is set to
// true in your query.
var extent2 = esri.graphicsExtent(results3.features);
// Use that to set the extent, 1.5 is something I use in my app, but play with
// it to find a setting you like, setting the second parameter to true will get you an extend
// that is at the closest level of your cached service.
map.setExtent(extent2.expand(1.0), true);
}
}
function onRowClickHandler(evt) {
var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).FID;
var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.FID === clickedTaxLotId);
});
if (selectedTaxLot.length) {
map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
}
}
function resizeMap() {
//Handle browser resize
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
map.resize();
map.reposition();
}, 800);
}
});
</script>
</head>
<body class="claro" oncontextmenu="return false">
<div id="main" style="width:2024px; height:1012px; border:1px solid #000;" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true">
<div id="header" dojotype="dijit/layout/ContentPane" region="left" style="height:25px;">
<select id="mySelect" dojotype="dijit/form/ComboBox" style="width:300px;font-size:18px;" autocomplete="true" forcevalidoption="false" value="Select a District"></select>
<br>
<br>
<select id="mySelect1" dojotype="dijit/form/ComboBox" style="width:300px;font-size:18px;" autocomplete="true" forcevalidoption="false" value="Select a Mandal"></select>
<br>
<br>
<select id="mySelect2" dojotype="dijit/form/ComboBox" style="width:300px;font-size:18px;" autocomplete="true" forcevalidoption="false" value="Select a Village"></select>
<br>
<br>
<button data-dojo-type="dijit/form/Button" onclick="veTileLayer.setMapStyle(VETiledLayer.MAP_STYLE_AERIAL);">Aerial</button>
<button data-dojo-type="dijit/form/Button" onclick="veTileLayer.setMapStyle(VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS)">Aerial with labels</button>
<button data-dojo-type="dijit/form/Button" onclick="veTileLayer.setMapStyle(VETiledLayer.MAP_STYLE_ROAD)">Roads</button>
</div>
<div id="map" dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000;margin:5px">
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
<table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'11', rowSelector:'20px'">
<thead>
<tr>
<th field="FID" width="30%">FID</th>
<th field="ben_id" width="30%">BENEFICIARY ID</th>
<th field="ben_name" width="30%">BENEFICIARY NAME</th>
<th field="father_nam" width="30%">FATHERS NAME</th>
<th field="uid" width="30%">AADHAR NO </th>
<th field="scheme_nam" width="30%">SCHEME NAME</th>
<th field="lat" width="30%">LATITUDE</th>
<th field="long" width="30%">LONGITUDE</th>
<th field="dname" width="30%">DISTRICT</th>
<th field="mname" width="30%">MANDAL </th>
<th field="vname" width="30%">VILLAGE</th>
</tr>
</thead>
</table>
</div>
</div>
<div style="position:relative;">
</div>
</body>
</html>