Clear Grid

jaykapalczynski · ‎04-15-2014

I am populating my grid with this
Looking for a way to clear the grid on the start of another tool...

        var data = arrayUtils.map(featureSet.features, function (entry, i) {           return {             NAME: entry.attributes.SITENAME,             REGION: entry.attributes.REGION,             WATERBODY: entry.attributes.WATERBODY,             TYPE: entry.attributes.TYPE,             ACCESSAREA: entry.attributes.ACCESSAREA,             LOCATION: entry.attributes.LOCATION           };         });         grid.store.setData(data);         grid.refresh();

I tried to create a new Grid and clear it but not having luck....any thoughts?

var newStore = new dojo.data.ItemFileReadStore({data: {  identifier: "",  items: []}});  var grid = dijit.byId("grid");  grid.setStore(newStore); }

JonathanUihlein · ‎04-24-2014

 var data = array.map(results.features, function(feature) {   return {                       "id": feature.attributes[outFields[0]],         "NAME": feature.attributes[outFields[2]],         "WATERBODY": feature.attributes[outFields[3]],         "ACCESSAREA": feature.attributes[outFields[5]],         "LOCATION": feature.attributes[outFields[9]]   } });

This is wrong because outFields[5] and outFields[9] do not exist in your application.

This is your current outFields array:

outFields = ["OBJECTID", "SITENAME", "WATERBODY", "ACCESSAREA", "LOCATION"];

outFields[0] is "OBJECTID", outField[1] is "SITENAME" etc.

There are five elements so anything up to outFields[4] is valid.

outFields[9] returns undefined. You can confirm this by checking your current store implementation.

Out of curiosity, where did you come up with outFields[9]?

This is valid:

 var data = array.map(results.features, function(feature) {   return {                     "id": feature.attributes[outFields[0]],       "SITENAME": feature.attributes[outFields[1]],       "WATERBODY": feature.attributes[outFields[2]],       "ACCESSAREA": feature.attributes[outFields[3]],       "LOCATION": feature.attributes[outFields[4]]   } });

Another option is:

 var data = array.map(results.features, function(feature) {   return {                     "id": feature.attributes["OBJECTID"],       "SITENAME": feature.attributes["SITENAME"],       "WATERBODY": feature.attributes["WATERBODY"],       "ACCESSAREA": feature.attributes["ACCESSAREA"],       "LOCATION": feature.attributes["LOCATION"]   } });

As for the data not showing up in the grid, you are missing several key pieces in addition to fixing your data store.

1) You are using a columnSet. You need to bring in the columnSet module in your require: "dgrid/ColumnSet" / ColumnSet

2) Use columnSet in your grid definition: gridNoColumnSets = new (declare([Grid, Selection, ColumnSet]))({...

2.5) Rename your grid to something else 🙂

3) Set the columnSets property of your grid:

gridNoColumnSets.set("columnSets", columnExample2);

View solution in original post

JonathanUihlein · ‎04-15-2014

I am not 100% sure without checking a sample but you might have to refresh the grid after updating the store.

On a more serious note, I would suggest using dgrid instead of dojox.dataGrid.

In my opinion, dgrid is a thousand times easier to use (this is hyperbole, but trust me).
Dgrid is also included in the ESRI JSAPI; no additional installation required.

dgrid documentation is a quick read:
https://github.com/SitePen/dgrid/wiki

First Sample:
http://dojofoundation.org/packages/dgrid/tutorials/hello_dgrid/

My Advanced Sample:
http://jsfiddle.net/KJqXQ/1/

Note:
- Check out the two column objects (columnExample1 and columnExample2)
-- columnExample1 is a simple column object while columnExample2 is for more advanced grids

Further Advice:
Use a standard "Grid" with the Pagination extension if you want your grid to have paging.

Use OnDemandGrid if you don't want paging and want a grid with efficient lazy loading (this offers better performance with thousands of rows).

jaykapalczynski · ‎04-15-2014

thanks Jon
I was doign this in silverlight with great success....I have to go back and determine what I was using...

What I eventually want to do is move slightly away from a table format ad do something like the below....can I do this with the example you suggested?

I then want to have to Feature in the map interactive with the row in the Grid. Where I can hover on the Row in the Grid and have it highlight in the map and visa-versa....Map back to the grid

            
        Title
Image   Address
        some other info

Instead of:

Image    Title    Address     some other info

Can I build a table structure with TD and TR?

Thanks for your thoughts.

JonathanUihlein · ‎04-16-2014

You can absolutely do that with dgrid!
A good idea would be to find a style of grid you like, then try to replicate it using the sample code.

Check out these 4 demos for an idea of the power behind dgrid:
http://dojofoundation.org/packages/dgrid/#demos

Complex column examples:
http://dojofoundation.org/packages/dgrid/js/dgrid/test/complex_column.html

List of specific dgrid test cases:
http://dojofoundation.org/packages/dgrid/js/dgrid/test/

jaykapalczynski · ‎04-17-2014

Do I have to install dgrid? http://dojofoundation.org/packages/dgrid/

KenBuja · ‎04-17-2014

dgrid is part of the JSAPI since 3.4. For example, on the What's New in 3.9 page

Version 3.9 of the ArcGIS API for JavaScript uses Dojo 1.9.1 as well as version 0.3.11 of dgrid, 0.3.5 of put-selector and 0.1.3 of xstyle.

You will have to include a link to the dgrid css, as shown in this sample.

<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dgrid/css/dgrid.css">

JonathanUihlein · ‎04-17-2014

Dgrid is also included in the ESRI JSAPI; no additional installation required.

Let me know if you have any additional questions about dgrid!

jaykapalczynski · ‎04-17-2014

Alright this is where I am at...with your help of course....appreciated.

I successfully incorporate your example into my app....
1. my app works as such, click the buffer select tool on the left.
2. click somewhere in the map....preferable near the shore (you are selecting boat ramps)
3. a buffer fires and selects the ramps within the buffer and then displays the results in the dgrid
4. This works great.

THANK YOU FOR YOUR HELP VERY appreciated.

Results seeking:
What I want to do now is format the dgrid to have

                        
                     Field 3
Field1    Field 2    Field 4   Field 5  Field 6

Where Field 1 and Field 2 are set in position and you scroll to see Fields 3,4,5,6

http://jsfiddle.net/Jaykapalczynski/G24Mc/3/

Questions:

I am confused if I should be attempting this in JavaScript or in HTML

If one better than the other?

Easier than the other?

        var columnExample2 = [
            {"label": "id", "field": "ACCESSAREA"
   }, {
                "label": "County",
                "field": "COUNTY",
                "rowspan": "2"
            }, {
                "label": "Access",
                "field": "ACCESSAREA"
            }, {
                "label": "Waterbody",
                "field": "WATERBODY",
                "formatter": function (value) {
                    return "<strong>" + value + "</strong>";
                },
                "get": function (object) {
                    return object["WATERBODY"];
                }
            }, {
                "label": "Type",
                "field": "TYPE",
                "sortable": false
            }, {
                "label": "Location",
                "field": "LOCATION",
                "hidden": true
            }
        ];

OR SOMETHING like this

  
<table id="gridFromHtml" class="grid">
 <colgroup span="2"></colgroup>
 <colgroup span="2"></colgroup>
 <thead>
  <tr>
   <th data-dgrid-column="{field:'col1'}">Column 1</th>
   <th data-dgrid-column="{field:'col2', sortable:false}">Column 2</th>
   <th rowspan="2" data-dgrid-column="{field:'col1'}">Column 1</th>
   <th data-dgrid-column="{field:'col4'}">Column 4</th>
  </tr>
  <tr>
   <th colspan="2" data-dgrid-column="{field:'col3'}">Column 3</th>
   <th data-dgrid-column="{field:'col5'}">Column 5</th>
  </tr>
 </thead>
</table>

jaykapalczynski · ‎04-18-2014

............................................look at follwing post...removed these as I found other stuff out..

jaykapalczynski · ‎04-18-2014

...........................................................look at next post