Tabs in a Popup

AndrewPratt

I am trying to get tabs working inside a Popup but it doesn't seem to be working. I can see that the tabs are being built using Firebug but they aren't visible. This is a test site I put up that you can view my code. Just click a polygon to see the popup. Eventually I'd like to have three tabs, two for field attributes and one for the attachments (if there are any).

Project Map Viewer

kenbuja

This is how I'm adding a TabContainer to an infoWindow. First, I initialize the container

        tc = new TabContainer({
            id: 'tabs',
            doLayout: false,
            style: { 'width': '95%', 'height': '100%' }
        }, domConstruct.create('div'));

        map.infoWindow.resize(500, 300);
        map.infoWindow.setContent(tc.domNode);
        map.infoWindow.setTitle("Results");

In the map click event, I have this code

        if (formatResults.length > 0) {
            if (buildTabContainer(formatResults)) {
                map.infoWindow.show(idPoint);
            }
        }

and this is how I build the TabContainer, putting the dGrid containing the attributes of the features found into a separate ContentPane

    function buildTabContainer(results) {
        try {
            if (tc.hasChildren()) {
                tc.destroyDescendants();
            }
            var combineResults = {};
            for (var i = 0, len = results.length; i < len; i++) {
                var result = results;
                var feature = result;
                //var lyrName = result.layerName.replace(' ', '');
                if (combineResults.hasOwnProperty(result.layerName)) {
                    combineResults[result.layerName].push(result);
                }
                else {
                    combineResults[result.layerName] = [result];
                }
                switch (feature.geometry.type) {
                    case "point": case "multipoint":
                        layerResultsGraphic.add(new Graphic(feature.geometry, symbolResultPoint, feature.attributes));
                        break;
                    case "polyline":
                        layerResultsGraphic.add(new Graphic(feature.geometry, symbolResultPolyline, feature.attributes));
                        break;
                    case "polygon": case "extent":
                        layerResultsGraphic.add(new Graphic(feature.geometry, symbolResultPolygon, feature.attributes));
                        break;
                }
            }

            for (var result in combineResults) {
                if (combineResults.hasOwnProperty(result)) {

                    var columns = buildColumns(combineResults[result][0]);
                    var features = [];

                    for (i = 0, len = combineResults[result].length; i < len; i++) {
                        features.push(combineResults[result]);
                    }

                    var data = array.map(features, function (feature) {
                        return lang.clone(feature.attributes);
                    });

                    var dataGrid = new (declare([Grid, Selection, DijitRegistry, ColumnHider]))({
                        //id: "dgrid_" + combineResults[result][0].layerId,
                        bufferRows: Infinity,
                        columns: columns,
                        selectionMode: "single",
                        "class": "resultsGrid"
                    });

                    var gridWidth = "width: " + String(columns.length * 100) + "px";
                    dataGrid.addCssRule("#" + dataGrid.id, gridWidth);

                    dataGrid.on(".dgrid-row:click", gridSelect);
                    dataGrid.on("show", function () {
                        dataGrid.resize();
                    });
                    dataGrid.on(mouseUtil.enterRow, gridEnter);
                    dataGrid.on(mouseUtil.leaveRow, function () {
                        map.graphics.clear();
                    });
                    var plural = "";
                    if (combineResults[result].length !== 1) { plural = "s"; }
                    var cp = new ContentPane({
                        id: result,
                        //content: "<strong>" + combineResults[result][0].layerName + "</strong> (" + combineResults[result].length + " feature" + plural + ")",
                        content: combineResults[result].length + " feature" + plural,
                        //content: dataGrid,
                        title: combineResults[result][0].layerName,
                        style: "overflow: auto"
                    }).placeAt(registry.byId('tabs'));

                    cp.addChild(dataGrid);
                    cp.startup();
                    //console.table(data);
                    dataGrid.renderArray(data);
                }
            }
            tc.startup();
            tc.resize();
            return true;
        }
        catch (e) { console.log(e.message); }
    }

An older version of this can be seen here