Dojo Accordian Editing Template Picker Display issues

RobDunfey

Hello Everyone,

I'm trying to configure one of the editing samples with the Dojo Accordian panes:

I've taken this simple editor sample:

http://resources.esri.com/help/webapi/javascript/arcgis/help/jssamples_start.htm

...and I am trying to wire it up with the Accordian panel as illustrated in the San Diego Neighborhood example from the 2009 UC:

http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=codeGalleryDetails&scriptID=16445

The problem is I'm just getting the blue outline for the template picker and no options to pick from.  The template picker works prior to adding it to the accordian. 

The contents of my JavaScript File is below, but am I missing something obvious, should it be possible to place a template picker inside an accordian pane or not?

Any thoughts appreciated,

Rob

/*
* Copyright 2009 ESRI
*
* All rights reserved under the copyright laws of the United States
* and applicable international laws, treaties, and conventions.
*
* You may freely redistribute and use this sample code, with or
* without modification, provided you include the original copyright
* notice and use restrictions.
*
*See use restrictions at http://resources.esri.com/help/9.3/usagerestrictions.htm.
*/

//This application was developed by Sterling Quinn and Praveen Ponnusamy
// for a demo theater presentation at the 2009 ESRI International User
// Conference: "Enhancing ArcGIS JavaScript Applications Using Dojo Dijits"

//Modified by Robert Dunfey 2010 - attempting to wire up accordian editor to editor template picker

dojo.require("esri.map");
dojo.require("esri.tasks.query");
dojo.require("esri.dijit.editing.Editor");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.tasks.geometry"); 
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.Tooltip");

//Global variables
var resizeTimer;
var map, navToolbar;
var selectedNeighborhood;
var showingAllNeighborhoods = false;
//var layers = [];
var layers1, layers2;

//Initial extent copied from neighborhood service extent in Services Directory
var initialExtent = new esri.geometry.Extent(-117.28, 32.65, -116.99, 32.86, new esri.SpatialReference({
        wkid: 4326
    }));
   
//Show map on page load
dojo.addOnLoad(init);

//Runs when the page loads
function init() {

//Set up proxy for editing
esri.config.defaults.io.proxyUrl = "../proxy.ashx";

    map = new esri.Map("mapDiv", { extent: initialExtent });
    
//Add the navigation toolbar
    navToolbar = new esri.toolbars.Navigation(map);



//Do all of the following once the map has loaded
    dojo.connect(map, 'onLoad', function(theMap) {


  dojo.connect(map, "onLayersAddResult", extractResults);


        //Listen for resize of map div
        dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
            resizeMap();
        });
       

        zoomToInitialExtent();
 

    });




    //Add the base map from ArcGIS Online. Adding this first layer loads
    // the map.
    var tiledUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
    var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(tiledUrl);
    map.addLayer(tiledLayer);

var editFieldsLayer = new esri.layers.FeatureLayer("http://myserver.com/ArcGIS/rest/services/Folder/go/FeatureServer/3",{
      mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
      outFields: ['*']
    });
         
  
    //layers.push(editFieldsLayer);

map.addLayers([editFieldsLayer]);


//Register event listener for accordion container
    //Switch statement determines which pane the user selected
    var accordion = dijit.byId("myAccordionContainer");
    dojo.connect(accordion, "selectChild", function(childPane) {
        switch (childPane.id) {
            case "paneWelcome":
                displayWelcome();
                break;
            case "paneEdit":
                displayEdit();
                break;
            case "paneIHS":
                displayIHS();
                break;
        }
 
    });

}

  function extractResults(results) {
  //alert('test');
        var layers = dojo.map(results, function(result) {
          return {featureLayer:result.layer, htmlFields:["description"]};
        });
 
        var templateLayers = dojo.map(results,function(result){
          return result.layer;
        });
 
  layers1 = layers;
  layers2 = templateLayers;
  initEditor();
}


  function initEditor() {

        
        var templatePicker = new esri.dijit.editing.TemplatePicker({
          featureLayers: layers2,//templateLayers
          grouping: true,
          rows: 'auto',
          columns: 4,
          style: "height: 100px;"
        },'divFeatureServiceDijit');//

        templatePicker.startup();

        var settings = {
          templatePicker: templatePicker,
          map: map,
          geometryService: new esri.tasks.GeometryService("http://myserver.com/ArcGIS/rest/services/Geometry/GeometryServer/"),
          layerInfos:layers1,
          toolbarVisible: false,
          createOptions: { polygonDrawTools:[esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON] }
        }

        var params = {settings: settings};

        var myEditor = new esri.dijit.editing.Editor(params);

        myEditor.startup();


  //dijit.byId("paneEdit").setContent(div);
 
//Tried update but no difference
  //updateAccordionPanes();
      }

//"Starts over" by deselecting curren neighborhood and returning
// to the initial extent
function zoomToInitialExtent() {

    selectedNeighborhood = null;
    updateAccordionPanes();
    map.setExtent(initialExtent, true);

}



//Creates welcome div content
function displayWelcome() {
    var div = document.createElement("div");
    div.style.width = "300px";
    div.style.height = "200px";
    dijit.byId("paneWelcome").setContent(div);
   

}


//Creates div for editor
function displayEdit() {
    var div = document.createElement("div");
    div.style.width = "350px";
    div.style.height = "200px";
    //dijit.byId("paneEdit").setContent(div);

         //initEditor();
   
}


//Creates div for IHS
function displayIHS() {
    var div = document.createElement("div");
    div.style.width = "300px";
    div.style.height = "225px";
    dijit.byId("paneIHS").setContent(div);

}


//Re-selects the selected accordion pane to force an update
function updateAccordionPanes() {
    var accordion = dijit.byId("myAccordionContainer");
    accordion.selectChild(accordion.selectedChildWidget);
}


//Handles resize of browser
function resizeMap() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        map.resize();
        map.reposition();
    }, 800);
}



And my accordian pane HTML snippet:

      <div dojotype="dijit.layout.ContentPane" region="center">
      
        <!--Neighborhood statistics accordion container-->
        <div id="myAccordionContainer" dojoType="dijit.layout.AccordionContainer" style="height:400px">
      <div dojoType="dijit.layout.ContentPane" id="paneWelcome" title="Welcome" selected="true"></div>
      <div dojoType="dijit.layout.ContentPane" id="paneEdit" title="Add to Map"><div id="divFeatureServiceDijit"></div></div>
      <div dojoType="dijit.layout.ContentPane" id="paneIHS" title="IHS"></div>
     
        </div>

Accordian.JPG

EmmaErickson_0-1622002559899.png

khutchins

Rob,

It looks like the accordion pane you want to display the editor on is not visible when the application first loads. In cases like this you can create the editor widget the first time you show the editor panel, here's a snippet that shows this:

      var accordion = dijit.byId("myAccordionContainer"); 
      dojo.connect(accordion, "selectChild", function(childPane) {
        if(childPane.id === "paneEditor"){
          if(!editorWidget){
          var featureLayerInfos = dojo.map(results, function(result) {
            return {'featureLayer':result.layer};
          });

          var layers = dojo.map(results,function(result) {
            return result.layer;
          });

          var settings = {
            map: map,
            geometryService: new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer"),
            layerInfos:featureLayerInfos
          };

          var params = {settings: settings};
          editorWidget = new esri.dijit.editing.Editor(params,'editorDiv');
          editorWidget.startup();
          }
        }
      });