Feature Table Show/Hide Issue

ChristopherJohnson1 · ‎11-04-2016

I have a map on which I am loading a couple feature layers. Additionally, I am adding 2 feature tables, each one associated with one of the feature layers. Because the layers are scale-dependent, I am only showing one table at a time using jQuery's show() and hide() functions.

At the initial extent, only one table is shown. When a user zooms in a couple levels, that first table disappears and the second table appears. The show/hide function is working well, for the most part. The issue that I am encountering is that when the second table appears, the column headers are not present in the feature table. If I add/hide a column through the "Options" menu, then the column headers appear again.

An interesting twist...if I leave both tables visible at the initial extent and zoom in, when the second table re-appears, it shows with the column headers.

Any idea what could be causing this issue?

Thanks...Chris

RobertScheitlin__GISP · ‎11-05-2016

Chris,

I have seen this before and the issue seems to be that the FeatureTable need to be created and added to the DOM to a div that is not "display: none" but visibility: hidden or just set to the outside bounds of the view display. If you share your code then I can provide more help.

ChristopherJohnson1 · ‎11-05-2016

Thanks for the reply, Robert. Please see the code below.

<!DOCTYPE html>  
<html>  
  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <title>Using FeatureTable</title>  
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">  
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">  
  <script src="https://js.arcgis.com/3.16/"></script>  
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  
  <style>  
    html, body, #map{  
      width:100%;  
      height:500px;  
      margin:0;  
      padding:0;  
    }  
     
#divGrid     {
     width: 100%;
     height: 200px;
     margin-bottom: 20px;
}

.tableheight {
     height: 300px;
}
  </style>  
  
  <script>    
    require([  
      "esri/geometry/Extent",
       "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters",
       "esri/layers/FeatureLayer",  
      "esri/dijit/FeatureTable",  
       "esri/renderers/SimpleRenderer",
       "esri/renderers/ClassBreaksRenderer", "esri/tasks/GenerateRendererParameters", "esri/tasks/GenerateRendererTask",
    "esri/tasks/ClassBreaksDefinition",
     "esri/tasks/AlgorithmicColorRamp",
     "esri/symbols/SimpleMarkerSymbol", 
     "esri/symbols/SimpleLineSymbol", 
     "esri/symbols/SimpleFillSymbol", 
     "esri/Color", 
      "esri/geometry/webMercatorUtils",  
      "esri/map",  "esri/layers/LayerDrawingOptions",
      "dojo/dom-construct",  
      "dojo/dom",  
      "dojo/parser",  
      "dojo/ready",  
      "dojo/on",  
      "dojo/_base/lang",  
      "dijit/registry",  
      "esri/tasks/query",  
      "dijit/form/Button",  
      "dijit/layout/ContentPane",  
      "dijit/layout/BorderContainer",  
      "dijit/form/TextBox"  
    ], function (  Extent,ArcGISDynamicMapServiceLayer, ImageParameters,
      FeatureLayer, FeatureTable, SimpleRenderer, ClassBreaksRenderer, GenerateRendererParameters, GenerateRendererTask, ClassBreaksDefinition, AlgorithmicColorRamp,SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, webMercatorUtils, Map,  LayerDrawingOptions,
      domConstruct, dom, parser, ready, on,lang,  
      registry, Query, Button, ContentPane, BorderContainer, TextBox  
    ) {  
      parser.parse();  
  
      ready(function(){  
  
     var initialExtent = new esri.geometry.Extent({
          "xmin": -14901092.916080378,
          "ymin": 2570827.677759068,
          "xmax": -7382135.317726159,
          "ymax": 7046980.0541378,
          "spatialReference": { "wkid": 102100 }
     });

     var map, citypointFT, citypolyFT, tractpolyFT, citypointlayer, citypolygonlayer, tractpolygonlayer, fl_url;
     var fieldsoutputted, fieldsarray, renderedField = "col1", MoreDetails = "col2";
     
     var myFeatureLayer, renderer, DynamicMapServiceURL = "xxx";

           // define the dynamic map service layer

     var imageParameters = new ImageParameters();
     imageParameters.format = "png";

     var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(DynamicMapServiceURL, {
          "opacity": 1.0,
          "imageParameters": imageParameters
     });
       
        map = new Map("map",{  
          basemap: "gray", extent: initialExtent  
        });  
          
          var pointSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setSize(8).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));
          
          var polygonSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));
  
          // load the feature table and its accompanying data on map load
          map.on("load", loadTable);

           // show/hide table, based on scale
          map.on("extent-change", showHideGridAndLegend);
          
          // the function below displays an error message and hides the div in which the map is drawn
     function showErr(err)
     {
          'use strict;'
          console.log("Error Details: " + err);
     }

     function AddGrid(lyrid, gridloc)
     {
          var existingGrid = dijit.byId(gridloc);

          if (existingGrid)
          {
               existingGrid.destroyRecursive(true);
          }

          if (lyrid === 4)
          {
               tractpolyFT = new FeatureTable({
                    "featureLayer": tractpolygonlayer,
                    "map": map,
                    "showStatistics": false,
                    "zoomToSelection": false,
                    "syncSelection": true,
                    "outFields": ["PlaceName", "StateAbbr", "plc_tract2010", renderedField, MoreDetails, "PlcTrPop2010"],
                    "fieldInfos": [{
                         name: 'PlaceName',
                         alias: 'City',
                    }, {
                         name: 'StateAbbr',
                         alias: 'State',
                    }, {
                         name: 'plc_tract2010',
                         alias: 'Census Tract ID',
                    }, {
                         name: renderedField,
                         alias: 'Column 1',
                    }, {
                         name: MoreDetails,
                         alias: 'More Details',
                    }, {
                         name: 'PlcTrPop2010',
                         alias: '2010 Census Population'
                    }]
                    //,
                    //"gridOptions": [{
                    //     noDataMessage: "No Data",
                    //     allowSelectAll: false,
                    //     columnHider: false,
                    //     sort: {
                    //          field: "PlaceName", ascending: true,
                    //          field: "StateAbbr", ascending: true,
                    //          field: "plc_tract2010", ascending: true
                    //     }
                    //}]
               }, gridloc);

               tractpolyFT.startup();

          } else
          {
               if (lyrid === 0)
               {
                    citypointFT = new FeatureTable({
                         "featureLayer": citypointlayer,
                         "map": map,
                         "showStatistics": false,
                         "zoomToSelection": false,
                         "syncSelection": true,
                         "outFields": ["NAME", "ST", renderedField, MoreDetails, MoreDetails2, MoreDetails3
                         ],
                         "fieldInfos": [{
                              name: 'NAME',
                              alias: 'City',
                         }, {
                              name: 'ST',
                              alias: 'State',
                         }, {
                              name: renderedField,
                              alias: 'Column 1',
                         }, {
                              name: MoreDetails,
                              alias: 'More Details'
                         }, {
                              name: MoreDetails2,
                              alias: 'More Details 2',
                         }, {
                              name: MoreDetails3,
                              alias: 'More Details 3'
                         }
                         //, {
                         //     name: 'POP2010',
                         //     alias: '2010 Census Population'
                         //}
                         ]
                         //,
                         //"gridOptions": [{
                         //     noDataMessage: "No Data",
                         //     allowSelectAll: false,
                         //     columnHider: false,
                         //     sort: {
                         //          field: "NAME", ascending: true,
                         //          field: "ST", ascending: true,
                         //     }
                         //}]
                    }, gridloc);

                    citypointFT.startup();
               }
               else
               {
                    citypolyFT = new FeatureTable({
                         "featureLayer": citypolygonlayer,
                         "map": map,
                         "showStatistics": false,
                         "zoomToSelection": false,
                         "syncSelection": true,
                         "outFields": ["NAME", "ST", renderedField, MoreDetails, MoreDetails2, MoreDetails3, "POP2010"],
                         "fieldInfos": [{
                              name: 'NAME',
                              alias: 'City',
                         }, {
                              name: 'ST',
                              alias: 'State',
                         }, {
                              name: renderedField,
                              alias: 'Column 1',
                         }, {
                              name: MoreDetails,
                              alias: 'More Details'
                         }, {
                              name: MoreDetails2,
                              alias: 'More Details 2',
                         }, {
                              name: MoreDetails3,
                              alias: 'More Details 3'
                         }, {
                              name: 'POP2010',
                              alias: '2010 Census Population'
                         }]
                         //,
                         //"gridOptions": [{
                         //     noDataMessage: "No Data",
                         //     allowSelectAll: false,
                         //     columnHider: false,
                         //     sort: {
                         //          field: "NAME", ascending: true,
                         //          field: "ST", ascending: true,
                         //     }
                         //}]
                    }, gridloc);

                    citypolyFT.startup();
               }
          }
     }

     function showHideGridAndLegend()
     {
          console.log(map.getScale());
          switch (true)
          {
               case (map.getScale() >= 36978595.474472):
                    
                    $('#citypointgrid').show();
                    $('#citypolygongrid').hide();

                    break;

               case (map.getScale() < 36978595.474472 && map.getScale() >= 6000000):
                    
                    $('#citypointgrid').hide();
                    $('#citypolygongrid').show();
                    
                    break;

               case (map.getScale() < 6000000 && map.getScale() > 2311162.217155):
                    
                    $('#citypointgrid').hide();
                    $('#citypolygongrid').show();

                    break;

               case (map.getScale() <= 2311162.217155):
                    
                    $('#citypointgrid').hide();
                    $('#citypolygongrid').hide();
                    
                    break;

               default:

                    $('#citypointgrid').hide();
                    $('#citypolygongrid').hide();
                    
                    break;
          }
     }
          
          // the functions below dynamically render the data
     // the function below applies the renderer generated by the createRenderer function above to the featureLayer and adds labels.
     function applyCPRenderer(citypointrenderer)
     {
          'use strict;'
          citypointrenderer.defaultLabel = "Data unavailable";

          citypointrenderer.defaultSymbol = pointSymbol;

          citypointlayer.setRenderer(citypointrenderer);

          citypointlayer.renderer.setOpacityInfo(0.7);

          map.addLayer(citypointlayer);
     }

     function applyRenderer(renderer)
     {
          'use strict;'
          renderer.defaultLabel = "Data unavailable";

          renderer.defaultSymbol = polygonSymbol;

          citypolygonlayer.setRenderer(renderer);

          citypolygonlayer.renderer.setOpacityInfo(0.7);

          map.addLayer(citypolygonlayer);
     }

     function createRenderer(lyr,field)
     {
          'use strict;'
          var classDef = new ClassBreaksDefinition();
          classDef.classificationField = field;
          classDef.classificationMethod = "natural-breaks";
          classDef.breakCount = 7;

          classDef.baseSymbol = lyr === 0 ? pointSymbol : polygonSymbol;     

          var colorRamp = new AlgorithmicColorRamp();
          colorRamp.fromColor = new Color.fromHex("#F0F9E8");
          colorRamp.toColor = new Color.fromHex("#2b8cbe");
          colorRamp.algorithm = "hsv";

          classDef.colorRamp = colorRamp;

          var params = new GenerateRendererParameters();
          params.classificationDefinition = classDef;

          var generateRenderer = new GenerateRendererTask(DynamicMapServiceURL + "/" + lyr);
          
          if (lyr === 0)
          {
               generateRenderer.execute(params, applyCPRenderer, showErr);
          }
          else
          {
               generateRenderer.execute(params, applyRenderer, showErr);
          }
     }
  
        function loadTable(){  

                      fieldsoutputted = 'NAME,ST,' + renderedField + ',' + CI + ',' + renderedField.replace('CrudePrev', 'AdjPrev') + ',' + CI.replace('Crude95CI', 'Adj95CI') + ',POP2010';
                  fieldsarray = fieldsoutputted.split(",");

                  fl_url = DynamicMapServiceURL + "/0";
                    
                    citypointlayer = new FeatureLayer(fl_url, {
                                   mode: FeatureLayer.MODE_ONDEMAND,
                                   outFields: fieldsarray,
                                   //infoTemplate: infotemp,
                                   id: "citypointlayer"
                         , orderByFields: ["NAME"]
                              });
                              
                    createRenderer(0, renderedField);

                  AddGrid(0, "citypointgrid");

                    fl_url = DynamicMapServiceURL + "/3";

                    citypolygonlayer = new FeatureLayer(fl_url, {
                         mode: FeatureLayer.MODE_ONDEMAND,
                         outFields: fieldsarray,
                         //infoTemplate: infotemp,
                         id: "citypolygonlayer"
                         ,orderByFields: ["ST"]
                    });

                    createRenderer(3, renderedField);

                    AddGrid(3, "citypolygongrid");

                    showHideGridAndLegend();
        }  
      });  
    });  
  </script>  
</head>  
  
<body class="claro esri">  
    <div id="map"></div>
     <div id="divGrid">
          <!--<div id="citypt">-->
               <!--<h3>City Point Grid</h3>-->
               <div id="citypointgrid"></div>
          <!--</div>
          <div id="citypoly">-->
               <!--<h3>City Poly Grid</h3>-->
               <div id="citypolygongrid"></div>
          <!--</div>-->
     </div>
</body>  
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-05-2016

Christopher,

I removed the JQuery library as esri has a show hide class (and this was all you were loading that heavy library for) I also removed one legacy style line of code and changed where the on extent change handler was set. With the extent change handler setting changed I think it will take care of your issue.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Using FeatureTable</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.16/"></script>

    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 500px;
            margin: 0;
            padding: 0;
        }

        #divGrid {
            width: 100%;
            height: 200px;
            margin-bottom: 20px;
        }

        .tableheight {
            height: 300px;
        }
    </style>

    <script>
        require([
            "esri/geometry/Extent",
            "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters",
            "esri/layers/FeatureLayer",
            "esri/dijit/FeatureTable",
            "esri/renderers/SimpleRenderer",
            "esri/renderers/ClassBreaksRenderer", "esri/tasks/GenerateRendererParameters", "esri/tasks/GenerateRendererTask",
            "esri/tasks/ClassBreaksDefinition",
            "esri/tasks/AlgorithmicColorRamp",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/Color",
            "esri/geometry/webMercatorUtils",
            "esri/map", "esri/layers/LayerDrawingOptions",
            "dojo/dom-construct",
            "dojo/dom",
            "dojo/parser",
            "dojo/on",
            "dojo/_base/lang",
            "dijit/registry",
            "esri/tasks/query",
            "esri/domUtils",
            "dijit/form/Button",
            "dijit/layout/ContentPane",
            "dijit/layout/BorderContainer",
            "dijit/form/TextBox",
            "dojo/domReady!"
        ], function(Extent, ArcGISDynamicMapServiceLayer, ImageParameters,
            FeatureLayer, FeatureTable, SimpleRenderer, ClassBreaksRenderer, GenerateRendererParameters, GenerateRendererTask, ClassBreaksDefinition, AlgorithmicColorRamp, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color,
            webMercatorUtils, Map, LayerDrawingOptions,
            domConstruct, dom, parser, on, lang,
            registry, Query, domUtils, Button, ContentPane, BorderContainer, TextBox
        ) {
            parser.parse();

            var initialExtent = new Extent({
                "xmin": -14901092.916080378,
                "ymin": 2570827.677759068,
                "xmax": -7382135.317726159,
                "ymax": 7046980.0541378,
                "spatialReference": {
                    "wkid": 102100
                }
            });

            var map, citypointFT, citypolyFT, tractpolyFT, citypointlayer, citypolygonlayer, tractpolygonlayer, fl_url;
            var fieldsoutputted, fieldsarray, renderedField = "col1",
                MoreDetails = "col2";

            var myFeatureLayer, renderer, DynamicMapServiceURL = "xxx";

            // define the dynamic map service layer

            var imageParameters = new ImageParameters();
            imageParameters.format = "png";

            var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(DynamicMapServiceURL, {
                "opacity": 1.0,
                "imageParameters": imageParameters
            });

            map = new Map("map", {
                basemap: "gray",
                extent: initialExtent
            });

            var pointSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setSize(8).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153,
                153
            ]));

            var polygonSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));

            // load the feature table and its accompanying data on map load
            map.on("load", loadTable);

            // the function below displays an error message and hides the div in which the map is drawn
            function showErr(err) {
                'use strict;'
                console.log("Error Details: " + err);
            }

            function AddGrid(lyrid, gridloc) {
                var existingGrid = dijit.byId(gridloc);

                if (existingGrid) {
                    existingGrid.destroyRecursive(true);
                }

                if (lyrid === 4) {
                    tractpolyFT = new FeatureTable({
                        "featureLayer": tractpolygonlayer,
                        "map": map,
                        "showStatistics": false,
                        "zoomToSelection": false,
                        "syncSelection": true,
                        "outFields": ["PlaceName", "StateAbbr", "plc_tract2010", renderedField, MoreDetails, "PlcTrPop2010"],
                        "fieldInfos": [{
                                name: 'PlaceName',
                                alias: 'City',
                            }, {
                                name: 'StateAbbr',
                                alias: 'State',
                            }, {
                                name: 'plc_tract2010',
                                alias: 'Census Tract ID',
                            }, {
                                name: renderedField,
                                alias: 'Column 1',
                            }, {
                                name: MoreDetails,
                                alias: 'More Details',
                            }, {
                                name: 'PlcTrPop2010',
                                alias: '2010 Census Population'
                            }]
                            //,
                            //"gridOptions": [{
                            //     noDataMessage: "No Data",
                            //     allowSelectAll: false,
                            //     columnHider: false,
                            //     sort: {
                            //          field: "PlaceName", ascending: true,
                            //          field: "StateAbbr", ascending: true,
                            //          field: "plc_tract2010", ascending: true
                            //     }
                            //}]
                    }, gridloc);

                    tractpolyFT.startup();

                } else {
                    if (lyrid === 0) {
                        citypointFT = new FeatureTable({
                            "featureLayer": citypointlayer,
                            "map": map,
                            "showStatistics": false,
                            "zoomToSelection": false,
                            "syncSelection": true,
                            "outFields": ["NAME", "ST", renderedField, MoreDetails, MoreDetails2, MoreDetails3],
                            "fieldInfos": [{
                                        name: 'NAME',
                                        alias: 'City',
                                    }, {
                                        name: 'ST',
                                        alias: 'State',
                                    }, {
                                        name: renderedField,
                                        alias: 'Column 1',
                                    }, {
                                        name: MoreDetails,
                                        alias: 'More Details'
                                    }, {
                                        name: MoreDetails2,
                                        alias: 'More Details 2',
                                    }, {
                                        name: MoreDetails3,
                                        alias: 'More Details 3'
                                    }
                                    //, {
                                    //     name: 'POP2010',
                                    //     alias: '2010 Census Population'
                                    //}
                                ]
                                //,
                                //"gridOptions": [{
                                //     noDataMessage: "No Data",
                                //     allowSelectAll: false,
                                //     columnHider: false,
                                //     sort: {
                                //          field: "NAME", ascending: true,
                                //          field: "ST", ascending: true,
                                //     }
                                //}]
                        }, gridloc);

                        citypointFT.startup();
                    } else {
                        citypolyFT = new FeatureTable({
                            "featureLayer": citypolygonlayer,
                            "map": map,
                            "showStatistics": false,
                            "zoomToSelection": false,
                            "syncSelection": true,
                            "outFields": ["NAME", "ST", renderedField, MoreDetails, MoreDetails2, MoreDetails3, "POP2010"],
                            "fieldInfos": [{
                                    name: 'NAME',
                                    alias: 'City',
                                }, {
                                    name: 'ST',
                                    alias: 'State',
                                }, {
                                    name: renderedField,
                                    alias: 'Column 1',
                                }, {
                                    name: MoreDetails,
                                    alias: 'More Details'
                                }, {
                                    name: MoreDetails2,
                                    alias: 'More Details 2',
                                }, {
                                    name: MoreDetails3,
                                    alias: 'More Details 3'
                                }, {
                                    name: 'POP2010',
                                    alias: '2010 Census Population'
                                }]
                                //,
                                //"gridOptions": [{
                                //     noDataMessage: "No Data",
                                //     allowSelectAll: false,
                                //     columnHider: false,
                                //     sort: {
                                //          field: "NAME", ascending: true,
                                //          field: "ST", ascending: true,
                                //     }
                                //}]
                        }, gridloc);

                        citypolyFT.startup();
                    }
                }
            }

            function showHideGridAndLegend() {
                console.log(map.getScale());
                switch (true) {
                    case (map.getScale() >= 36978595.474472):
                        domUtils.show(dom.byId('citypointgrid'));
                        domUtils.hide(dom.byId('citypolygongrid'));
                        break;
                    case (map.getScale() < 36978595.474472 && map.getScale() >= 6000000):
                        domUtils.hide(dom.byId('citypointgrid'));
                        domUtils.show(dom.byId('citypolygongrid'));
                        break;
                    case (map.getScale() < 6000000 && map.getScale() > 2311162.217155):
                        domUtils.hide(dom.byId('citypointgrid'));
                        domUtils.show(dom.byId('citypolygongrid'));
                        break;
                    case (map.getScale() <= 2311162.217155):
                        domUtils.hide(dom.byId('citypointgrid'));
                        domUtils.hide(dom.byId('citypolygongrid'));
                        break;
                    default:
                        domUtils.hide(dom.byId('citypointgrid'));
                        domUtils.hide(dom.byId('citypolygongrid'));
                        break;
                }
            }

            // the functions below dynamically render the data
            // the function below applies the renderer generated by the createRenderer function above to the featureLayer and adds labels.
            function applyCPRenderer(citypointrenderer) {
                'use strict;'
                citypointrenderer.defaultLabel = "Data unavailable";

                citypointrenderer.defaultSymbol = pointSymbol;

                citypointlayer.setRenderer(citypointrenderer);

                citypointlayer.renderer.setOpacityInfo(0.7);

                map.addLayer(citypointlayer);
            }

            function applyRenderer(renderer) {
                'use strict;'
                renderer.defaultLabel = "Data unavailable";

                renderer.defaultSymbol = polygonSymbol;

                citypolygonlayer.setRenderer(renderer);

                citypolygonlayer.renderer.setOpacityInfo(0.7);

                map.addLayer(citypolygonlayer);
            }

            function createRenderer(lyr, field) {
                'use strict;'
                var classDef = new ClassBreaksDefinition();
                classDef.classificationField = field;
                classDef.classificationMethod = "natural-breaks";
                classDef.breakCount = 7;

                classDef.baseSymbol = lyr === 0 ? pointSymbol : polygonSymbol;

                var colorRamp = new AlgorithmicColorRamp();
                colorRamp.fromColor = new Color.fromHex("#F0F9E8");
                colorRamp.toColor = new Color.fromHex("#2b8cbe");
                colorRamp.algorithm = "hsv";

                classDef.colorRamp = colorRamp;

                var params = new GenerateRendererParameters();
                params.classificationDefinition = classDef;

                var generateRenderer = new GenerateRendererTask(DynamicMapServiceURL + "/" + lyr);

                if (lyr === 0) {
                    generateRenderer.execute(params, applyCPRenderer, showErr);
                } else {
                    generateRenderer.execute(params, applyRenderer, showErr);
                }
            }

            function loadTable() {

                fieldsoutputted = 'NAME,ST,' + renderedField + ',' + CI + ',' + renderedField.replace('CrudePrev', 'AdjPrev') + ',' + CI.replace('Crude95CI', 'Adj95CI') + ',POP2010';
                fieldsarray = fieldsoutputted.split(",");

                fl_url = DynamicMapServiceURL + "/0";

                citypointlayer = new FeatureLayer(fl_url, {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: fieldsarray,
                    //infoTemplate: infotemp,
                    id: "citypointlayer",
                    orderByFields: ["NAME"]
                });

                createRenderer(0, renderedField);

                AddGrid(0, "citypointgrid");

                fl_url = DynamicMapServiceURL + "/3";

                citypolygonlayer = new FeatureLayer(fl_url, {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: fieldsarray,
                    //infoTemplate: infotemp,
                    id: "citypolygonlayer",
                    orderByFields: ["ST"]
                });

                createRenderer(3, renderedField);

                AddGrid(3, "citypolygongrid");

                // show/hide table, based on scale
                map.on("extent-change", showHideGridAndLegend);

                showHideGridAndLegend();
            }
        });
    </script>
</head>

<body class="claro esri">
    <div id="map"></div>
    <div id="divGrid">
        <!--<div id="citypt">-->
        <!--<h3>City Point Grid</h3>-->
        <div id="citypointgrid"></div>
        <!--</div>
          <div id="citypoly">-->
        <!--<h3>City Poly Grid</h3>-->
        <div id="citypolygongrid"></div>
        <!--</div>-->
    </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ChristopherJohnson1 · ‎11-06-2016

Robert, as always, thanks for the response. Unfortunately, I am still seeing the same behavior. The column headers on citypolyFT do not appear when the table appears.

Thanks...Chris

RobertScheitlin__GISP · ‎11-07-2016

Chris,

Strange. I would have to do some work changing your field names and url to be able to test your exact code. Have you tried to use citypolyFT.refresh()?

ChristopherJohnson1 · ‎11-07-2016

Hi, Robert. Yes, I have tried that.

Thanks...Chris