nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

TOC Control - expand at startup

LeonScott

I want the TOC control to be expanded on startup of my app based on the Sample Flex Viewer. I've tried calling expandChildrenOf() and expandItem() methods for the control in the config function of the MapManager, but its had no effect. Any ideas?

Thanks.

Leon

Najděte více příspěvků označených jako

Accepted answers

All comments

LeonScott

Here is the rest of the relevant code from the MapManager.mxml that I am using, just for comparison.

//init
private function init():void
{
     SiteContainer.addEventListener(AppEvent.CONFIG_LOADED, config);
     .
      .
      SiteContainer.addEventListener(AppEvent.SHOW_INFOWINDOW, widgetShowInfo);
}

//config
private function config(event:AppEvent):void
{
      // Get Configuration data
      configData = event.data as ConfigData;

       //Get UI paramaters
      configureUI(configData);

map.addEventListener(MapEvent.LOAD, mapLoadComplete);
.
. (Layers added to map in here)
.
      // Populate TOC control w/ live layers
      mapTOC.map = map;
      mapTOC.excludeLayers = getBasemaps();
      mapTOC.excludeGraphicsLayers = true;}

JacksonTrappett

Thanks for the reply. That's actually exactly what I'm doing, and it's working great except for the scrollbar issue. I don't understand why in Flex, expanding a tree by a function call works different than the built in expansion that's called when the user clicks the expand node on the tree. I haven't been able to find what the difference is but there must be one because it behaves differently.

Unfortunately, I can't find any other way to expand the tree that will make the scrollbar activate, and I also haven't found any way to activate the scrollbar by a refresh. The only thing that works is for a user to click the expand node on the tree, but without knowing that, the users just can't see the rest of the tree that is below the bottom of the box.

LeonScott

I haven't run into that issue. I'm only using callLater(expandTOC) and I place the call in the mapLoadComplete event, instead of init()

//map load complete
private function mapLoadComplete(event:MapEvent):void{
SiteContainer.dispatchEvent(new AppEvent(AppEvent.LAYER_LOADED, false, false, null));
callLater(expandTOC);
}

Hope this is helpful.

Leon

JacksonTrappett

Question on this solution. I grabbed this solution a while back to expand the first node of my tree and it works great. It has however introduced a bug. When I expand the tree using the funciton call, and the tree expands past the end of the box it lives in, the vertical scrollbar doesn't activate. If I expand the tree manually the scrollbar works fine.
For some reason the box that the tree is in doesn't realize that the tree got too big if I expand it using the toc.expandItem(item,true,true,true,null); call. Any idea on how I can tell the tree to refresh its scrollbar so that the users can scroll down to see all of the items in the tree?

I have tried all of these in various places including using callLater:

toc.invalidateDisplayList();
toc.validateNow();
toc.validateDisplayList();
toc.invalidateSize();

I have searched extensively for a solution to this issue and found many people who have the issue but no solutions that work.

ChrisMcGovern

Thank you Robert, you post was precisely what i needed.
-chris
mncppc

Guys,

Here is the solution.

//Add this to the init function
callLater(expandTOC);

//Add this function
                        private function expandTOC():void
   { 
    toc.openItems = toc.dataProvider.source;
    for each(var item:TocMapLayerItem in toc.openItems) {
     if (item.isTopLevel())
      toc.expandItem(item,true,true,true,null);
    }          
   }

MatthewLawton

Thanks for the suggestion, Robert. Unfortunately it did not work for me. I noticed that when I click Run Index, nothing appears to get updated in the bin-debug folder. I was expecting the LiveMapWidget.swf to get recompiled with my changes, but it still has a date on it from 2009. Either I am not compiling things correctly or I do not have my project set up correctly in Flash Builder, or likely both.

rscheitlin

Matthew,

Here is what you need in the LiveMapsWidget.mxml in the src/com/esri/solutions/esa/widgets/LiveMapsWidget.mxml if you are using the SFV 1.3

//Add this to the init function
callLater(expandTOC);
//Add this new function (make sure you don't add it inside of another function)
private function expandTOC():void
   { 
    if (expanded)
    {
     toc.openItems = toc.dataProvider.source;
     for each(var item:TocMapLayerItem in toc.openItems) {
      if (item.isTopLevel())
       toc.expandItem(item,true,true,true,null);
     }     
    }         
   }

MatthewLawton

I am trying to do the same thing with the VIPER code, which I believe is built off of the Sample Flex Viewer. I copied Robert's code snippet into the MapManager.mxml at the end of the Init funciton, but it didn't seem to do anything either.

I guess I'm not even sure if I am starting in the right place. The path I used for that file in Flash Builder is src/com/esri/solutions.flexviewer/MapManager.mxml. Is that the right one? When I click on Run Index it opens up the application in bin-debug\index.html, but I don't even see any files with today's date in that folder when I view it in Windows Explorer. Is something not getting updated correctly when I compile my application?

LeonScott

Robert,

I have tried calling it in both init() and config() with similar results. I also tried calling it in the mapLoadcomplete() function at one point, but I didn't use the callLater() function. That made the difference. Before I was trying to expand the tree without the use of callLater in the same spot, so like you said it was getting called too soon. Thanks.

Leon

FYI - I am defining the TOC control in the MapManager.mxml like this....

<mx:HBox id="mainBox" width="100%" height="100%" >
.
.
.

<mx:VBox width="100%" height="225" styleName="TOCStyle" >
<mx:Label text="Live Layers" styleName="SectionTitle" />
<mx:ToggleButtonBar dataProvider="{mapViewStack}" />
<mx:ViewStack id="mapViewStack" width="100%" height="100%" paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5">
<mx:Canvas id="canvasTOC" label="TOC">
<toccomp:TOC id="mapTOC" width="100%" height="100%" useLayerFadeEffect="true" />
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
.
.
.
</mx:HBox>

Leon,

Because you are using the TOC in a custom component, I am not sure when you are calling the expandTOC function, but it must be getting called to soon.

rscheitlin

Leon,

Because you are using the TOC in a custom component, I am not sure when you are calling the expandTOC function, but it must be getting called to soon.

LeonScott

That is a possibility... I don't notice it being particularly slow to load. I load a few basemaps and an "overlay layer" in my app. I thought that number of services might contribute to what you are talking about. So far I've tested not loading the basemaps. I'll fiddle with overlay to see if that makes a difference. Thanks again.

Its online @ http://gis.dedham-ma.gov/propertyviewer, if you would like to see what I'm doing with the basemaps.

Leon

Leon,

Strange that you are having trouble with this... There must be a really slow map service in your map. The issue is that the Tree can not have the expand functions called before it is ready, meaning all the leafs are initialized. So if you have a very slow map service in your map then the expand function could be getting called before the tree is ready. You could try another callLater from the first callLater.

Robert

rscheitlin

Leon,

Strange that you are having trouble with this... There must be a really slow map service in your map. The issue is that the Tree can not have the expand functions called before it is ready, meaning all the leafs are initialized. So if you have a very slow map service in your map then the expand function could be getting called before the tree is ready. You could try another callLater from the first callLater.

Robert

LeonScott

I've tried this solution as your suggested, but the TOC still isn't expanding for some reason. Unfortunately, I haven't gotten very far on this issue lately. It would be a nice feature to have, but I didn't want to get hung up on it. Thanks again.

Leon

Guys,

Here is the solution.

//Add this to the init function
callLater(expandTOC);

//Add this function
                        private function expandTOC():void
   { 
    toc.openItems = toc.dataProvider.source;
    for each(var item:TocMapLayerItem in toc.openItems) {
     if (item.isTopLevel())
      toc.expandItem(item,true,true,true,null);
    }          
   }

JacksonTrappett

Guys,

Here is the solution.

//Add this to the init function
callLater(expandTOC);

//Add this function
                        private function expandTOC():void
   { 
    toc.openItems = toc.dataProvider.source;
    for each(var item:TocMapLayerItem in toc.openItems) {
     if (item.isTopLevel())
      toc.expandItem(item,true,true,true,null);
    }          
   }

Are you meaning the MapManager init? I tried adding this and nothing happens.

EDIT: never mind I got this fixed! Since my TOC code wasn't in MapManager I had to move it!

rscheitlin

Guys,

Here is the solution.

//Add this to the init function
callLater(expandTOC);

//Add this function
                        private function expandTOC():void
   { 
    toc.openItems = toc.dataProvider.source;
    for each(var item:TocMapLayerItem in toc.openItems) {
     if (item.isTopLevel())
      toc.expandItem(item,true,true,true,null);
    }          
   }

AaronNash

has anyone come up with a resolution for this? This is something I was looking into also

thanks,
Aaron

LeonScott

Yes, that is how I called ValidateNow. I'm trying to think of where the best place to call mapTOC.expandChildrenOf() or perhaps a listener of some sort is needed.

rscheitlin

Leon,

Are you calling the validate now on the toc control?

mapTOC.validateNow();

LeonScott

I called mapTOC.ExpandChildrenOf(....) in the mapLoadComplete function and success! ... or so I thought. It worked for a little while, until I exported to release build and the TOC no longer expanded. I must have been getting lucky with timing of the map finishing loading the TOC being populated when I was running it from Flex Builder. Weird.

I have tried ValidateNow() in the config function and it seems to really screw up the load process. My services don't appear, unless I manually zoom and my disclaimer window is off centered.

LeonScott

I tried different combinations of ValidateNow() and CallLater() with no results. You were right though, I was calling it in the wrong place. I call mapTOC.ExpandChildrenOf(....) in the mapLoadComplete function and success! So I end up with something like this:

private function config(event:AppEvent):void
{
   .
   .
   map.addEventListener(MapEvent.Load, mapLoadComplete);
   .
   .
   .
   // Populate TOC control w/ live layers
   mapTOC.map = map;
   mapTOC.excludeLayers = getBasemaps();
   mapTOC.excludeGraphicsLayers = true;
}

//map load complete
private function mapLoadComplete(event:MapEvent):void
{
   SiteContainer.dispatchEvent(new AppEvent(AppEvent.LAYER_LOADED, false, false, null));
   mapTOC.expandChildrenOf(mapTOC.firstVisibleItem, true);
}

rscheitlin

Bluesalmon,

So have you tried the validatenow? Maybe validatenow in combination with CallLater.

LeonScott

I'm calling it at the very end of the config function, like this. The layers are getting added to the map prior this in the same function.

//config
private function config(event:AppEvent):void
{

     .
     .
     .

     // Populate TOC control w/ live layers
     mapTOC.map = map;
     mapTOC.excludeLayers = getBasemaps();
     mapTOC.excludeGraphicsLayers = true;
     mapTOC.expandChildrenOf(mapTOC.firstVisibleItem, true);
}

Also, I read this in the Flex Language Reference that might be part of the issue:

If you set dataProvider and then immediately call expandChildrenOf() you may not see the correct behavior. You should either wait for the component to validate or call the validateNow() method.

Thank you for the responses!

Leon

rscheitlin

Bluesalmon,

Is it possible that you are trying to call the expand method before the tree is populated? That would be the first thing I would check.

LeonScott

Thanks for the response. I'm not using the LiveMapsWidget though. I've placed the TOC component in the MapManager.

Add the following in red to this code string in the config.xml within the widgets block.

<widget label="Live Maps" preload="maximized" icon="com/esri/solutions/flexviewer/assets/images/icons/i_layers48.png" menu="menuMap" config="com/esri/solutions/flexviewer/widgets/LiveMapsWidget.xml">com/esri/solutions/esa/widgets/LiveMapsWidget.swf</widget>

MarcCavallaro

Add the following in red to this code string in the config.xml within the widgets block.

<widget label="Live Maps" preload="maximized" icon="com/esri/solutions/flexviewer/assets/images/icons/i_layers48.png" menu="menuMap" config="com/esri/solutions/flexviewer/widgets/LiveMapsWidget.xml">com/esri/solutions/esa/widgets/LiveMapsWidget.swf</widget>

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.