Tab Container & Flip Through Identified Results

[JohnWall]

I am attempting to create an infoWindow/pop-up which has two tabs within one container and allows a user to tab through multiple results at a given point. I have been able to successively code the tab container and identify separately, but am struggling to combine them. Here is my tab container code:

function getWindowContent(graphic) {
        //make a tab container 
        var tc = new dijit.layout.TabContainer({
          style: "width:100%;height:100%;"
        }, dojo.create("div"));

        //display attribute information1
        var cp1 = new dijit.layout.ContentPane({
          title: "Info (Deutsch)",
    content: "<b>Project Title:</b> " + graphic.attributes.Projekt + "<p><b>Laufzeit:</b> "+graphic.attributes.Laufzeit + "</p>" + "<p><b>Ansprechpartner:</b> " + graphic.attributes.Ansprechpa + "</p>" + "<a href="+graphic.attributes.Link__Deut+">Project Website</a>"
        });
  
        //display attribute information2
        var cp2 = new dijit.layout.ContentPane({
          title: "Info (English)",
    content: "<b>Project Title:</b> " + graphic.attributes.Project_Na + "<p><b>Years of Research:</b> "+graphic.attributes.Laufzeit + "</p>" + "<p><b>Contact Person:</b> " + graphic.attributes.Ansprechpa + "</p>" + "<a href="+graphic.attributes.Link__Deut+">Project Website</a>"
        });
  
        tc.addChild(cp1);
        tc.addChild(cp2);
  
  return tc.domNode;
      }

[JohnWall]

I've been able to edit the executeIdentifyTask to look like this:

function executeIdentifyTask(evt) {
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;
       
        var deferred = identifyTask.execute(identifyParams);

        deferred.addCallback(function(response) {     
          // response is an array of identify result objects    
          // Let's return an array of features.
          return dojo.map(response, function(result) {
            var feature = result.feature;
            feature.attributes.layerName = result.layerName;
            console.log(feature.attributes.OBJECTID);
            var template = new esri.InfoTemplate();
   template.setTitle("</b>Hello World</b>");
   template.setContent(getWindowContent);
   feature.setInfoTemplate(template);
            return feature;
          });
        });

      
        // InfoWindow expects an array of features from each deferred
        // object that you pass. If the response from the task execution 
        // above is not an array of features, then you need to add a callback
        // like the one above to post-process the response and return an
        // array of features.
        map.infoWindow.setFeatures([ deferred ]);
        map.infoWindow.show(evt.mapPoint);
      }

But now I get three pull down tabs and the tab container. Does anyone have any ideas?

[DavidAglietti]

Hello,
I am having the same problem.  I think they are the menu and slider features of the tab container.  There are properties to turn them off, but they are not working for me.

tc.useMenu=false;
tc.useSlider=false;

Anyone know how to make them go away?
[ATTACH=CONFIG]16402[/ATTACH]

[JohnWall]

Hello,
I am having the same problem.  I think they are the menu and slider features of the tab container.  There are properties to turn them off, but they are not working for me.

tc.useMenu=false;
tc.useSlider=false;

Anyone know how to make them go away?
[ATTACH=CONFIG]16402[/ATTACH]

Hi David,
Thanks for responding. I took a look at your attached image and it's the exact same problem I have been having. Have you been able to find any posts online regarding this issue? I've posted on several other forums, but have recieved little help.
-John

[JohnWall]

Hello,
I am having the same problem.  I think they are the menu and slider features of the tab container.  There are properties to turn them off, but they are not working for me.

tc.useMenu=false;
tc.useSlider=false;

Anyone know how to make them go away?
[ATTACH=CONFIG]16402[/ATTACH]

Hi David,
I posted on the Dojo forums and got the answer. You were really close with what you had. The code needs to look something like this:

var tc = new dijit.layout.TabContainer({
   style: "width:100%;height:100%;",
   useMenu: false,
   useSlider: false,
        });

That solves most of the issues. I'm still having issues with needing to click repeatedly on tabs to get them to display all of their contents and some of the graphics getting stuck on screen. Let me know if you're having the same issues or not. If I get a response on how to fix any of these other issues, would you like to know as well?

[DavidAglietti]

Sweet, thanks John!  That worked for me.  I am also having the problem where the tabs are collapsed.  I have to click on them to make them expand vertically and show their contents.  I'd appreciate it if you would let me know if you find a solution and I'll do the same.

Thanks again,
David

[DavidAglietti]

Hello,
You might try this to get solve the graphic problem:

dojo.connect(map.infoWindow, "onHide", function(){
        map.graphics.clear();
        });
David

[JohnWall]

Hello,
You might try this to get solve the graphic problem:

dojo.connect(map.infoWindow, "onHide", function(){
        map.graphics.clear();
        });
David

David,
Out of curiosity, are you basically trying to combine the Identify and Tab/Chart Samples?

Where are you placing that code snippet? I have attempted to get it to work in each of my functions, but it does not seem to clear the graphics.
-John

[DavidAglietti]

Hello,
I wasn't having the graphics problem, but if I were, I would try that code in the init function.  Also, I was able to get the tabcontainer to display itself the right way.  It turns out that I had to call the tabcontainer's resize method in the poup's onShow event.  I figured this using this example by Derek Swingley:  http://jsfiddle.net/wKue4/12/.  However, I am using point data and I almost always return more than one result feature.  So everything worked fine for the first record, but when I navigate using the left and right arrows in the popup the tabcontainer was collapsing again.  I couldn't just call resize again on the onSelectionChange event, because then the first record's tabcontainer collapsed again.  Good grief!  So I came up with this solution where I switch the selected child tab programatically and it started to work correclty.  Also note that I could not assign an ID to the tabcontainer as in Derek's example because you end up in a situation with multiple dijits with the same Id and the code errors (this only occurs if your identify returns multiple results).  So, instead I assigned a class to the tabcontainer so that I could get a reference to it.  There is probably a better way to do all this but I'm running out of time:(.   I'll post my code below....

David

[DavidAglietti]

Oops code is too big.  I have attached it to this message.

David