Help With Dojo DataGrid

Discussion created by salopez on Jun 8, 2010
I am attempting to load data from an ArcGIS Service into a dojo datagrid through the Javascript Extenstion for Google Maps. 

I need help with 2 items. The code below is what I have come up with so far.  (I have uploaded the necessary javascript to run the file as a zip file)

I know that there are errors in my code, however I am not sure what needs to be corrected to make the code work.  ANy suggestions would be appreciated.

Once I fix the code  I would like to be able to select a row in the column and zoom to the point location.  I have accomplished this using graphics through the javascript api, but have not had success through the javascript extension for Google Maps.


<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Layer Visibility</title>
    <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" type="text/css" href="">
    <script type="text/javascript">
      djConfig = {
<script type="text/javascript" src=""></script>
<script src=";v=2&amp;key=ABQIAAAAbN-pn87tRTOhN5haEPTrxxRpW7RPLo8OuYpZjwqeJcN2phDsRBT6DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
<script src="" type="text/javascript" ></script>
<script type="text/javascript" src="./scripts/arcgislinkpacked.js"></script> 
<script type="text/javascript">

      var ov;
      var map;
      var grid, store;
      var findTask = null;
      var params = null;
      var mapExtension = null;
      var gOverlays = [];

        function init(){
          var type=new ArcGISMapType([new ArcGISTileLayer('')]);//
          GEvent.addListener(type,'load', function(){
            var map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(42.75,-71.00), 10);
            map.addControl(new GMapTypeControl());
            map.addControl(new GLargeMapControl());
            map.addControl(new GScaleControl());
     //Create MapExtension utility class
        mapExtension = new esri.arcgis.gmaps.MapExtension(map);

        // Find Task
        findTask = new esri.arcgis.gmaps.FindTask("");

        // You can execute a task and listen for the complete event or use the callback to get the results
        GEvent.addListener(findTask, "executecomplete", function() {
          //console.debug("'find task complete' event fired!!!");

        // Find Parameters
        params = new esri.arcgis.gmaps.FindParameters();
        params.layerIds = [0];
        params.searchFields = ["STREET","LOCATION"];
            var url = '';
            ov=new ArcGISMapOverlay(url,{opacity:0.8});
            GEvent.addListener(ov,'load', function(){
              var service=ov.getMapService();
              var toc='';
              var layers=service.getLayers();
              for (var i=0; i< layers.length; i++){
                toc+='<input type="checkbox" id="layer'+layers[i].id+'"';
                if (layers[i].visible) toc+=' checked="checked"';
                toc+=' onclick="setVis()">'+layers[i].name+'<br/>';
  function executeFind(searchText) {
        // clear map overlays and event listeners using MapExtension removeFromMap

        // set find parameters
        params.searchText = searchText;

        // execute find task
        findTask.execute(params, findCompleteCallback);


      function findCompleteCallback(results) {
    //Create items array to be added to store's data
        var items = []; //all items to be stored in data store
        for (var i=0, il=results.findResults.length; i<il; i++) {
          items.push(results.findResults[i].attributes);  //append each attribute list as item in store
    //Create data object to be used in store
        var data = {
          identifier: "STATNUM",  //This field needs to have unique values
          label: "STATNUM", //Name field for display. Not pertinent to a grid but may be used elsewhere.
          items: items
 //Create data store and bind to grid.
        store = new{ data:data });
        grid.setQuery({ STATNUM: '*' });         
        function setVis(){
          var service = ov.getMapService();
          var layers = service.getLayers();
          for (var i = 0; i < layers.length; i++) {
            var el=document.getElementById('layer'+layers[i].id);
    <body class="tundra" onload="init()">
Owner name: <input type="text" id="results" size="60" value="Main" />
    <input type="button" value="Search" onclick="executeFind();" /><br />        
           <td valign="top"><div id="toc" style="width:130px;"></div></td>
           <td><div id="map" style="width:600px; height:500px; border:1px solid #000;">
         <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowsPerPage="5" rowSelector="20px" style="height:300px; width:600px">
          <th field="STATNUM">Tax lot ID</th>
          <th field="TOWN">Owner 1</th>
          <th field="STREET">Owner 2</th>
          <th field="LOCATION">Owner 3</th>