JavaScript application Table of contents and legend with group layers

[MichaelHeirendt]

I am trying to include group layers in the table of contents as a collapsible group layer. The way the application is set up now, the legend is only symbolizing feature layers that use a simple renderer for the symbology. The other layers are symbolized based off an attribute and use a unique-value renderer, therefore show up in the application, but do not show up in the table of contents. I would like all of the group layers to show up in the table of contents as well as the varying symbology per feature within each layer, and to have them all be collapsible.

Here is the code:

From the config.js file:

    Layers: [{
        Key: "WaterLayersARRAY",
        Title: "Water Layers",
        ServiceURL: "http://CONNECTION TO GIS SERVER/arcgis/rest/services/Water/MapServer/",
        isVisible: true,
        isDynamicMapService: true,
    }, {
        Key: "keymap",
        Title: "Base Layers",
        ServiceURL: "http://CONNECTION TO GIS SERVER/arcgis/rest/services/BaseLayers/MapServer/",
        isVisible: true,
        isDynamicMapService: true,
    }],

These layers are then brought into the application in a separate .js file.  Here is the function to call the layers.

//Function to create graphics and layers
function MapInitFunction() {
    var mapInitFunctionCompleted = new dojo.Deferred();
    window.onresize = function () {
        if (!isMobileDevice) {
            resizeHandler();
        }
        else {
            OrientationChanged();
        }
    }


    var mapSlider = dojo.query(".esriSimpleSlider", this.domNode);
    if (mapSlider.length > 0) {
        dojo.addClass(mapSlider[0], "roundedCorner");
    }


    var webmapDetails = GetWebMapInfo("neighborhoodKey", webMapId);
    webmapDetails.addCallback(function (webmapInfo) {
        neighbourHoodLayerInfo = webmapInfo.layerInfo;
        for (var i in webmapInfo.layerInfo) {
            if (webmapInfo.layerInfo.hasOwnProperty(i)) {
                var neighbourHoodLayer = new esri.layers.FeatureLayer(webmapInfo.url + "/" + webmapInfo.layerInfo.id, {
                    mode: esri.layers.FeatureLayer.MODE_SELECTION,
                    outFields: ["*"],
                    id: webmapInfo.layerInfo.id
                });
                map.addLayer(neighbourHoodLayer);
            }
        }
        setTimeout(function () {
            var parcelId = GetQuerystring('parcelId');
            if (parcelId != "") {
                LocateParcelonMap(unescape(parcelId));
                return;
            }
        }, 500);
    });
    HideProgressIndicator();


    var gLayer = new esri.layers.GraphicsLayer();   //Add temporary graphics layer for pushpin
    gLayer.id = tempLayerId;
    map.addLayer(gLayer);


    var tempParcelLayer = new esri.layers.GraphicsLayer();   //Add temporary graphics layer for parcel
    tempParcelLayer.id = tempParcelLayerId;
    map.addLayer(tempParcelLayer);


    var fbLayer = new esri.layers.FeatureLayer(feedbackLayer.ServiceUrl, {
        mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"],
        id: feedbackLayer.Key,
        displayOnPan: false
    });
    fbLayer.setDefinitionExpression("1=2");
    map.addLayer(fbLayer);


    var handle = dojo.connect(fbLayer, "onUpdateEnd", function (features) {
        for (var key in feedbackAttributes) {
            if (feedbackAttributes.hasOwnProperty(key)) {
                if (feedbackAttributes[key].DomainNames) {
                    for (var index in fbLayer.fields) {
                        if (fbLayer.fields[index].name == key) {
                            PopulateFeedbackTypes(fbLayer.fields[index].domain.codedValues, feedbackAttributes[key].ControlId);
                        }
                    }
                }
            }
        }
        dojo.disconnect(handle);
    });


    for (var i = 0; i < layers.length; i++) {
        if (layers.isDynamicMapService) {
            var lastindex = layers.ServiceURL.lastIndexOf('/');
            map.addLayer(CreateDynamicServiceLayer(layers.ServiceURL, layers.ServiceURL.substr(lastindex + 1), layers.Key, layers.isVisible, layers.Title));
        }
        else {
            // A MODE_SELECTION FeatureLayer gets stuck in suspended mode at 3.1 if it is created invisible,
            // so we'll create it visible and then correct the visibility right after we fetch its features
            var featureLayer = new esri.layers.FeatureLayer(layers.ServiceURL, {
                mode: esri.layers.FeatureLayer.MODE_SELECTION,
                outFields: ["*"],
                id: layers.Key,
                displayOnPan: false,
                visible: true  // the default, but we'll repeat it here for emphasis that we're ignoring the config
            });


            if (layers.UseColor) {
                var customLFillSymbol = new esri.symbol.SimpleFillSymbol();
                var customFillColor = new dojo.Color(layers.Color);
                customFillColor.a = Number(layers.Alpha);
                customLFillSymbol.setColor(customFillColor);
                var customRenderer = new esri.renderer.SimpleRenderer(customLFillSymbol);
                featureLayer.setRenderer(customRenderer);
                FixTabWidth();
            }
            map.addLayer(featureLayer);
        }
    }

Here is the coding to display the legend.

        // display legend symbol
        if (graphicsLayer.renderer.symbol && graphicsLayer.renderer.symbol.url) {
            var img = document.createElement("img");
            img.src = graphicsLayer.renderer.getSymbol().url;
            setLegendSize(td, img);
            tr.appendChild(td);
        } else if (graphicsLayer.renderer.symbol && graphicsLayer.renderer.symbol.color && graphicsLayer.renderer.symbol.color.toHex()) {
            var div = document.createElement("div");
            div.style.backgroundColor = graphicsLayer.renderer.getSymbol().color.toHex();
            setLegendSize(td, div);
            tr.appendChild(td);
        } else {
            var div = document.createElement("div");
            setLegendSize(td, div);
            tr.appendChild(td);
        }

any advice on how to modify this coding?

Thank you!