akpaga

Help with showing attributes in  Data Grid using query task in TemplatedMixin?

Discussion created by akpaga on Apr 12, 2014
Hi friends

I am trying to show the attributes of the service layer by query task in the following manner:
But some how I am not able to show them in the data grid ..Can some please guide me  on this ..Thank You


Below is the search.Html (Template) page  code:

<div class="gis_SearchDijit">
    <div class="formContainer">
        <div data-dojo-type="dijit.form.Form" data-dojo-attach-point="searchFormDijit">
            <table cellspacing="5" style="width:100%; height: 49px;">
                <tr>
                    <td>
                        <input id="searchText" type="text" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="name:'searchText',trim:true,required:true,style:'width:100%;'"
                        />
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="buttonActionBar">
   <div data-dojo-type="dijit.form.Button" data-dojo-props="busyLabel:'searching',iconClass:'searchIcon'" data-dojo-attach-event="click:search">
     Search
   </div>
    </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:'5', rowSelector:'20px'">
      <thead>
        <tr>
          <th field="id">Id</th>
          <th field="name" >name</th>
           
        </tr>
      </thead>
    </table>
    </div>




The Search.js  page code is as below


define([
    'dojo/_base/declare',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/form/Form',
    'dijit/form/FilteringSelect',
    'dijit/form/ValidationTextBox',
  'dijit/form/Button',
    'dijit/TooltipDialog',
  'esri/tasks/query',
  'esri/tasks/QueryTask',
  'esri/config',
    'dojo/store/Memory',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/text!./Search/templates/Search.html',
    "dojox/grid/DataGrid",
    "dojo/data/ItemFileReadStore",
  'dojo/dom'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Form, FilteringSelect, ValidationTextBox, Button, TooltipDialog, query, QueryTask, esriConfig, Memory, lang, array, searchTemplate, DataGrid, ItemFileReadStore,dom) {

 //anonymous function to load CSS files required for this module
 (function () {
  var css = [require.toUrl("gis/dijit/Search/css/Search.css")];
  var head = document.getElementsByTagName("head").item(0),
            link;
  for (var i = 0, il = css.length; i < il; i++) {
   link = document.createElement("link");
   link.type = "text/css";
   link.rel = "stylesheet";
   link.href = css[i].toString();
   head.appendChild(link);
  }
 } ());

 // Main print dijit
 var Search = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
  widgetsInTemplate: true,
  templateString: searchTemplate,
  map: null,
  defaultTitle: null,
  queryTask: null,
  query: null,
      _store1: null,
  _selectorOne: null,
  postCreate: function () {
   this.inherited(arguments);
   this.queryTask = new esri.tasks.QueryTask(this.queryTaskURL);
   this.query = new esri.tasks.Query();
   this.query.outSpatialReference = this.map.spatialReference;
   this.query.returnGeometry = true;
   this.query.outFields = ["id", "ASTName"];
  },
  search: function () {

           
   //this.query.where = "APP_ID like '%" + dom.byId("searchText").value + "%' OR PAMS_PIN LIKE '%" + dom.byId("searchText").value + "%'";
            this.query.where = " id like '%" + dom.byId("searchText").value + "%'";
   this.queryTask.execute(this.query, lang.hitch(this, function (results) {

                 var grid = this.grid;
                 this._selectorOne = this.grid;
                 this._selectorOne.id = "grid";

    var resultItems = [];
    var resultCount = results.features.length; 

                 for (var i = 0; i < resultCount; i++) {
     var featureAttributes = results.features[i].attributes;
                    
     for (var attr in featureAttributes) {
                    

      resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
     }
     resultItems.push("<br>");
    }
              
               // var element =  dom.byId('queryResults');  
               // element.        
              
                             //create array of attributes
                          
                              
                              var dataItems = {
                                  identifier: "id", //This field needs to have unique values
                                  label: "id",
                                  'items': resultItems
                                         };

                                       store = new ItemFileReadStore({ data : dataItems });
                                        grid = registry.byId("grid");
                                        grid.setStore(store);




                                       
////////    //zoom to the first feature
////////    if (resultCount > 0) {
////////     var extent = results.features[0].geometry.getExtent();
////////     this.map.setExtent(extent);
////////    }

    


                        
 

   }), 
            
            function (err) {
    console.log(err);
   });
  },
 });
 return Search;
});


Outcomes