topic Programmatically adding legnedDijit to the contentPane in ArcGIS JavaScript Maps SDK Questions

Programmatically adding legnedDijit to the contentPane

GaneshSolai_Sambandam — Thu, 23 Jan 2014 09:05:43 GMT

HI Guys
I have programmatically created a function to add Accordion Container with few child contentpane. When I try to add legendsDijit to the first contentPane, I get an error from the application saying legendDijit is null or not an object.

can anyone look into this. please.

//Add the legend to the application - the legend will be 
//added to the left panel of the application. 


function addLegend(layerInfo) {

    var legendTb = new dijit.form.ToggleButton({
        showLabel: true,
        label: i18n.tools.legend.label,
        title: i18n.tools.legend.title,
        checked: true,
        iconClass: 'esriLegendIcon',
        id: 'legendButton'
    }, dojo.create('div'));

    dojo.byId('webmap-toolbar-left').appendChild(legendTb.domNode);

    dojo.connect(legendTb, 'onClick', function () {
        navigateStack('legendPanel');
    });
    
   // var aContainer = new dijit.layout.AccordionContainer({style:"height: 300px"}, "legendPanel");
       var aContainer = new dijit.layout.AccordionContainer({id: "legendPanel1", style: "height:100%; width:100%"}, dojo.create('div'));
       
          var legendDijit = new esri.dijit.Legend({
        map: map,
        layerInfos: layerInfo
    }, dojo.create('div'));

    
   //legendDijit.startup();
  /* var layers = new dijit.layout.ContentPane({title:"Layers"});
   
   layers.set('content', legendDijit.domNode);
  legendDijit.startup();
   aContainer.domNode.appendChild(layers);*/
       
       
      aContainer.addChild(new dijit.layout.ContentPane({
            title: "Layers",
            region: 'center',
            selected: true,
           content: "hi",
            id:'aLayers'
        }));
        
         
        aContainer.addChild(new dijit.layout.ContentPane({
            title:"BaseMapGallery",
            content:"Hi how are you?"
        }));
        aContainer.addChild(new dijit.layout.ContentPane({
            title:"Print",
            content:"Hello im fine.. thnx"
        }));
        
        
        //dojo.byId('aLayers').appendChild(legendDijit.domNode);
        aContainer.startup();
        
          
        /*  var legendDijit = new esri.dijit.Legend({
        map: map,
        layerInfos: layerInfo
    }, dojo.create('div'));

    dojo.byId('aLayers').appendChild(legendDijit.domNode)
   // dijit.byId('aLayers').appendChild(legendDijit.domNode)
   // legendDijit.startup();
      */
  

    var legendCp = new dijit.layout.ContentPane({
        title: i18n.tools.legend.title,
        selected: true,
        region: 'center',
        id: "legendPanel"
    });
         //dojo.byId('legendPanel').appendChild(aContainer.domNode);
         
    dijit.byId('stackContainer').addChild(legendCp);
   dojo.addClass(dojo.byId('legendPanel'), 'panel_content');

    /*var legendDijit = new esri.dijit.Legend({
        map: map,
        layerInfos: layerInfo
    }, dojo.create('div'));

    dojo.byId('legendPanel').appendChild(legendDijit.domNode);*/
  
    
    dojo.byId('legendPanel').appendChild(aContainer.domNode);

    navigateStack('legendPanel');
    if (dojo.isIE === 8) {
        setTimeout(function () {
           // legendDijit.startup();
         //  aContainer.startup();
           
        }, 100);
    } else {
  // legendDijit.startup();
     // aContainer.startup();
      
    }

}

Re: Programmatically adding legnedDijit to the contentPane

RobertoPepato — Sat, 11 Dec 2021 23:04:14 GMT

//Add the legend to the application - the legend will be 
//added to the left panel of the application. 


function addLegend(layerInfo) {

    var legendTb = new dijit.form.ToggleButton({
        showLabel: true,
        label: i18n.tools.legend.label,
        title: i18n.tools.legend.title,
        checked: true,
        iconClass: 'esriLegendIcon',
        id: 'legendButton'
    }, dojo.create('div'));

    dojo.byId('webmap-toolbar-left').appendChild(legendTb.domNode);

    dojo.connect(legendTb, 'onClick', function () {
        navigateStack('legendPanel');
    });
    
   // var aContainer = new dijit.layout.AccordionContainer({style:"height: 300px"}, "legendPanel");
       var aContainer = new dijit.layout.AccordionContainer({id: "legendPanel1", style: "height:100%; width:100%"}, dojo.create('div'));
       
          var legendDijit = new esri.dijit.Legend({
        map: map,
        layerInfos: layerInfo
    }, dojo.create('div'));

    
   //legendDijit.startup();
  /* var layers = new dijit.layout.ContentPane({title:"Layers"});
   
   layers.set('content', legendDijit.domNode);
  legendDijit.startup();
   aContainer.domNode.appendChild(layers);*/
       
       
      aContainer.addChild(new dijit.layout.ContentPane({
            title: "Layers",
            region: 'center',
            selected: true,
           content: "hi",
            id:'aLayers'
        }));
        
         
        aContainer.addChild(new dijit.layout.ContentPane({
            title:"BaseMapGallery",
            content:"Hi how are you?"
        }));
        aContainer.addChild(new dijit.layout.ContentPane({
            title:"Print",
            content:"Hello im fine.. thnx"
        }));
        
        
        //dojo.byId('aLayers').appendChild(legendDijit.domNode);
        aContainer.startup();
        
          
        /*  var legendDijit = new esri.dijit.Legend({
        map: map,
        layerInfos: layerInfo
    }, dojo.create('div'));

    dojo.byId('aLayers').appendChild(legendDijit.domNode)
   // dijit.byId('aLayers').appendChild(legendDijit.domNode)
   // legendDijit.startup();
      */
  

    var legendCp = new dijit.layout.ContentPane({
        title: i18n.tools.legend.title,
        selected: true,
        region: 'center',
        id: "legendPanel"
    });
         //dojo.byId('legendPanel').appendChild(aContainer.domNode);
         
    dijit.byId('stackContainer').addChild(legendCp);
   dojo.addClass(dojo.byId('legendPanel'), 'panel_content');

    /*var legendDijit = new esri.dijit.Legend({
        map: map,
        layerInfos: layerInfo
    }, dojo.create('div'));

    dojo.byId('legendPanel').appendChild(legendDijit.domNode);*/
  
    
    dojo.byId('legendPanel').appendChild(aContainer.domNode);

    navigateStack('legendPanel');
    if (dojo.isIE === 8) {
        setTimeout(function () {
           // legendDijit.startup();
         //  aContainer.startup();
           
        }, 100);
    } else {
  // legendDijit.startup();
     // aContainer.startup();
      
    }

}

Are you requiring the desired dijit on your code?

dojo.require("esri.dijit.Legend");

Re: Programmatically adding legnedDijit to the contentPane

GaneshSolai_Sambandam — Fri, 24 Jan 2014 13:56:03 GMT

Are you requiring the desired dijit on your code?
dojo.require("esri.dijit.Legend");

HI Pepa
I already included the necessary required resources dojo.require("esri.dijit.Legend");
If I comment out my accordionpane variable in the code, my legend dijit works. I wanted to add the legend inside the first child of the accordionpane and the problem persist here.

regards
Ganesh

Re: Programmatically adding legnedDijit to the contentPane

RobertoPepato — Fri, 24 Jan 2014 22:20:48 GMT

HI Pepa
I already included the necessary required resources dojo.require("esri.dijit.Legend");
If I comment out my accordionpane variable in the code, my legend dijit works. I wanted to add the legend inside the first child of the accordionpane and the problem persist here.

regards
Ganesh

Could your please post your full page code so I can try to figure out what's happening?