InfoWindow TabContainer & ContentPane Issue

Question

I am trying to programatically create a TabContainer in an InfoWindow and populate it with ContentPane's based on an identify task. The first issue I am having is the TabContainer is not embedding the slider and Menu correctly- they span the enitre top portion of the TabContainer. The second issue is the first contentPane is not showing its content, only the tab. If i click on another contentpane the content is displayed. Do i need to resize the tabcontainer? the portion of my code: function addToMap(idResults, event) { if (idResults < 1) { map.infoWindow.setContent("No Visible Layer Found - Turn on a Layer and click it to Identify"); } else { tc = new TabContainer({ style: "height: 100%; width: 100%;", useMenu: false, useSlider: true }, domConstruct.create("div")); for (var i = 0, il = idResults.length; i < il; i++) { var idResult = idResults[i]; var featureAttributes = idResults[i].feature.attributes; var contentAttributes = []; for (var attr in featureAttributes) { contentAttributes.push("" + attr + " " + featureAttributes[attr] + "
"); } cp = new ContentPane({ title: idResults[i].layerName, content: contentAttributes.join("") }); tc.addChild(cp); } console.log(cp); map.infoWindow.setContent(tc.domNode); tc.startup(); } }

kenbuja · Accepted Answer

When I create ContentPanes in TabContainers, I use the startup method on the ContentPane and at the end, resize the TabContainer. This code adds a dGrid to a ContentPane for each set of results and is used on this page: NCCOS Data Viewer function populateTC(results, evt) { try { if (dijit.byId('tabs').hasChildren) { dijit.byId('tabs').destroyDescendants(); } if (results.length === 0) { console.log('Nothing found.'); return; } var combineResults = {}; for (var i = 0, len = results.length; i < len; i++) { var result = results; var lyrName = result.layerName.replace(' ', ''); if (combineResults.hasOwnProperty(lyrName)) { combineResults[lyrName].push(result); } else { combineResults[lyrName] = [result]; } } for (result in combineResults) { if (combineResults.hasOwnProperty(result)) { var columns = buildColumns(combineResults[result][0].feature); var features = []; for (i = 0, len = combineResults[result].length; i < len; i++) { features.push(combineResults[result].feature); } 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 dijit.layout.ContentPane({ id: result, //content: "" + combineResults[result][0].layerName + " (" + combineResults[result].length + " feature" + plural + ")", content: combineResults[result].length + " feature" + plural, //content: dataGrid, title: combineResults[result][0].layerName, style: "overflow: auto" }).placeAt(dijit.byId('tabs')); cp.addChild(dataGrid); cp.startup(); dataGrid.renderArray(data); } } tc.startup(); tc.resize(); map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); } catch (e) { console.log(e.message); } }