Display Query Task results in Dojo DataGrid

[SatyanarayanaNarmala]

Hi ALL,

i am trying to implement the same with some drill down functionality. when i zoom to village level the point features should be highlighted, displaying their attributes in a table as in this example.

i am getting the values from the layers but not filling in the table. -------- console.log(values3);

where am i going wrong, here is the code

//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 features3 = results3.features;

        dojo.forEach (features3, function(feature3) {

          FID = feature3.attributes.FID;

          if (!testVals3[FID]) {

            testVals3[FID] = true;

            //values3.push({name:ben_id,shape:feature3.geometry,centroid: feature3.geometry.type === "point" ? feature3.geometry : feature3.geometry.getCentroid()}); // RIYAS: set shape to list store

            values3.push(feature3.attributes);

            /*values3.push({"ben_id":ben_id,

            "ben_name": feature3.attributes.ben_name,

            "dname": feature3.attributes.dname,

            "father_nam": feature3.attributes.father_nam,

            "mname": feature3.attributes.mname,

            "scheme_nam": feature3.attributes.scheme_nam,

            "uid": feature3.attributes.uid,

            "vname": feature3.attributes.vname,

            */

          }

        });

        var dataItems3 = {

               identifier: 'FID',

               label: 'FID',

               items: item123

        };

        console.log(values3);

        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);

          }

        }

Thanks,

satya

[thejuskambi]

When you are trying to use dgrid and would like to update the table dynamically and or later after initialization then, you need to be use OnDemandGrid. Please check and confirm the type of module you are using.

Also since you are not using file to read, try to use Memeory rather than ItemFileReadStore.

Hope this was helpful.

[RobertScheitlin__GISP]

Satya,

   Your "vname" field is blank for 673 of your records.

Query: Akasalakkavaram_ben_data (ID: 0)

and only 78 of them have a value. That on top of your code being a mismatch of AMD and Legacy and making item123 an empty array and feeding that to the dataItems3 for your grids datastore and never actually populating any data to it...

Also you should probably start marking your answered posts as answered (like this oneDROP DOWN MENU ) so that people are more willing to continue to help you.

[SatyanarayanaNarmala]

hi,

i could not make it out. can u provide me the solution.

regds,

satyanarayana N

[thejuskambi]

What Robert is saying is that you have just initialized the variable item123 and never actually pushing any data to that variable before using it in the store. so the datagrid will not have any values to populate.

[RobertScheitlin__GISP · Accepted solution]

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>

[SatyanarayanaNarmala]

Thank u Robert

But to zoom to the feature not working getting the following error

TypeError: a is null

...his._layers},setExtent:function(a,c){a=new I(a.toJson());var b=a.getWidth(),d...

Regds,

Satya

[RobertScheitlin__GISP]

Satya,

  The issue was is the villages are point and thus do not have an extent. You were trying to set the maps extent to the selected record in the grid and that record was a point geometry (not having an extent). Using map.centerAndZoom fixed the issue.

[thejuskambi]

Robert,

How are you doing this, I knew, that the data is point and the error was due to no extent property. But the "village" and earlier too you mention about data having null value etc. Do you guys work together?

[RobertScheitlin__GISP]

Thejus,

   Nope he is in India. His services are public, so it does not take much to query the data and find that there was a very large amount incomplete attribute data.