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?ThanksSamir