nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Najděte více příspěvků označených jako

Accepted answers

All comments

LindaDunklee

Thanks thejus, this makes sense! Forgive my ignorance - with the existing code above, what would be the easiest way to commit the edits to the server?

thejuskambi

Hello Linda

The updateDataGrid.txt does not have any logic to update the server. i.e. no code is calling the featurelayer.applyedits method. the store.setValue updates only the memory variables so as long, you dont search again the values you have updated will remain. But if you get the records again from the service. The original values will be returned.

Hope this answers your doubt.

Thejus

LindaDunklee

I am having the same issue with this as Adam mentions above - my updated values don't persist when I redo the search. My service is also enabled to allow editing and the value changes in the grid until the search is redone. Checking the database, the value does not change. Has anyone been able to resolve this issue?

HemingZhu

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?

SamirGambhir

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

dojoxGrid_image.zip

HemingZhu

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?

AdamGoodfellow

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.

SamirGambhir

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

SamirGambhir

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

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

taopy

just look for the same problem thks

SamirGambhir

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

HemingZhu

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

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

SamirGambhir

Thanks Heming,
Unfortunately, this step did not make any change. As I mentioned earlier, var value returns all values and I have validated those values too, but it is store.setValues where this fails.
I apologize for taking so much of your time.
Thanks
Samir

HemingZhu

Hi Heming,
Your suggestion works really well, but I am encountering some problem. Here is my code:
data = {items:items};
store = new dojo.data.ItemFileWriteStore({data:data});
store.fetch({onBegin:function(total){alert("there are "+total+" items in store");}});
if (boxId=="checkTest1"){
   for (i=0; i<items.length; i++){
     var item=items;
     var value = store.fetch({query:{},onItem:function(item){alert(store.getValues(item, "Shape_Leng"));}});
     store.setValues(item, "indValue", value);
   }
}
grid.setStore(store);

My 'alert' on values returns the right values (and the right count of values), but it does not populate the grid. It fills in the values as [object Object]. Would you know why is this happening?
Thanks
Samir

try this:

if (boxId=="checkTest1"){
   var items =store._arrayOfAllItems;
   for (i=0; i<items.length; i++){              
     var item=items;
     var value = store.getValues(item, "Shape_Leng");
     store.setValues(item, "indValue", value);
   }
}

SamirGambhir

Hi Heming,
Your suggestion works really well, but I am encountering some problem. Here is my code:
data = {items:items};
store = new dojo.data.ItemFileWriteStore({data:data});
store.fetch({onBegin:function(total){alert("there are "+total+" items in store");}});
if (boxId=="checkTest1"){
   for (i=0; i<items.length; i++){
     var item=items;
     var value = store.fetch({query:{},onItem:function(item){alert(store.getValues(item, "Shape_Leng"));}});
     store.setValues(item, "indValue", value);
   }
}
grid.setStore(store);

My 'alert' on values returns the right values (and the right count of values), but it does not populate the grid. It fills in the values as [object Object]. Would you know why is this happening?
Thanks
Samir

SamirGambhir

Thanks Heming,
Let me give it a try and I'll let you know if I face any other issues.
Samir

HemingZhu

Still no luck, Heming,
I tried your solution, but it is not reading store.setValue(...) at all. I also put a check to see what values 'item' is returning but have been unsuccessful. Do you have any other suggestion.
This part of the code has taken me much longer than all the other portions in my application. Any help will be really appreciated.
Also, if you can direct me to a good source to understand the functioning of ItemFileWriteStore with examples, please pass it on.
Thanks
Samir

I modified the esri sample http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/find_map_datagrid.html just a little bit to include a update function.

updateDataGrid.txt.zip

SamirGambhir

Still no luck, Heming,
I tried your solution, but it is not reading store.setValue(...) at all. I also put a check to see what values 'item' is returning but have been unsuccessful. Do you have any other suggestion.
This part of the code has taken me much longer than all the other portions in my application. Any help will be really appreciated.
Also, if you can direct me to a good source to understand the functioning of ItemFileWriteStore with examples, please pass it on.
Thanks
Samir

HemingZhu

Thanks Heming,
I believe onRowClickHandler works with one row at a time. Can I use .setValues instead to update all records in the table? As I mentioned earlier, the table should update all values when the user selects another indicator.
Thanks
Samir

Then you might need to code like this:

for (i = 0; i < items.length; i++) { 
    var item = items; store.setValue(item,  "NB_D_SIGNS, "Test1") ;
}

SamirGambhir

Thanks Heming,
I believe onRowClickHandler works with one row at a time. Can I use .setValues instead to update all records in the table? As I mentioned earlier, the table should update all values when the user selects another indicator.
Thanks
Samir

HemingZhu

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:
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.
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

store.setValue(item, "NB_D_SIGNS, "Test1") will update a individual item's NB_D_SIGNS field value to "Test1". Before using this statement, you have to specify the item (just like to identify a record in a recordset). For example, in esri's sample: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm.
it used dojo.connect(grid, "onRowClick", onRowClickHandler) to inentify individual item...

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:

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.
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

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>
<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 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>
      <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,
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,
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

SamirGambhir

Thanks Heming,
This is helpful,
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

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

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.