Need to change find task to query task in DataGrid

3090
4
Jump to solution
08-17-2014 08:07 AM
MayJeff
Occasional Contributor

Can someone shows me how to modify this sample Show find task results in a DataGrid | ArcGIS API for JavaScript‌ to query task?

Thanks.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

May Jeff,

   Here is a fiddle with the needed corrections. You need to double check your field names for your queries and make sure you are using the alias for your requires.

JSFiddle Link

View solution in original post

4 Replies
MayJeff
Occasional Contributor

Here is the JSFiddle

Edit fiddle - JSFiddle

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

May Jeff,

   Here is a fiddle with the needed corrections. You need to double check your field names for your queries and make sure you are using the alias for your requires.

JSFiddle Link

MayJeff
Occasional Contributor

Thank you very much Robert.  That's what I need.

0 Kudos
SatyanarayanaNarmala
New Contributor III

Hi Robert,

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.

where am i going wrong, here is the code

<!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.10/js/dojo/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.10/js/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", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

          "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "dojo/_base/array","dojo/DeferredList",

      "dijit/form/ComboBox", "dojo/data/ItemFileReadStore","dojo/store/Memory",

     

      "esri/virtualearth/VETiledLayer", "dijit/form/Button",

     

      "esri/tasks/FindTask",

        "esri/tasks/FindParameters",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol",

        "dijit/registry",

        "dojo/_base/connect",

        "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, parser, BorderContainer, ContentPane,

                IdentifyTask, IdentifyParameters,arrayUtils,DeferredList,

                ComboBox, ItemFileReadStore, Memory,

             VETiledLayer, Button, 

             FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, registry, connect, DataGrid,

                Popup, PopupTemplate,

                FeatureLayer,

                SimpleFillSymbol, Color,

                domClass, domConstruct,

                Chart, theme,

           

                on, Scalebar) {

        parser.parse();

       

   /* map = new Map("map");

   

    function init() {

       

        //Creates the Virtual Earth layer to add to the map

        //Example for adding a Bing Maps key

        // bingMapsKey:  "1B2C3OlkbxWHYa1b2c3qkPrO_Ou3nRrGtSa_5Op-xvPNya1b2c3",

        veTileLayer = new esri.virtualearth.VETiledLayer({

          bingMapsKey:'Ame5R45lEOTdPXxlhxuAXN2sDT8vyEJcgXGeZpPOPHBLbg2XqkPMaL5OJHp0OlV0',

          mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL

        });

        map.addLayer(veTileLayer);

       

        infoWindow: popup

      }

      dojo.ready(init);*/

     

        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: [-122.45, 37.75], // longitude, latitude */

           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: esri.virtualearth.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 esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/1");

           // var queryTask1 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/sample/pattasample/MapServer/2");

        

         

                        //Define query parameters

                        var query = new esri.tasks.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);

         

            //Define query parameters

                        /*var query1 = new esri.tasks.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<> ''"

                        queryTask1.execute(query1,populateList1);*/

                       

                        // RIYAS: Setup query to behave as identify

                        polygonQueryTask = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/1");

                        polygonQuery = new esri.tasks.Query();

                        polygonQuery.returnGeometry = true;

                        polygonQuery.outFields = ["dname"];

                        polygonQuery.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

                        polygonQuery.outSpatialReference = map.spatialReference;

                     

                        // RIYAS: Setup query to behave as identify

                        polygonQueryTask1 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/2");

                        polygonQuery1 = new esri.tasks.Query();

                        polygonQuery1.returnGeometry = true;

                        polygonQuery1.outFields = ["dname", "mname"];

                        polygonQuery1.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

                        polygonQuery1.outSpatialReference = map.spatialReference;

                        // RIYAS: Setup query to behave as identify

                       

                        polygonQueryTask2 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/3");

                        polygonQuery2 = new esri.tasks.Query();

                        polygonQuery2.returnGeometry = true;

                        polygonQuery2.outFields = ["dname", "mname", "vname"];

                        polygonQuery2.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

                        polygonQuery2.outSpatialReference = map.spatialReference;

                       

                        polygonQueryTask3 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/0");

                        polygonQuery3 = new esri.tasks.Query();

                        polygonQuery3.returnGeometry = true;

                        polygonQuery3.outFields = ["*"];

                        polygonQuery3.spatialRelationship = esri.tasks.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 name : ${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];

                //map.on("click", executeIdentifyTask);

       

       

               

                // RIYAS: Execute query to behave as identify

                function executeIdentifyTask (where, pnt) {

          //polygonQuery.where = event.mapPoint;

          //polygonQuery1.where = event.mapPoint;

         

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

          });

        }

       

       

               

        //var initialExtent = new esri.geometry.Extent(-85.915,38.105,-85.52,38.33,

        //      new esri.SpatialReference({wkid:4326}) );

        // map = new esri.Map("map", {extent:initialExtent});

        //Create tiled and dynamic map services and add to the map - for the dynamic service set the transparency

        //and provide an id so we can access it later

       // map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));     

        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 esri.symbol.SimpleMarkerSymbol();

            symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);

            symbol.setSize(0.1);

            symbol.setColor(new dojo.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);

                  // RIYAS: cannot set layer defintion for dynamic map service.

          //map.getLayer("dynamic").setLayerDefinitions(layerDefs);

        }

        else {

                        // RIYAS: cannot set layer defintion for dynamic map service.

          //map.getLayer("dynamic").setDefaultLayerDefinitions();

        }

       

            var queryTask1 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/2");

            var query1 = new esri.tasks.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) {

      

        //initialize InfoTemplate

           

/*        alert(dijit.byId("mySelect").value)

       

        var query1 = new esri.tasks.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<> ''"

            queryTask1.execute(query1,populateList1);

        */

        //create symbol for selected features

            symbol1 = new esri.symbol.SimpleMarkerSymbol();

            symbol1.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);

            symbol1.setSize(0.1);

            symbol1.setColor(new dojo.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 dojo.store.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(symbol1);

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

                  // RIYAS: cannot set layer defintion for dynamic map service.

          //map.getLayer("dynamic").setLayerDefinitions(layerDefs);

        }

        else {

                        // RIYAS: cannot set layer defintion for dynamic map service.

          //map.getLayer("dynamic").setDefaultLayerDefinitions();

        }

       

        var queryTask2 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/3");

            var query2= new esri.tasks.Query();

            query2.outFields = ["dname", "mname","vname"];

            query2.returnGeometry = true;

            query2.outSpatialReference = map.spatialReference;                // RIYAS: Set query to return shape in map's spatial reference

            query2.where  = "vname<> '' and dname='"+dijit.byId("mySelect").value+"'and mname='"+dijit.byId("mySelect1").value+"'"

            //query1.where  = "mname<> '' and dname='"+dijit.byId("mySelect").value+"'"

            queryTask2.execute(query2,populateList2);

       

      }); 

       

       

    function populateList2(results2) {

      

        //initialize InfoTemplate

           

/*        alert(dijit.byId("mySelect").value)

       

        var query1 = new esri.tasks.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<> ''"

            queryTask1.execute(query1,populateList1);

        */

        //create symbol for selected features

            symbol1 = new esri.symbol.SimpleMarkerSymbol();

            symbol1.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);

            symbol1.setSize(0.1);

            symbol1.setColor(new dojo.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(symbol1);

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

                  // RIYAS: cannot set layer defintion for dynamic map service.

          //map.getLayer("dynamic").setLayerDefinitions(layerDefs);

        }

        else {

                        // RIYAS: cannot set layer defintion for dynamic map service.

          //map.getLayer("dynamic").setDefaultLayerDefinitions();

        }

       

   

    var queryTask3= new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/0");

            var query3= new esri.tasks.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+"'"

            //query1.where  = "mname<> '' and dname='"+dijit.byId("mySelect").value+"'"

            queryTask3.execute(query3,populateList3);

       

       

      }); 

     

      function populateList3(results3) {

     

     

      

        //initialize InfoTemplate

           

/*        alert(dijit.byId("mySelect").value)

       

        var query1 = new esri.tasks.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<> ''"

            queryTask1.execute(query1,populateList1);

        */

        //create symbol for selected features

        map.graphics.clear();

            symbol1 = new esri.symbol.SimpleMarkerSymbol();

            symbol1.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);

            symbol1.setSize(1);

            symbol1.setColor(new dojo.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 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);

          }

        }

       

      function resizeMap() {

        //Handle browser resize

        clearTimeout(resizeTimer);          

        resizeTimer = setTimeout(function() {

          map.resize();

          map.reposition();

        }, 800);

      }

              

   });

   

   

    </script>

  </head>

  <body class="claro"  oncontextmenu="return false">

 

<!-- <div class="title">

           

                <div class="logo"> <a href="http://elandts.cgg.gov.in/"><img src="http://elandts.cgg.gov.in:80/website/images/TSlogo.png" width="80" height="80" alt="logo"/>

                <h1> Land Regularization Management System <br><span>Government of Telangana </span></h1> </a>

               

                </div>

               

     

      <div class="cm">

     

      <div class="pull-right">

          <img src="http://elandts.cgg.gov.in:80/website/images/cm.png" style="" class="img-responsive" alt="cm" width="50"/> <br>

        <h2> Sri K.Chandrasekhar Rao <br>

                <span> Hon'ble Chief Minister of Telangana</span> </h2>

          </div>

         

      </div>

      <br clear="all">

      </div>   -->

    <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(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL);">Aerial</button>

        <button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS)">Aerial with labels</button>

        <button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.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>

thanks

satya

0 Kudos