topic Re: Clear Grid in ArcGIS JavaScript Maps SDK Questions

Clear Grid

jaykapalczynski — Tue, 15 Apr 2014 17:20:23 GMT

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); }

Re: Clear Grid

JonathanUihlein — Tue, 15 Apr 2014 20:47:24 GMT

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

Re: Clear Grid

jaykapalczynski — Sat, 11 Dec 2021 16:02:16 GMT

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.

Re: Clear Grid

JonathanUihlein — Wed, 16 Apr 2014 15:13:19 GMT

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/

Re: Clear Grid

jaykapalczynski — Thu, 17 Apr 2014 11:37:38 GMT

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

Re: Clear Grid

KenBuja — Sat, 11 Dec 2021 16:02:19 GMT

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

Re: Clear Grid

JonathanUihlein — Thu, 17 Apr 2014 12:40:50 GMT

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

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

Re: Clear Grid

jaykapalczynski — Sat, 11 Dec 2021 16:02:21 GMT

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>

Re: Clear Grid

jaykapalczynski — Fri, 18 Apr 2014 11:17:52 GMT

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

Re: Clear Grid

jaykapalczynski — Fri, 18 Apr 2014 18:18:36 GMT

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

Re: Clear Grid

jaykapalczynski — Sat, 11 Dec 2021 16:02:24 GMT

I was able to combine the two examples above and get the grid working and the Grid / Map interaction where the feature will highlight on grid selection and the grid row will highlight upon feature in map selection

So the only thing I need to figure out is how to modify the grid to act in this manner

Field 1        Field 2      Field 4       Field 5
               Field 3

Where field one is set in place and does not move when scrolled to the right to see remaining fields.....ALMOST There

Can someone help with the GRid Format to align i the above fashion

http://jsfiddle.net/HLdyV/31/

Re: Clear Grid

jaykapalczynski — Sat, 19 Apr 2014 15:54:08 GMT

I am trying the below dgrid formatting.....Its sort of working.

I can click the features in the map and the grid is responding by moving to the record, BUT there is no Data being displayed

And the format I am trying to achieve is not being reflected in the dgrid

http://jsfiddle.net/HLdyV/67/

Is my CSS correct?

Anyone have a few minutes to view this....where am I going wrong here....I know I am close

referencing this source.. view-source:http://dojofoundation.org/packages/dgrid/js/dgrid/test/complex_column.html

Re: Clear Grid

jaykapalczynski — Thu, 24 Apr 2014 15:10:13 GMT

Any thoughts on my last post jon.uihlein

Am i close? Object error...not sure about that

Thanks

Re: Clear Grid

JonathanUihlein — Thu, 24 Apr 2014 20:14:51 GMT

 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);

Re: Clear Grid

jaykapalczynski — Fri, 25 Apr 2014 12:17:35 GMT

FANTASTIC.....very appreciated.

Cheers

http://jsfiddle.net/Jaykapalczynski/HLdyV/114/