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 · Accepted solution]

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

[AndrewPratt]

This was my solution....

app.map.infoWindow.on("selection-change", function(e) {

          if (e.target.features) {

            query(".dijitTabContainer", this.domNode).forEach(function(node) {

              var tc = registry.getEnclosingWidget(node);

              if (tc) {

                tc.selectChild(tc.getChildren()[0]);

                tc.resize();

              }

            });

          }

        });