infoWindow custom html + tabs

LukePhilips — Tue, 11 Jun 2013 18:32:11 GMT

Hey,
Building off of the infoWindow with tabs example. Currently I am dynamically building some tabs, e.g.:

var tc = new dijit.layout.TabContainer({   style : "width:100%;height:250px;"   }, dojo.create('div'));  forEach(myData,function(data){  var cp1 = new dijit.layout.ContentPane({  title: "A title"});  cp1.setContent(layerTabContent(data)); // create an html table from data for tab content  tc.addChild(cp1);  });

The above works fine (though is really ugly, later I have to find the CSS that drives the tabs).
I can take an infoWindow template:

template.setContent(tc.domNode); graphic.setInfoTemplate(template);

and these generated tabs show in the infoWindow. Now above these tabs I want an header of information for that point, e.g. address info:

var html = '<div><table><tr><td><img src="icon.png"></td>'; html += '<td><span>' + feature.attributes["Address"] + '</span><br/>'; html += '</td></tr></table></div>';

if I were to setContent simply as this html that would work find, e.g.:

template.setContent(html); graphic.setInfoTemplate(template);

However, the issue is how to combine the tc.domNode with the html, since they are currently of different object types.

Thoughts?
Thanks!

Re: infoWindow custom html + tabs

VinayBansal — Wed, 12 Jun 2013 04:10:15 GMT

Use border container

var bc = new dijit.layout.BorderContainer({                     style: "height: 220px; width: 310px;overflow:hidden;"                 });  var cp1 = new dijit.layout.ContentPane({                         region: "top",                         content: <HTML_STRING>                     });  bc.addChild(cp1); //tc is your tab container  var cp2 = new dijit.layout.ContentPane({                         region: "center",                         content: tc.domNode                     });                     bc.addChild(cp2);   tc.startup();                     bc.startup(); this.map.infoWindow.setContent(bc.domNode);                     this.map.infoWindow.onShow = null;                     //var bc = this.resultBorderContainer;                     dojo.connect(this.map.infoWindow, "onShow", function () {                         if (tc != undefined && bc != null) {                             bc.resize();                             tc.resize();                         }                     });

topic Re: infoWindow custom html + tabs in ArcGIS JavaScript Maps SDK Questions

infoWindow custom html + tabs

Re: infoWindow custom html + tabs