topic Re: Showing & Hiding - Right Hand AccordionContainer in ArcGIS JavaScript Maps SDK Questions

Showing & Hiding - Right Hand AccordionContainer

GaneshSolai_Sambandam — Mon, 13 Jan 2014 07:58:57 GMT

Hi Guys
Can anyone hlep me on this.
I have Webmap application with design layouts split into 5 sections, top, bottom, centre, left and right.
The left and right sections - AccordionContinaer with diji.layout.contentpane.
Center section - where map sits on the application.

What I wanted to do now is when the application loads, my right section AccordionContainer shouldn't be visible, it should only show an icon, where an user can click that icon and makes the right Accordioncontainer and associated contentpanes visible.

I think, some of you have done this before.

Can anyone point me to right examples or codes or links please.

regards
Ganesh

Re: Showing & Hiding - Right Hand AccordionContainer

JakeSkinner — Sun, 12 Dec 2021 05:16:44 GMT

Hi Ganesh,

You can set the visibility of the AccordianContainer to 'hidden'. Ex:

<div dojoType="dijit.layout.AccordionContainer" id="accordion" style="visibility:hidden;">

You can then show the AccordianContainer when the user clicks on the icon/button. Ex:

require(["dojo/dom-style"], function(domStyle){
    domStyle.set("accordion", "visibility", "visible");
)};

Re: Showing & Hiding - Right Hand AccordionContainer

GaneshSolai_Sambandam — Mon, 13 Jan 2014 12:27:43 GMT

Hi Jskinner
Thank you reply. But, I want to do some thing like this, as this shown on this sample link.

http://lee2.connectgis.com/Map.aspx

My right hand content pane should slide out and slide in when a user a click on the button as shown in this example.

Regards
Ganesh

Re: Showing & Hiding - Right Hand AccordionContainer

JeffPace — Sun, 12 Dec 2021 05:16:47 GMT

I do this when i get popup results

connect.connect(popup, "onSetFeatures", lang.hitch(this, function() {
                                    var summPane = registry.byId('rightPane');
                                    if (!summPane._showing) {
                                        summPane.toggle();
                                    }

Re: Showing & Hiding - Right Hand AccordionContainer

JeffPace — Sun, 12 Dec 2021 05:16:49 GMT

Once you have the pane showing, you can also select a specific AccordianContainer or AccordianPane

registry.byId(settings.tabContainer).selectChild(settings.accordionContainer);
registry.byId(settings.accordionContainer).selectChild(settings.accordionPane);

Re: Showing & Hiding - Right Hand AccordionContainer

GaneshSolai_Sambandam — Sun, 12 Dec 2021 05:16:52 GMT

I do this when i get popup results

connect.connect(popup, "onSetFeatures", lang.hitch(this, function() {
                                    var summPane = registry.byId('rightPane');
                                    if (!summPane._showing) {
                                        summPane.toggle();
                                    }

hi Jeff
Not exactly sure, where to add this.
Can you show this in fiddler?

Thanks in advance.

Re: Showing & Hiding - Right Hand AccordionContainer

JeffPace — Mon, 13 Jan 2014 14:38:01 GMT

sorry, i thought you were looking for an event

if all you want to do is start with it closed, when you define the container

data-dojo-props="region:'right',title:'Results',startExpanded:false"

Re: Showing & Hiding - Right Hand AccordionContainer

JeffJacobson — Mon, 13 Jan 2014 14:45:06 GMT

You might want to try the dojox/layout/ExpandoPane.

Re: Showing & Hiding - Right Hand AccordionContainer

JeffPace — Sun, 12 Dec 2021 05:16:55 GMT

Thats what I get for making assumptions.

Yes this all needs to be an expandopane, its exactly what you are looking for

  <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="region:'left',title:'Widgets',startExpanded:false" id="leftPane">
                <div data-dojo-type="dijit/layout/TabContainer"  data-dojo-props="tabPosition:'top', tabStrip:'true'" id="leftTC" style="padding:0;width:290px;" >
                    <div data-dojo-type="dijit/layout/AccordionContainer" title="Data" id="dataTab">
                        <div data-dojo-type="dijit/layout/AccordionPane" data-dojo-props="title:'Live Layers',selected:'true'" id="liveLayerPane" style="padding:0;" >
                            <div id="tocDiv" style="padding: 0 5px 0;" ></div>
                        </div>

Re: Showing & Hiding - Right Hand AccordionContainer

GaneshSolai_Sambandam — Sun, 12 Dec 2021 05:16:57 GMT

Thats what I get for making assumptions.

Yes this all needs to be an expandopane, its exactly what you are looking for

  <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="region:'left',title:'Widgets',startExpanded:false" id="leftPane">
                <div data-dojo-type="dijit/layout/TabContainer"  data-dojo-props="tabPosition:'top', tabStrip:'true'" id="leftTC" style="padding:0;width:290px;" >
                    <div data-dojo-type="dijit/layout/AccordionContainer" title="Data" id="dataTab">
                        <div data-dojo-type="dijit/layout/AccordionPane" data-dojo-props="title:'Live Layers',selected:'true'" id="liveLayerPane" style="padding:0;" >
                            <div id="tocDiv" style="padding: 0 5px 0;" ></div>
                        </div>

Hi Jeff and Jacob
Thank you very much for your help. I haven't tried your expandopane code, will try and get back to you tomorrow.
In the meantime, I just wanted to ask, in the link

http://lee2.connectgis.com/Map.aspx

the Lee Council has created a toggle button with click event and which slides in & out the accordion container. Have you checked the sample web application link. Are they using expandopane method. I don't think so.

I just want to do try like Lee city council method. But, if your expandopane codes work, I will use yours.

thanks very much in advance.

Ganesh

Re: Showing & Hiding - Right Hand AccordionContainer

JianHuang — Sun, 12 Dec 2021 05:17:00 GMT

There are many ways to implement slide in/out effect. Here is a simple code using dojo/_base/fx.

    var slide = function (rightDomId, open, map) {
      var width = window.innerWidth;
      var sliderWidth = open ? 250 : 0;
      var mapWidth = open ? width - 250 : width;
      fx.animateProperty({
        node: rightDomId,
        properties: {
          width: sliderWidth
        },
        onEnd: function () {
          var slider = dom.byId(rightDomId);
          var visible;
          if (parseInt(slider.style.width) < 100) {
            visible = "none";
          } else {
            visible = "block";
          }
          domStyle.set(slider, {
            display: visible
          });
        }
      }).play();
      fx.animateProperty({
        node: map.id,
        properties: {
          width: mapWidth
        },
        onEnd: function () {
          map.resize();
        }
      }).play();
    };

    var slideIn = function (rightDomId, map) {
      slide(rightDomId, true, map);
    };

    var slideOut = function (rightDomId, map) {
      slide(rightDomId, false, map);
    };

Re: Showing & Hiding - Right Hand AccordionContainer

JonathanUihlein — Tue, 14 Jan 2014 14:38:20 GMT

The Lee Council has created a toggle button with click event and which slides in & out the accordion container. Have you checked the sample web application link. Are they using expandopane method. I don't think so.

Did you also check the sample? They are using dojo.animateProperty()

Like Jian said, there are many many ways to accomplish what you desire.
The choice really comes down to you making your own decision based on your immediate needs.
As a developer, the best thing you can do is outline the needs/wants/requirements of a project before starting to code.

Re: Showing & Hiding - Right Hand AccordionContainer

GaneshSolai_Sambandam — Thu, 16 Jan 2014 12:38:01 GMT

Did you also check the sample? They are using dojo.animateProperty()

Like Jian said, there are many many ways to accomplish what you desire.
The choice really comes down to you making your own decision based on your immediate needs.
As a developer, the best thing you can do is outline the needs/wants/requirements of a project before starting to code.

Hello everyone (Jacob, Jeff, Jian, John)

thanks for your help and it is exactly what I wanted to implement in my application. Expandopane work perfectly fine.
I agree with Jon comments on taking a decision based on immediate needs.
Anyway, without your feedbacks it wouldn't be possible for me implement swiftly.
Thanks once again.

Regards
Ganesh

topic Re: Showing & Hiding - Right Hand AccordionContainer in ArcGIS JavaScript Maps SDK Questions

Showing &amp; Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Re: Showing & Hiding - Right Hand AccordionContainer

Showing & Hiding - Right Hand AccordionContainer