DataGrid field update and styling

SamirGambhir · ‎10-17-2011

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 · ‎11-15-2011

Also, if I replace store.setValues(item, "indValue", value) with store.setValues(item, "indValue", "xyz"), it populates the table with "xyz", similar to the example you sent earlier.
Thanks
Samir

After a second look at your code, I change your code a little bit, it should work if the you make the changes as follows.

if (boxId=="checkTest1"){ 
   store.fetch({query:{},onItem:function(item){
         var  value = store.getValues(item, "Shape_Leng");
         store.setValues(item, "indValue", value);
         }
   });
}

You don't need for loop because store.fetch -onItem will do it for you.

SamirGambhir · ‎11-16-2011

Thank you! Thank you!! Thank you!!!

This worked really well.......now on with the next issue.

Well, I'll post other issues as and when they come up.
Thanks a ton for your help,
Samir

taopy · ‎11-18-2011

just look for the same problem thks

SamirGambhir · ‎01-11-2012

Hello,
I am still stuck with the header styling for a data grid.
Based on Heming's suggestion, I have tried looking up the css for the data grid element to identify elements whose properties could be changed. I have managed to change properties for my dojoxGridMasterHeader and dojoxGridHeader. As you can see in the pasted code below, there is a div with a "dojoattachpoint" (highlighted in red text) which is beyond CSS reach.

<div hidefocus="hidefocus" role="grid" dojoattachevent="onmouseout:_mouseOut" tabindex="0" aria-multiselectable="true" class="dojoxGrid" id="grid" align="left" widgetid="grid" aria-readonly="true" style="-webkit-user-select: none; ">
<div class="dojoxGridMasterHeader" dojoattachpoint="viewsHeaderNode" role="presentation" style="display: block; height: 30px; ">
<div class="dojoxGridHeader" dojoattachpoint="headerNode" role="presentation" style="width: 257px; left: 1px; top: 0px; ">
<div dojoattachpoint="headerNodeContainer" style="width:9000em" role="presentation">
<div dojoattachpoint="headerContentNode" role="row">
<table class="dojoxGridRowTable" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 257px; ">
<tbody>
<tr>
<th tabindex="-1" aria-readonly="true" role="columnheader" id="gridHdr0" colspan="1" class="dojoxGridCell dojoDndItem " idx="0" style="width:auto;" dndtype="gridColumn_grid">
<div class="dojoxGridSortNode"><p style="font:Calibri; font-size:12px; height: 30px;">District</p></div>
</th>
<th tabindex="-1" aria-readonly="true" role="columnheader" id="gridHdr1" colspan="1" class="dojoxGridCell dojoDndItem " idx="1" style="width:auto;" dndtype="gridColumn_grid">
<div class="dojoxGridSortNode"><p style="font:Calibri; font-size:12px;">Indicator value (%)</p></div>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="dojoxGridMasterView" dojoattachpoint="viewsNode" role="presentation"><div class="dojoxGridView" role="presentation" id="dojox_grid__View_1" widgetid="dojox_grid__View_1" style="width: 257px; left: 1px; top: 0px; height: 350px; ">

<input type="checkbox" class="dojoxGridHiddenFocus" dojoattachpoint="hiddenFocusNode" role="presentation">
<input type="checkbox" class="dojoxGridHiddenFocus" role="presentation">
<div class="dojoxGridScrollbox" dojoattachpoint="scrollboxNode" role="presentation" style="height: 350px; ">
<div class="dojoxGridContent" dojoattachpoint="contentNode" hidefocus="hidefocus" role="presentation" style="height: 1px; width: 257px; "></div>
</div>
</div></div>
<div class="dojoxGridMasterMessages" style="display: none;" dojoattachpoint="messagesNode"></div>
<span dojoattachpoint="lastFocusNode" tabindex="0"></span>
</div>

I'll really appreciate your help in sorting this out.
Thanks
Samir

SamirGambhir · ‎01-11-2012

Sorry, the earlier post was sent prematurely.
I have managed to set the header height for dojoxGridMasterHeader and dojoxGridHeader, but since I do not have control over dojoattachpoint, I am unable to set the height for this element. In my data grid, the header labels are half hidden because of the difference in height of these two elements. Please help.
Thanks
Samir

SamirGambhir · ‎01-16-2012

Hello,
This is in continuation of my previous two messages.....................
I believe all features in the header section of Data Grid should conform to changes made to 'dojoxGridMasterHeader' and 'dojoxGridHeader' but it did not work out that way for me. Can someone propose an alternative, or suggest changes to the css below to set this right? I'll really appreciate any help as I have been struggling with it for sometime now.

CSS

.dojoxGrid th {
height: 30px;
}
.dojoxGridCell {
background-color: #505050; color:white;
}
.tundra .dojoxGridMasterHeader .dojoxGridHeader {
height: 30px;
}
.tundra .dojoxGridSortNode {
background-color:#505050; color: orange; height: 30px;
}

Thanks
Samir Gambhir

AdamGoodfellow · ‎03-05-2012

Hi

Thanks up uploading the updateDataGrid.txt file. I have modified it slightly to work with my data and have been able to get it working to a point. I can search and update the fields in the grid but these values are not persisting. When I redo the search the original values return. Should this update my db? I'm using an sde db and have enable a FeatureService with the following Supported Operations:
"Query Add Features Update Features Delete Features Apply Edits"

Thanks in advance for your help

Adam.

HemingZhu · ‎03-07-2012

Hello,
This is in continuation of my previous two messages.....................
I believe all features in the header section of Data Grid should conform to changes made to 'dojoxGridMasterHeader' and 'dojoxGridHeader' but it did not work out that way for me. Can someone propose an alternative, or suggest changes to the css below to set this right? I'll really appreciate any help as I have been struggling with it for sometime now.

CSS

.dojoxGrid th {
height: 30px;
}
.dojoxGridCell {
background-color: #505050; color:white;
}
.tundra .dojoxGridMasterHeader .dojoxGridHeader {
height: 30px;
}
.tundra .dojoxGridSortNode {
background-color:#505050; color: orange; height: 30px;
}

Thanks
Samir Gambhir

Samir, have you tried just .dojoxGrid .dojoxGrid-header?

SamirGambhir · ‎03-19-2012

Hi Heming,
Your solution helped a little bit. The field is displayed properly but the dojoxGrid-master-header is still 46px high. I cannot change that anyway. Here dojoxGrid-header is contained within dojoxGrid-master-header. Please find attached the image of the table on the GIS application. I have tried giving values to this as well but has no effect.

Additionally, I have encountered another major issue with this grid. I modified my application a little bit and created two tabs. I moved this grid to one of the tabs and it has stopped showing completely. The height of the grid shows up as 0px in JavaScript Console. I have not yet found a solution to make this grid visible. I'll really appreciate any help.
Thanks
Samir

HemingZhu · ‎03-19-2012

Hi Heming,
Your solution helped a little bit. The field is displayed properly but the dojoxGrid-master-header is still 46px high. I cannot change that anyway. Here dojoxGrid-header is contained within dojoxGrid-master-header. Please find attached the image of the table on the GIS application. I have tried giving values to this as well but has no effect.

Additionally, I have encountered another major issue with this grid. I modified my application a little bit and created two tabs. I moved this grid to one of the tabs and it has stopped showing completely. The height of the grid shows up as 0px in JavaScript Console. I have not yet found a solution to make this grid visible. I'll really appreciate any help.
Thanks
Samir

have you tried setting master header height to auto, and also setting header margin and padding to 0px?