Title Pane close on start

MathewSuran · ‎05-27-2014

This should be an easy question that I can not figure out. How do I set the title pane to default closed on startup? Right now the default is open(expanded) when it loads. This is different then .leftpanevisibility to hide the entire content pane. Thanks!

SteveCole · ‎05-27-2014

ok, gotcha. So you do have a bunch of code already but don't understand it all. I would search through your HTML code for the text "dijit.TitlePane". It's within THAT html code that you would add the data-dojo-props like I originally suggested.

Here's a VERY basic example, written in legacy:
[HTML]<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>

<script>dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

<script>
dojo.require("dijit.TitlePane");
</script>
</head>
<body class="claro">
<div id="tp2" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'I\'m a TitlePane Too', open: false">
Click arrow to close me.
</div>
</body>
</html>[/HTML]

A borderContainer is a higher level object. It's used like a "box" in which you add other objects. I can't be 100% sure without seeing that other code but I suspect your titlePane with be located down a level or two from a borderContainer.

MathewSuran · ‎05-27-2014

Thanks for that. The way it is set up is that when you click on the toolbar button, the left pane appears. I have figured out in JS where that takes place and have changed some things around already. There is no specific TitlePane HTML code, just the leftpanel code I provided. Utilizing "inspect element" in Chrome, I have figured out the hierarchy of the TP. It goes boardercontainer, stackcontainer,contentpane,tp1,2,3.

SteveCole · ‎05-27-2014

Ok, well, here's another option on the JS side of things you can try while your application loads. You basically tell the titlePane to close programatically. Here's my same example as before but using this JS method instead of specifying it on the HTML side of things:

[HTML]<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>

<script>dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

<script>
   dojo.require("dijit.TitlePane");

   function init() {
    dijit.byId("tp2").set("open",false);
   };

   dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="tp2" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'I\'m a TitlePane Too'">
   Click arrow to close me.
</div>
</body>
</html>[/HTML]

Now, the app you inherited may be structured a little different but the key line is that one line of code in my example's init function.

MathewSuran · ‎05-28-2014

Awesome! I used the .set("open",false) from your code which worked perfectly. Here's what I did:

var tp1 = new dijit.TitlePane({title: "Description"});
            tp1.set('content', configOptions.description).set("open",false);
            detailCp.addChild(tp1);

Thanks for your help!