Data grid issues

Discussion created by samirgambhir on Jun 3, 2013
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: 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:
<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">
   <th field="geogName" width="60%">
   <th field="indValue" formatter="formatNumber" width="40%">

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];
 geogName : gridStName,
 indValue : gridIndValue
    data = {
      identifier : "geogName",
      items : items
    gridStore = new{
      data : data
    dijit.byId("grid").set("store", gridStore);

.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;
 left:0px !important; width:210px !important;overflow-x:hidden;
 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?