Community

datagrid questions

997
1
10-28-2010 08:06 AM
timgogl
by
New Contributor II
‎10-28-2010 08:06 AM
i have looked at a couple of the datagrid examples now, and as far as i can see, i have all of the essential parts on my page, but i cannot seem to get the data to populate, and the grid does not seem to be picking up the style from the css.... i'm sure it is something very small (but essential) i have missed, and usually something like this just needs a second set of eyes....

here is my code, and i really appreciate the views and any comments you might offer.

the links and css :

  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/Grid.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/claroGrid.css">

        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
   ##toolbar { height:25px; width:960px; }
   ##mapCanvas { height: 615px; width:739px; float:right; }
   ##info { height:615px; width:220px; background-color:white; float:left; }
   .showing {
    background-image: url('images/checkMarkNoBorder.gif'); 
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    text-align: center;
   }
   .showIt { background-position: 0px; }
   .hideIt { background-position: -32px; }
        </style>

<!--- end of page, beginning of scripting --->
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
 <script type="text/javascript">
   djConfig={
     isDebug: true, 
     parseOnLoad: true
   }
 </script>


the html:

    <body class=" claro ">
  <div id="toolbar"></div>
  <div style="width:959px;">
   <div id="mapCanvas"></div>
   <div dojotype="dijit.layout.ContentPane" id="info">
        <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowsPerPage="20" rowSelector="20px">
         <thead>
           <tr>
             <th field="HUB_ASSET_ID">Hub ID</th>
             <th field="HUB_ASSET_NAME" >Name</th>
             <th field="FMS_ASSET_DESCR">Description</th>
           </tr>
         </thead>
       </table>
   </div>
  </div>
   </body>



the js

  function displayInfo(assets){
   //assets is an array of feature.attributes
                        //call comes from the showinfowindow function
   //console.debug(assets);   
   var data={
    identifier:"HUB_ASSET_ID",
    items:assets
   }
   
   console.debug(data);
   var grid;  
   var jsonStore = new dojo.data.ItemFileReadStore({data:data});
   grid.setStore(jsonStore);
   grid.setQuery({ HUB_ASSET_ID: '*'});
//   grid.setSortIndex(1,"true");
  
  }


  function showInfoWindow(results,e){
   //results is an IdentifyResult object, e is the click event
   if(results.length == 0) {return;}
   
   var r = results[0].feature;
   var infoToView=[];   
   var content="";
   var gtry = r.geometry;
   var info = r.attributes;
    
   symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));

   content+="<table>";
   content+="<tr><td>ID: </td><td>"+info.HUB_ASSET_ID+"</td></tr>";
   content+="<tr><td>Name: </td><td>"+info.HUB_ASSET_NAME+"</td></tr>";
   content+="<tr><td>Description: </td><td>"+info.FMS_ASSET_DESCR+"</td></tr>";
   content+="<tr><td colspan='2'> </td></tr>";
   content+="<tr><td colspan='2' style='text-align:center;'><a href='##'>Asset Summary Page</a></td></tr>";
   content+="</table>";
   
   //if(results.length > 1){ listResults(results);}
   if(results.length > 1){ 
    for(var i=0;i<results.length;i++){
     infoToView.push(results.feature.attributes);
    }
    displayInfo(infoToView); // <----- sends info to the datagrid
   }
   
   map.infoWindow.setTitle("Asset Found: " + info.HUB_ASSET_ID);
   map.infoWindow.setContent(content);
   
   map.infoWindow.show(e.screenPoint,map.getInfoWindowAnchor(e.screenPoint));
   
   if(map.extent != startExtent){showFeature(r);}
  }

again,

thanks for looking, and i appreciate any ideas.
0 Kudos
1 Reply
timgogl
by
New Contributor II
‎10-28-2010 11:06 AM
well i 'think' i may have it working... well at least i got the grid to be recognized and get the associated css.

i am hoping the solution to one will provide the solution to the other.

first i stripped down my html to just the head/links/scripts and body/table tags.

and still it wouldnt work. so then i took the sample and did the same to that.. started stripping away all the extra code / parts of the html that didn't apply to my issue and the sample still worked.

i re-re-checked all my spelling and links all good. then i started re-arranging code in the head section.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    
    <head>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/Grid.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/claroGrid.css">

  <script type="text/javascript">
    djConfig = {
      parseOnLoad:true
    }
  </script>
  
     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>

  <script type="text/javascript">
      dojo.require("dojox.grid.DataGrid");
  </script>
  
     <style>
       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #info { height: 50px; width:500px;
     </style>
    </head>
    
  <body class="claro">
 <div id="info">
  <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid">
   <thead>
     <tr>
       <th field="HUB_ASSET_ID">Hub ID</th>
       <th field="HUB_ASSET_NAME">Name</th>
       <th field="FMS_ASSET_DESCR">Description</th>
     </tr>
   </thead>
  </table>
 </div>
  </body>
</html>


heh the section

  <script type="text/javascript">
    djConfig = {
      parseOnLoad:true
    }
  </script>


was actually down a couple of rows. below the script to //serverapi.....

i didnt think it would matter, but heh, im still new to all this, and it appears to make a difference.

so, from now on i will be putting my djConfig line just below my <link> tags. since that seems to have done the job.

thanks for looking. hope this helps someone else in the future.

if anyone could supply an explaination of why this order of operation matters, i love learning new things an would appreciate it.
0 Kudos