DataGrid field update and styling

[SamirGambhir]

Hi,
I have two questions related to Dojox Data Grid:
1. I have an application where the datagrid has two columns. One column always displays unique names (e.g. state names) and the second column has to display indicator value for each state depending on which indicator is selected i.e. When user selects 'Population' from a dropdown select form, the second column displays its value. I would like this column to refresh its value when user makes another selection. The data grid examples on esri.com show hard-coded field name in the HTML markup. Is there a way to make the field name dynamic?
2. Is there a way to apply my own css style to the table (cells, borders, heading etc.)?
Thanks for your help,
Samir

[HemingZhu]

Hi,
I have two questions related to Dojox Data Grid:
1. I have an application where the datagrid has two columns. One column always displays unique names (e.g. state names) and the second column has to display indicator value for each state depending on which indicator is selected i.e. When user selects 'Population' from a dropdown select form, the second column displays its value. I would like this column to refresh its value when user makes another selection. The data grid examples on esri.com show hard-coded field name in the HTML markup. Is there a way to make the field name dynamic?
2. Is there a way to apply my own css style to the table (cells, borders, heading etc.)?
Thanks for your help,
Samir

1. Use dojo.data.ItemFileWriteStore (instead of dojo.data.ItemFileReadStore) to bind with datagrid will allow you change or update the column value (like this: store.setValue(item, columnName, dropdownValue).
2. You can overwrite dategrid css style with you own. Like this:
.dojoxGrid{}, .dojoxGrid table{}, .dojoxGrid th, tr{} etc.

[SamirGambhir]

Hi Heming,
I tried unsuccessfully to override tundra.css for my dojo grid. Can you point me to some examples where I can learn to do this?
Thanks
Samir

[HemingZhu]

Hi Heming,
I tried unsuccessfully to override tundra.css for my dojo grid. Can you point me to some examples where I can learn to do this?
Thanks
Samir

add this to the following esri sample
.dojoxGrid th{
border-bottom: navy solid thin !important;
border-top: navy solid thin !important;
border-left: none!important;
border-right: none!important;
font-size: smaller!important;
      }
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/find_map_datagrid.html

[SamirGambhir]

Thanks Heming,
This is helpful,
Samir

[SamirGambhir]

Hi Heming,
Your example helped me figure out most of the styling for my grid except for the header. I have tried multiple ways to remove the shiny silver skin on top of my header but have been unsuccessful. I tried th#gridHdr0{} and th#gridHdr1{} to set thier background-color property. It works but shows these colors behind the silver skin. Any suggestions to remove the skin? Is it possible this skin might e part of another div element?
Thanks
Samir

[HemingZhu]

Hi Heming,
Your example helped me figure out most of the styling for my grid except for the header. I have tried multiple ways to remove the shiny silver skin on top of my header but have been unsuccessful. I tried th#gridHdr0{} and th#gridHdr1{} to set thier background-color property. It works but shows these colors behind the silver skin. Any suggestions to remove the skin? Is it possible this skin might e part of another div element?
Thanks
Samir

It should not be any different from styling a normal table th. There are so many properties for th css. You might have to look at these properties to decide what is the cause.

[SamirGambhir]

Hi Heming,
I am trying to set the value for the store in a datagrid based on the function that you suggested (store.setValue....). Unfortunately, I am not being able to understand the parameters that I need to pass to get this to work. I am pasting a portion of my code (pertaining to data grid). I hope you'll be able to help me starighten this out:

HTML CODE:
<div data-dojo-type="dijit.form.Form" id="distDataTable" name="distDataTable">
     <div id="stateInfo" name="stateInfo"></div><!--Message informing which State/UT is being viewed-->
      <div id="indicatorInfo" name="indicatorInfo"></div> 
        <table data-dojo-type="dojox.grid.DataGrid" class="grid" data-dojo-id="grid" id="grid" rowsPerPage="15" rowSelector="20px">
          <thead>
            <tr>
              <th field="name" width="auto" height="30px">District</th>
              <th width="auto" height="30px"><p style="font:Calibri; font-size:12px;">Indicator value (%)</p></th>
            </tr>
          </thead>
        </table>
        <div data-dojo-type="dijit.form.Form" id="downloadData" name="downloadData">
          <button dojoType="dijit.form.Button" id="dataDownload" name="dataDownload">DOWNLOAD THIS DATA</button>
        </div>
        <div id="clear" style="clear:both;"></div>
      </div>

JS CODE:
queryTask.execute(query, function(featureSet){
     var results=[], attr=[], items=[];
     for (i=0, il=featureSet.features.length; i<il; i++) {
          var graphic = featureSet.features;
          graphic.setInfoTemplate(infoTemplate);
          distGraphicsLayer.add(graphic);
          items.push(graphic.attributes);
          }
dijit.byId('progress').hide();
distGraphicsLayer.show();
data = {items:items};
    
          store = new dojo.data.ItemFileWriteStore({data:data});
          if (boxId=="checkNBD"){
            store.setValue(item, "NB_D_SIGNS");
          }
           grid.setStore(store);
    });

I'll be happy to send you the entire code if you like.
Thanks for all yur help,
Samir

[HemingZhu]

Hi Heming, 
I am trying to set the value for the store in a datagrid based on the function that you suggested (store.setValue....). Unfortunately, I am not being able to understand the parameters that I need to pass to get this to work. I am pasting a portion of my code (pertaining to data grid). I hope you'll be able to help me starighten this out: 

HTML CODE:
<div data-dojo-type="dijit.form.Form" id="distDataTable" name="distDataTable"> 
<div id="stateInfo" name="stateInfo"></div><!--Message informing which State/UT is being viewed--> 
<div id="indicatorInfo" name="indicatorInfo"></div>  
<table data-dojo-type="dojox.grid.DataGrid" class="grid" data-dojo-id="grid" id="grid" rowsPerPage="15" rowSelector="20px"> 
<thead> 
<tr> 
<th field="name" width="auto" height="30px">District</th> 
<th width="auto" height="30px"><p style="font:Calibri; font-size:12px;">Indicator value (%)</p></th> 
</tr> 
</thead> 
</table> 
<div data-dojo-type="dijit.form.Form" id="downloadData" name="downloadData"> 
<button dojoType="dijit.form.Button" id="dataDownload" name="dataDownload">DOWNLOAD THIS DATA</button> 
</div> 
<div id="clear" style="clear:both;"></div> 
</div> 

JS CODE:
queryTask.execute(query, function(featureSet){ 
var results=[], attr=[], items=[]; 
for (i=0, il=featureSet.features.length; i<il; i++) { 
var graphic = featureSet.features; 
graphic.setInfoTemplate(infoTemplate); 
distGraphicsLayer.add(graphic);  
items.push(graphic.attributes); 
} 
dijit.byId('progress').hide();  
distGraphicsLayer.show(); 
data = {items:items}; 
  
store = new dojo.data.ItemFileWriteStore({data:data}); 
if (boxId=="checkNBD"){ 
store.setValue(item, "NB_D_SIGNS"); 
} 
grid.setStore(store); 
}); 

I'll be happy to send you the entire code if you like. 
Thanks for all yur help, 
Samir

ItemFileWriteStore.setValue has the following format: ItemFileWriteStore.setValue(item, columnName, value). item is the certain individual item in items, it has to be specified. columnName is the certain field name that you has to update value on, also value is required.

[SamirGambhir]

Hi Heming,
I am sorry I am still not getting it right. I must be really thick to understand this. I have looked at various forum too but still no luck.
It'll be really helpful if you could suggest the soltuion based on the information below:

1. I have described two fields ("name" which has unique values and "NB_D_SIGNS" which has attribute values for each "name") in the grid structure in my html file. "NB_D_SIGNS" is missing from the code that I pasted in my last email.


2. Items array, I understand, holds pairs of information such as "name" and value of an indicator. My other indicators are "Test1" and "Test2".

My two questions are:

• Having defined my field name in my HTML, what code will update the values of field "NB_D_SIGNS" to values of the field, say "Test1"?


• In the normal sequence of code( data = {items:items}; store=new dojo.data.ItemFileWriteStore({data:data}); grid.setStore(store);) where does the .setValue code fit in?

I'll really appreciate it if you could help.
Thanks
Samir