Select to view content in your preferred language

close pane via BasemapToggle

1700
12
Jump to solution
03-28-2014 07:13 AM
jaykapalczynski
Honored Contributor
I have a basemap toggle in my pane....I want to close the pane when the toggle is clicked.
I can do this with buttons no problem...but the toggle is giving me a problem



<div data-dojo-type="dijit/TitlePane" id="Tools"
 data-dojo-props="title:'Tools', closable:false, open:false">
 <div data-dojo-type="dijit/layout/ContentPane" style="width:200; ">
  <div class="toolbar"><span id="BasemapToggle" ></span></div>
                <div class="toolbar"><input type="button" class="myButton" id="button2" value="Finished" /></div>
 </div>
</div>


   on(dom.byId("BasemapToggle"), "click", function () {
         // CLOSE THE PANE WHEN Clicked  
         dijit.byId("Tools").set('open',false); //Close
   })

   var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();




CLOSE THE BUTTONS LIKE THIS

on(dom.byId("button2"), "click", function () {
 dijit.byId("Tools").set('open',false); //Close
})
0 Kudos
1 Solution

Accepted Solutions
JeffPace
MVP Alum
on(toggle, 'toggle'

because your variable that is the basemaptoggle is also called "toggle'

View solution in original post

0 Kudos
12 Replies
JeffPace
MVP Alum
I have a basemap toggle in my pane....I want to close the pane when the toggle is clicked. 
I can do this with buttons no problem...but the toggle is giving me a problem 



<div data-dojo-type="dijit/TitlePane" id="Tools"
 data-dojo-props="title:'Tools', closable:false, open:false">
 <div data-dojo-type="dijit/layout/ContentPane" style="width:200; ">
  <div class="toolbar"><span id="BasemapToggle" ></span></div>
                <div class="toolbar"><input type="button" class="myButton" id="button2" value="Finished" /></div>
 </div>
</div>


   on(dom.byId("BasemapToggle"), "click", function () {
         // CLOSE THE PANE WHEN Clicked  
         dijit.byId("Tools").set('open',false); //Close
   })

   var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();




CLOSE THE BUTTONS LIKE THIS 

on(dom.byId("button2"), "click", function () {
 dijit.byId("Tools").set('open',false); //Close
})


On my expandopane I do

 var summPane = registry.byId('Tools');
if (!summPane._showing) {
    summPane.toggle();
}
0 Kudos
jaykapalczynski
Honored Contributor
where are you placing or calling this code....confused on that
0 Kudos
JeffPace
MVP Alum
where are you placing or calling this code....confused on that


I would put it in your button click.
0 Kudos
MattDriscoll
Esri Contributor
You should listen to the toggle event on the widget.

https://developers.arcgis.com/javascript/jsapi/basemaptoggle-amd.html#event-toggle


on(myBasemapWidget, 'toggle', function(){
   // do some stuff
});
0 Kudos
jaykapalczynski
Honored Contributor
Its not a button....this is coming from ESRI example

https://developers.arcgis.com/javascript/jssamples/widget_toggle.html

<div class="toolbar" id="BasemapToggle"  </div>


var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();
0 Kudos
JeffPace
MVP Alum
oh sorry, then yes a combination of what matt and i said is right

on(myBasemapWidget, 'toggle', function(){
    var paneToClose = registry.byId('paneID');
if (paneToClose ._showing) {
    paneToClose .toggle();
}
});
0 Kudos
jaykapalczynski
Honored Contributor
trying this...not working...this is all the code I have for this

Tried - throws error
on(myBasemapWidget, 'toggle', function(){

on(BasemapToggle, 'toggle', function(){


<div class="toolbar" id="BasemapToggle" </div>



on(BasemapToggle, 'toggle', function(){
  alert("test");
 var paneToClose = registry.byId('Tools');
 if (paneToClose._showing) {
  paneToClose.toggle();
 }
});


var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();
0 Kudos
JeffPace
MVP Alum
on(toggle, 'toggle'

because your variable that is the basemaptoggle is also called "toggle'
0 Kudos
jaykapalczynski
Honored Contributor
sorry for being a pain here, not trying to be...this is driving me nuts....I tried that as well....

If I put the "on(toggle,"  in my JS page the map no longer draws etc...
I remove it everything is fine...

on(toggle, 'toggle', function(){
 var paneToClose = registry.byId('Tools');
 if (paneToClose. _showing) {
  paneToClose. toggle();
 }
});


var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();
0 Kudos