Community

QueryTask DataGrid and Table

3854
1
03-30-2015 07:18 AM
AbelLudba
by
New Contributor
‎03-30-2015 07:18 AM

Hello

I am new to ArcGIS JavaScript.

I'm using ArcGIS 10 and would like to publish results of a simple Query in a table.

This is my Code:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
  6.     <title>Test QueryTask with Table</title>  
  7.   
  8.   
  9.     <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/tundra/tundra.css">  
  10.     <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">  
  11.     <style>  
  12.       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }  
  13.     </style>  
  14.   
  15.   
  16.     <script src="http://js.arcgis.com/3.13/"></script>  
  17.     <script>   
  18.    var queryTaskTwo, queryTWO;  
  19.         var grid, store;  
  20.           
  21.       require([    
  22.         "dojo/parser",    
  23.         "esri/tasks/query",   
  24.   "esri/tasks/QueryTask",   
  25.   "dijit/registry",  
  26.         "dojo/_base/array",  
  27.         "dojo/dom",   
  28.         "dojo/on",    
  29.         "dojo/_base/connect",  
  30.         "dojox/grid/DataGrid",  
  31.         "dojo/data/ItemFileReadStore",  
  32.         "dijit/form/Button",          
  33.         "dijit/layout/BorderContainer",  
  34.         "dijit/layout/ContentPane",  
  35.         "dojo/domReady!"  
  36.       ],   
  37.    function (parser, Query, QueryTask, registry, arrayUtils, dom, on, DataGrid, ItemFileReadStore) {  
  38.       parser.parse();    
  39.      
  40.       queryTaskTwo=new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5")  
  41.    queryTWO=new Query();  
  42.    queryTWO.returnGeometry=false;  
  43.    queryTWO.outFields=["STATE_NAME","POP00_SQMI","HOUSEHOLDS","BLACK","MALES"];  
  44.          
  45.   
  46.         on(dom.byId("execute"), "click", execute);  
  47.   
  48.   
  49.         function execute ()   
  50.   {  
  51.       
  52.    queryTWO.text = dom.byId("stateName").value;  
  53.           queryTaskTwo.execute(queryTWO,showResultsTwo );   
  54.   //  
  55.         }  
  56.   
  57.   function showResultsTwo(resultsTwo) {   
  58.           //create array of attributes  
  59.           var items = arrayUtils.map(resultsTwo, function (result)   
  60.    {  
  61.       
  62.             return result.feature.attributes;  
  63.           });  
  64.   
  65.   
  66.           //Create data object to be used in store  
  67.           var data = {  
  68.             identifier : "SQMI", //This field needs to have unique values  
  69.             label : "SQMI", //Name field for display. Not pertinent to a grid but may be used elsewhere.  
  70.             items : items  
  71.           };  
  72.   
  73.   
  74.           //Create data store and bind to grid.  
  75.           store = new ItemFileReadStore({  
  76.             data : data  
  77.           });  
  78.       
  79.           var grid = dom.byId("grid");   
  80.           grid.setStore(store);  
  81.      grid.setQuery({ SQMI: "*" });  
  82.         // .................................................  
  83.      
  84.         }  
  85.      
  86.   //  
  87.       });  
  88.     </script>  
  89.   </head>  
  90.   
  91.   
  92.   <body class="tundra">  
  93.     US state name :  
  94.     <input type="text" id="stateName" value="California">  
  95.     <input id="execute" type="button" value="Get Details">  
  96.     <br />  
  97.     <br />  
  98.   
  99.   
  100.    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">  
  101.      <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">  
  102.       <thead>  
  103.         <tr>  
  104.           <th field="SQMI"  width="10%">SQMI</th>  
  105.           <th field="STATE_NAME" width="10%" >STATE_NAME1</th>  
  106.           <th field="POP00_SQMI" width="30%" >SUB_REGION2</th>  
  107.           <th field="HOUSEHOLDS" width="20%">AVG_SIZE97</th>  
  108.           <th field="BLACK" width="10%">BLACK </th>  
  109.           <th field="MALES" width="20%">OWNER_OCC</th>  
  110.         </tr>  
  111.       </thead>  
  112.     </table>  
  113.   </div>  
  114.   
  115. </html> 

when I run this code, I get this error:

TypeError: undefined is not a function {stack: (...), message: "undefined is not a function"} "TypeError: undefined is not a function     at showResultsTwo (http://localhost/Dgrid/queryMultipleTest2.html:74:16

I could not find what am I doing wrong?

Would it be possible to help?

Thanks

Abel

0 Kudos
1 Reply
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎03-30-2015 07:45 AM

This is a duplicate of this question.