Data grid issues

SamirGambhir — Mon, 03 Jun 2013 15:36:03 GMT

Hello,
I am trying to implement a dojox grid in my application and I am facing multiple issues. I am using API 3.2 with dojo 1.6.

Users can select unit of analysis as 'State' or "District (sub-State)' as unit of analysis. When user selects 'State', all states are displayed, but when user selects 'District', he/she is allowed to select one or multiple states. In both cases my grid is behaving strangely. Some of the issues are:
1. When 'State' is selected, datagrid is populated but shows up only when the headers are clicked.
2. When 'District' is selected, selecting a state and running the function to display these districts meets the same fate as #1. At times it does not show up all and gives an error: Uncaught Error: dojo.data.ItemFileReadStore: Invalid item argument.
3. As the user adds a new state to display districts within the state, the grid now displays only 14 records. This is consistent each time new districts are added.

I have also have issues with the CSS of my grid. I did a lot of experimentation but cannot fix the height of my header to my desired height. Also, I am unable to remove the background color of the datagrid rows.

Here is my HTML, JS and CSS:
HTML:

<div id="geogDataTab" data-dojo-type="dijit.layout.ContentPane" title="Map data" >
  <div data-dojo-type="dijit.form.Form" id="finGeogData" name="finGeogData">
    <table data-dojo-type="dojox.grid.DataGrid" id="grid" rowSelector="20px">
      <thead>
 <tr>
   <th field="geogName" width="60%">
     <p>Geography</p>
          </th>
   <th field="indValue" formatter="formatNumber" width="40%">
     <p>Data</p>
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>

JavaScript:

function queryParams(event){
  var items = [], data, gridStName, gridDistName, gridIndValue, gridStore;
....
  queryTask.execute(query, function(featureSet) {
    var features = featureSet.features;
    dojo.forEach(features, function(stFeature) {
      gridStName = stFeature.attributes.State_name; //'Dist_name' instead of 'State_name' when State is selected
      gridIndValue = stFeature.attributes[event.indv];
      items.push({
 geogName : gridStName,
 indValue : gridIndValue
      });
    });
    data = {
      identifier : "geogName",
      items : items
    };
    gridStore = new dojo.data.ItemFileWriteStore({
      data : data
    });
    dijit.byId("grid").set("store", gridStore);
  });
....
}

CSS:

.dojoxGridRowTable {
 width: 180px; 
}
#grid {
  text-align: left; border: 1px dotted black; width:auto; background:none;
}
#grid td{
 text:black; background-color:none;
}
#grid .dojoxGridMasterHeader, #grid .dojoxGridHeader, #grid table.dojoxGridRowTable{
 height:30px !important; left:0px !important; width: 195px !important;
}
th#gridHdr0.dojoxGridCell.dojoDndItem, th#gridHdr1.dojoxGridCell.dojoDndItem {
 margin:0px !important; height:30px !important;
}
#dojox_grid__View_1{
 left:0px !important; width:210px !important;overflow-x:hidden;
}
#grid.dojoxGridScrollBox{
 width:auto; left:0px;height:auto;
}
.dojoxGridCell th{
 left:0px; background-color:none !important; height:30px !important;
}
#grid thead{
 height:30px !important;
}

I am not sure where the problem lies. Can someone help?
Thanks
Samir

topic Data grid issues in ArcGIS JavaScript Maps SDK Questions

Data grid issues