I'm having trouble getting a grid element to display the data from a feature layer. I've been modifying the answer to this questionDisplay attribute table with JavaScript API ver 4.9? by Robert Scheitlin, GISP. Lidia Dudina did you get a feature layer to work with Robert's example? I"m getting a Type Error on line 293 in the createGrid function. Not sure where I'm going wrong here. Any help would be greatly appreciated. Thanks, Mason html > head > meta charset = " utf-8 " > meta name = " viewport " content = " initial-scale = 1,maximum-scale = 1,user-scalable = no " > title > dGrid - 4.9 title > link rel = " stylesheet " href = " https://js.arcgis.com/4.14/esri/css/main.css " > script src = " https://js.arcgis.com/4.9/ " > script > style > html, body, #viewDiv { padding : 0 ; margin : 0 ; height : 100% ; width : 100% ; overflow : hidden ; } #info, #gridDisplay { position : absolute ; bottom : 0 ; left : 0 ; height : 35% ; background-color : white ; border-color : grey ; width : 100% ; font-family : "Avenir Next W00" , "Helvetica Neue" , Helvetica, Arial, sans-serif ; font-size : 14px ; } #info { z-index : 90 ; font-size : 16px ; padding-left : 20px ; } #info * { padding-right : 20px ; } #gridDisplay { z-index : 80 ; } .info { line-height : 20px ; padding-left : 5px ! important ; } .dgrid-header, .dgrid-header-row { background-color : #eee ; color : #57585A ; } .dgrid-row-even { background-color : #F7F8F8 ; } .dgrid-row-odd { background-color : #EFEFEF ; } .dgrid-selected { background : #B4DAF5 ; } .dgrid-row { border : none } style > script > require ( [ "esri/config" , "esri/WebMap" , "esri/views/MapView" , "esri/layers/FeatureLayer" , "esri/Graphic" , "esri/widgets/Legend" , "esri/widgets/Expand" , "esri/geometry/SpatialReference" , "dgrid/OnDemandGrid" , "dgrid/extensions/ColumnHider" , "dojo/store/Memory" , "dstore/legacy/StoreAdapter" , "dgrid/Selection" ] , function ( esriConfig , WebMap , MapView , FeatureLayer , Graphic , Legend , Expand , SpatialReference , OnDemandGrid , ColumnHider , Memory , StoreAdapter , Selection ) { { esriConfig . portalUrl = "https://maps.trpa.org/portal" ; } ; let map , view , meadowLayerView , grid ; const gridDiv = document . getElementById ( "grid" ) ; const infoDiv = document . getElementById ( "info" ) ; // create new map, view and csvlayer const gridFields = [ "OBJECTID" , "MeadowType" , "Final_Rating" , "Acres" ] ; const meadowLayer = new FeatureLayer ( { url : "https://maps.trpa.org/server/rest/services/SEZViewer_AssessmentUnits_Meadows/MapServer/0" , outFields : gridFields } ) ; map = new WebMap ( { portalItem : { id : "6d740280f5e34698bae774b38cde6469" } , layers : [ meadowLayer ] } ) ; view = new MapView ( { container : "viewDiv" , map : map , highlightOptions : { color : "#2B65EC" , fillOpacity : 0.4 } , padding : { bottom : infoDiv . clientHeight } } ) ; const legendExpand = new Expand ( { view : view , content : new Legend ( { view : view , style : "card" } ) } ) ; view . ui . add ( legendExpand , "top-left" ) ; // create a new datastore for the on demandgrid // will be used to display attributes of selected features const dataStore = new StoreAdapter ( { objectStore : new Memory ( { idProperty : "OBJECTID" } ) } ) ; /**************************************************** * Selects features from the layer that intersect * a polygon that user drew using sketch view model ****************************************************/ function popGrid ( ) { view . graphics . removeAll ( ) ; if ( meadowLayerView ) { const query = { where : "1=1" , outFields : [ "*" ] } ; // query graphics from the layer view. Geometry set for the query // can be polygon for point features and only intersecting geometries are returned meadowLayerView . queryFeatures ( query ) . then ( function ( results ) { const graphics = results . features ; // if the grid div is displayed while query results does not // return graphics then hide the grid div and show the instructions div if ( graphics . length > 0 ) { gridDiv . style . zIndex = 90 ; infoDiv . style . zIndex = 80 ; document . getElementById ( "featureCount" ) . innerHTML = " Showing attributes for " + graphics . length . toString ( ) + " features " } else { gridDiv . style . zIndex = 80 ; infoDiv . style . zIndex = 90 ; } // get the attributes to display in the grid const data = graphics . map ( function ( feature , i ) { return Object . keys ( feature . attributes ) . filter ( function ( key ) { // get fields that exist in the grid return ( gridFields . indexOf ( key ) !== - 1 ) ; } ) // need to create key value pairs from the feature // attributes so that info can be displayed in the grid . reduce ( function ( obj , key ) { obj [ key ] = feature . attributes [ key ] ; return obj ; } , { } ) ; } ) ; // set the datastore for the grid using the // attributes we got for the query results dataStore . objectStore . data = data ; grid . set ( "collection" , dataStore ) ; } ) . catch ( errorCallback ) ; } } /************************************************ * fires when user clicks a row in the grid * get the corresponding graphic and select it *************************************************/ function selectFeatureFromGrid ( event ) { // close view popup if it is open view . popup . close ( ) ; // get the ObjectID value from the clicked row const row = event . rows [ 0 ] const id = row . data . OBJECTID ; // setup a query by specifying objectIds const query = { objectIds : [ parseInt ( id ) ] , outFields : [ "*" ] , returnGeometry : true , outSpatialReference : view . SpatialReference } ; // query the csvLayerView using the query set above meadowLayerView . queryFeatures ( query ) . then ( function ( results ) { const graphics = results . features ; // remove all graphics to make sure no selected graphics view . graphics . removeAll ( ) ; view . goTo ( graphics [ 0 ] . geometry ) ; // create a new selected graphic const selectedGraphic = new Graphic ( { geometry : graphics [ 0 ] . geometry , symbol : { type : "simple-marker" , // style: "circle", color : "orange" , size : "12px" , // pixels outline : { // autocasts as new SimpleLineSymbol() color : [ 255 , 255 , 0 ] , width : 2 // points } } } ) ; // add the selected graphic to the view // this graphic corresponds to the row that was clicked view . graphics . add ( selectedGraphic ) ; } ) . catch ( errorCallback ) ; } /************************************************ * Creates a new grid. Loops through layer * fields and creates grid columns * Grid with selection and columnhider extensions *************************************************/ function createGrid ( fields ) { var columns = fields . filter ( function ( field , i ) { if ( gridFields . indexOf ( field . name ) !== - 1 ) { return field ; } } ) . map ( function ( field ) { if ( field . name === "OBJECTID" ) { return { field : field . name , label : field . name , sortable : true , hidden : true } ; } else { return { field : field . name , label : field . alias , sortable : true } ; } } ) ; // create a new onDemandGrid with its selection and columnhider // extensions. Set the columns of the grid to display attributes // the hurricanes cvslayer grid = new ( OnDemandGrid . createSubclass ( [ Selection , ColumnHider ] ) ) ( { columns : columns } , "grid" ) ; // add a row-click listener on the grid. This will be used // to highlight the corresponding feature on the view grid . on ( "dgrid-select" , selectFeatureFromGrid ) ; } function errorCallback ( error ) { console . log ( "error:" , error ) } // create a grid with given columns once the layer is loaded meadowLayer . when ( function ( ) { // create a grid with columns specified in gridFields variable createGrid ( meadowLayer . fields ) ; // get a reference the meadowlayerview when it is ready. view . whenLayerView ( meadowLayer ) . then ( function ( layerView ) { meadowLayerView = layerView ; popGrid ( ) ; } ) ; } ) . catch ( errorCallback ) ; } ) ; script > head > body > div id = " viewDiv " > div id = " info " > span class = " info " > b > Populating grid... b > span > br /> div > div id = " gridDisplay " > span class = " info " id = " featureCount " > span > div id = " grid " > div > div > div > body > html >

Mason, You are attempting to populate you grid before the layer is done updating to the map. // create a grid with given columns once the layer is loaded meadowLayer . when ( function ( ) { // create a grid with columns specified in gridFields variable createGrid ( meadowLayer . fields ) ; // get a reference the meadowlayerview when it is ready. view . whenLayerView ( meadowLayer ) . then ( function ( layerView ) { meadowLayerView = layerView ; //wait for the layerview to be done updating meadowLayerView . watch ( "updating" , function ( bool ) { if ( ! bool ) { popGrid ( ) ; } } ) } ) ; } ) . catch ( errorCallback ) ;

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

How do I get a table of Feature Layer attributes to show in a Grid?

MasonBindl

I'm having trouble getting a grid element to display the data from a feature layer. I've been modifying the answer to this questionDisplay attribute table with JavaScript API ver 4.9? by Robert Scheitlin, GISP‌.

Lidia Dudina‌ did you get a feature layer to work with Robert's example?

I"m getting a Type Error on line 293 in the createGrid function. Not sure where I'm going wrong here.

Any help would be greatly appreciated.

Thanks,
Mason

<SPAN class="doctype token"><!DOCTYPE html></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>dGrid - 4.9<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.14/esri/css/main.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.9/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
  <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="selector token">html,
    body,
    #viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">#info,
    #gridDisplay</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 35%<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">border-color</SPAN><SPAN class="punctuation token">:</SPAN> grey<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Avenir Next W00"</SPAN>, <SPAN class="string token">"Helvetica Neue"</SPAN>, Helvetica, Arial, sans-serif<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 14px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">#info</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN> 90<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 16px<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">padding-left</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">#info *</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">padding-right</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">#gridDisplay</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN> 80<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">.info</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">padding-left</SPAN><SPAN class="punctuation token">:</SPAN> 5px ! important<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">.dgrid-header,
    .dgrid-header-row</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #eee<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #57585A<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">.dgrid-row-even</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #F7F8F8<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">.dgrid-row-odd</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #EFEFEF<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">.dgrid-selected</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> #B4DAF5<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="selector token">.dgrid-row</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN> none
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

  <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/config"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/widgets/Legend"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/widgets/Expand"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/geometry/SpatialReference"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dgrid/OnDemandGrid"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dgrid/extensions/ColumnHider"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dojo/store/Memory"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dstore/legacy/StoreAdapter"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dgrid/Selection"</SPAN>
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
        esriConfig<SPAN class="punctuation token">,</SPAN> WebMap<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">,</SPAN> Expand<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN>
        OnDemandGrid<SPAN class="punctuation token">,</SPAN> ColumnHider<SPAN class="punctuation token">,</SPAN> Memory<SPAN class="punctuation token">,</SPAN> StoreAdapter<SPAN class="punctuation token">,</SPAN> Selection
      <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="punctuation token">{</SPAN>
        esriConfig<SPAN class="punctuation token">.</SPAN>portalUrl <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://maps.trpa.org/portal"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
                
        <SPAN class="keyword token">let</SPAN> map<SPAN class="punctuation token">,</SPAN> view<SPAN class="punctuation token">,</SPAN> meadowLayerView<SPAN class="punctuation token">,</SPAN> grid<SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">const</SPAN> gridDiv <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"grid"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">const</SPAN> infoDiv <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"info"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// create new map, view and csvlayer</SPAN>
        <SPAN class="keyword token">const</SPAN> gridFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"OBJECTID"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"MeadowType"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Final_Rating"</SPAN><SPAN class="punctuation token">,</SPAN>
           <SPAN class="string token">"Acres"</SPAN>
        <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
        
        <SPAN class="keyword token">const</SPAN> meadowLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://maps.trpa.org/server/rest/services/SEZViewer_AssessmentUnits_Meadows/MapServer/0"</SPAN><SPAN class="punctuation token">,</SPAN>
            outFields<SPAN class="punctuation token">:</SPAN> gridFields
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


        map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"6d740280f5e34698bae774b38cde6469"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>meadowLayer<SPAN class="punctuation token">]</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            
        view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
            map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
            highlightOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#2B65EC"</SPAN><SPAN class="punctuation token">,</SPAN>
              fillOpacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              bottom<SPAN class="punctuation token">:</SPAN> infoDiv<SPAN class="punctuation token">.</SPAN>clientHeight
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">const</SPAN> legendExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
            content<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
              view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
              style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"card"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>legendExpand<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


        <SPAN class="comment token">// create a new datastore for the on demandgrid</SPAN>
        <SPAN class="comment token">// will be used to display attributes of selected features</SPAN>
        <SPAN class="keyword token">const</SPAN> dataStore <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">StoreAdapter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          objectStore<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Memory</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            idProperty<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"OBJECTID"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="comment token">/****************************************************
         * Selects features from the layer that intersect
         * a polygon that user drew using sketch view model
         ****************************************************/</SPAN>
        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">popGrid</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>meadowLayerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">const</SPAN> query <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
              where<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"1=1"</SPAN><SPAN class="punctuation token">,</SPAN>
              outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// query graphics from the layer view. Geometry set for the query</SPAN>
            <SPAN class="comment token">// can be polygon for point features and only intersecting geometries are returned</SPAN>
            meadowLayerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">const</SPAN> graphics <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
                <SPAN class="comment token">// if the grid div is displayed while query results does not</SPAN>
                <SPAN class="comment token">// return graphics then hide the grid div and show the instructions div</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>graphics<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  gridDiv<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>zIndex <SPAN class="operator token">=</SPAN> <SPAN class="number token">90</SPAN><SPAN class="punctuation token">;</SPAN>
                  infoDiv<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>zIndex <SPAN class="operator token">=</SPAN> <SPAN class="number token">80</SPAN><SPAN class="punctuation token">;</SPAN>
                  document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"featureCount"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN>
                    <SPAN class="string token">"<b>Showing attributes for "</SPAN> <SPAN class="operator token">+</SPAN>
                    graphics<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">" features </b>"</SPAN>
                <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                  gridDiv<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>zIndex <SPAN class="operator token">=</SPAN> <SPAN class="number token">80</SPAN><SPAN class="punctuation token">;</SPAN>
                  infoDiv<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>zIndex <SPAN class="operator token">=</SPAN> <SPAN class="number token">90</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>

                <SPAN class="comment token">// get the attributes to display in the grid</SPAN>
                <SPAN class="keyword token">const</SPAN> data <SPAN class="operator token">=</SPAN> graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  <SPAN class="keyword token">return</SPAN> Object<SPAN class="punctuation token">.</SPAN><SPAN class="token function">keys</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">)</SPAN>
                    <SPAN class="punctuation token">.</SPAN><SPAN class="token function">filter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>key<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                      <SPAN class="comment token">// get fields that exist in the grid</SPAN>
                      <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">(</SPAN>gridFields<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>key<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">!==</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                    <SPAN class="comment token">// need to create key value pairs from the feature</SPAN>
                    <SPAN class="comment token">// attributes so that info can be displayed in the grid</SPAN>
                    <SPAN class="punctuation token">.</SPAN><SPAN class="token function">reduce</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>obj<SPAN class="punctuation token">,</SPAN> key<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                      obj<SPAN class="punctuation token">[</SPAN>key<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN>key<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                      <SPAN class="keyword token">return</SPAN> obj<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="comment token">// set the datastore for the grid using the</SPAN>
                <SPAN class="comment token">// attributes we got for the query results</SPAN>
                dataStore<SPAN class="punctuation token">.</SPAN>objectStore<SPAN class="punctuation token">.</SPAN>data <SPAN class="operator token">=</SPAN> data<SPAN class="punctuation token">;</SPAN>
                grid<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"collection"</SPAN><SPAN class="punctuation token">,</SPAN> dataStore<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
              <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>errorCallback<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="comment token">/************************************************
         * fires when user clicks a row in the grid
         * get the corresponding graphic and select it
         *************************************************/</SPAN>
        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">selectFeatureFromGrid</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// close view popup if it is open</SPAN>
          view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="comment token">// get the ObjectID value from the clicked row</SPAN>
          <SPAN class="keyword token">const</SPAN> row <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>rows<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN>
          <SPAN class="keyword token">const</SPAN> id <SPAN class="operator token">=</SPAN> row<SPAN class="punctuation token">.</SPAN>data<SPAN class="punctuation token">.</SPAN>OBJECTID<SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// setup a query by specifying objectIds</SPAN>
          <SPAN class="keyword token">const</SPAN> query <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            objectIds<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="token function">parseInt</SPAN><SPAN class="punctuation token">(</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            returnGeometry<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
            outSpatialReference<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>SpatialReference
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// query the csvLayerView using the query set above</SPAN>
          meadowLayerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">const</SPAN> graphics <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
              <SPAN class="comment token">// remove all graphics to make sure no selected graphics</SPAN>
              view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN>graphics<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

              <SPAN class="comment token">// create a new selected graphic</SPAN>
              <SPAN class="keyword token">const</SPAN> selectedGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                geometry<SPAN class="punctuation token">:</SPAN> graphics<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">,</SPAN>
                symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="comment token">//                  style: "circle",</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"orange"</SPAN><SPAN class="punctuation token">,</SPAN>
                  size<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"12px"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// pixels</SPAN>
                  outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN>
                    color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                    width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN> <SPAN class="comment token">// points</SPAN>
                  <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

              <SPAN class="comment token">// add the selected graphic to the view</SPAN>
              <SPAN class="comment token">// this graphic corresponds to the row that was clicked</SPAN>
              view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>selectedGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>errorCallback<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        <SPAN class="comment token">/************************************************
         * Creates a new grid. Loops through layer 
         * fields and creates grid columns
         * Grid with selection and columnhider extensions
         *************************************************/</SPAN>
        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">createGrid</SPAN><SPAN class="punctuation token">(</SPAN>fields<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> columns <SPAN class="operator token">=</SPAN> fields<SPAN class="punctuation token">.</SPAN><SPAN class="token function">filter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>field<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>gridFields<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>field<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">!==</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">return</SPAN> field<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>field<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>field<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">===</SPAN> <SPAN class="string token">"OBJECTID"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
                field<SPAN class="punctuation token">:</SPAN> field<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
                label<SPAN class="punctuation token">:</SPAN> field<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
                sortable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                hidden<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
                field<SPAN class="punctuation token">:</SPAN> field<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
                label<SPAN class="punctuation token">:</SPAN> field<SPAN class="punctuation token">.</SPAN>alias<SPAN class="punctuation token">,</SPAN>
                sortable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// create a new onDemandGrid with its selection and columnhider</SPAN>
          <SPAN class="comment token">// extensions. Set the columns of the grid to display attributes</SPAN>
          <SPAN class="comment token">// the hurricanes cvslayer</SPAN>
          grid <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN><SPAN class="punctuation token">(</SPAN>OnDemandGrid<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createSubclass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>Selection<SPAN class="punctuation token">,</SPAN> ColumnHider<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            columns<SPAN class="punctuation token">:</SPAN> columns
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"grid"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// add a row-click listener on the grid. This will be used</SPAN>
          <SPAN class="comment token">// to highlight the corresponding feature on the view</SPAN>
          grid<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"dgrid-select"</SPAN><SPAN class="punctuation token">,</SPAN> selectFeatureFromGrid<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        
        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">errorCallback</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"error:"</SPAN><SPAN class="punctuation token">,</SPAN> error<SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        
        <SPAN class="comment token">// create a grid with given columns once the layer is loaded</SPAN>
        meadowLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// create a grid with columns specified in gridFields variable</SPAN>
            <SPAN class="token function">createGrid</SPAN><SPAN class="punctuation token">(</SPAN>meadowLayer<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// get a reference the meadowlayerview when it is ready.</SPAN>
            view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>meadowLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              meadowLayerView <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">;</SPAN>
              <SPAN class="token function">popGrid</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>errorCallback<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>info<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>span</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>info<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Populating grid...<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>span</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>gridDisplay<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>span</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>info<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>featureCount<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>span</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>grid<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Encontre mais publicações marcadas com

Accepted answers

RobertScheitlin__GISP

Mason,

You are attempting to populate you grid before the layer is done updating to the map.

        <SPAN class="comment token">// create a grid with given columns once the layer is loaded</SPAN>
        meadowLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// create a grid with columns specified in gridFields variable</SPAN>
            <SPAN class="token function">createGrid</SPAN><SPAN class="punctuation token">(</SPAN>meadowLayer<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// get a reference the meadowlayerview when it is ready.</SPAN>
            view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>meadowLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              meadowLayerView <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//wait for the layerview to be done updating</SPAN>
              meadowLayerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>bool<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>bool<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                  <SPAN class="token function">popGrid</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>errorCallback<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Mason,

You are attempting to populate you grid before the layer is done updating to the map.

        <SPAN class="comment token">// create a grid with given columns once the layer is loaded</SPAN>
        meadowLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// create a grid with columns specified in gridFields variable</SPAN>
            <SPAN class="token function">createGrid</SPAN><SPAN class="punctuation token">(</SPAN>meadowLayer<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// get a reference the meadowlayerview when it is ready.</SPAN>
            view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>meadowLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              meadowLayerView <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//wait for the layerview to be done updating</SPAN>
              meadowLayerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>bool<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>bool<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                  <SPAN class="token function">popGrid</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>errorCallback<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

MasonBindl

That did it. Thank you Robert! I'm new to creating apps with the 4.x JS API and JS in general, so your examples and guidance have been invaluable.

Much appreciated!

After I clean up this example, I need to fold it into the main application by figuring out how to hide the table in an Expand widget and then have it occupy part of the screen when expanded.

Take care,

-Mason

MasonBindl

Robert Scheitlin, GISP‌ here's the app I made using your example/help Tahoe SEZ

I just saw the beta FeatureTable | ArcGIS API for JavaScript 4.15 came out.

What are your thoughts on that? At first glance it looks promising. Is it built on top of DGrid?

Thanks again for the help/example,

Mason

RobertScheitlin__GISP

Nice app. I have not looked into the FeatureTable widget to much yet but yes it looks great.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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