Table Of Content Turn tocItem's parents on

[SchoppMatthieu]

Arc Server 10 FlexViewer 2.3.1

Hello, I'm upgrading a customized FlexViewer application from FlexViewer 1.3 to Flexviewer 2.3.1.

In the version of the FlexViewer 1.3 we implemented the Table Of Content that appears on this threads:

http://forums.esri.com/Thread.asp?c=158&f=2421&t=302802#947017

The link to the code source has been redirected and I can't find it anymore.

This Table of Content for 1.3 has an interesting functionality:
When the users turn on a child within a GroupLayer, the event is spread in the tree and the parents are automatically turned on. So the user can target what he want to see on the map without worrying about turning-on the all tree hierarchy.

I'm using now the Table Of Content implemented by Robert Scheitlin.

I tried to recreate this functionality. I try to understand how the "tocClasses" classes work together, but it's really complicated. I compare the "tocClasses" code in 1.3 and 2.3.1 but it's not successful yet.

Has anyone implemented this kind of functionality?

Thanks,
Matt
Matt

[TonyCollins]

Arc Server 10 FlexViewer 2.3.1

Hello, I'm upgrading a customized FlexViewer application from FlexViewer 1.3 to Flexviewer 2.3.1.

In the version of the FlexViewer 1.3 we implemented the Table Of Content that appears on this threads:

http://forums.esri.com/Thread.asp?c=158&f=2421&t=302802#947017

The link to the code source has been redirected and I can't find it anymore.

This Table of Content for 1.3 has an interesting functionality:
When the users turn on a child within a GroupLayer, the event is spread in the tree and the parents are automatically turned on. So the user can target what he want to see on the map without worrying about turning-on the all tree hierarchy.

I'm using now the Table Of Content implemented by Robert Scheitlin.

I tried to recreate this functionality. I try to understand how the "tocClasses" classes work together, but it's really complicated. I compare the "tocClasses" code in 1.3 and 2.3.1 but it's not successful yet.

Has anyone implemented this kind of functionality?

Thanks,
Matt
Matt

Hi Matt,

I can't remember off hand (i'm at home), but I think it is in the itemRenderer class. Look for the onCheckBoxClick function. In here you can slap in a while loop whilst the item's parent is not null.

[SchoppMatthieu]

Thanks you Tony.

It's exactely what I finally did ... 🙂

private function onCheckBoxClick(event:MouseEvent):void
     {
         event.stopPropagation();

         if (data is TocItem)
         {
 
             var item:TocItem = TocItem(data);
    item.visible = _checkbox.selected;

  if (item.parent && item.visible == true){
   item.parent.visible = true;
    
   if (item.parent.isTopLevel()==false){
    item.parent.scaledependant = true;
   }
   if (item.parent.parent){
    item.parent.parent.visible = true;
     
    if (item.parent.parent.isTopLevel()==false){
   //  Util the last children of the tree meet hit's TopLayer Grand Pa'



I didn't have time yet to make it better with a loop so it's probably not the smarter way of doing it but it works, except that the ScaleDependantCheckBoxes get a bit crazy sometimes.



For the Children it's a bit different. You can ask for the "item.parent's parent" but not for the "item.children's childrens" so I just loop down the hierarchy one time which is enough for me:

if (item.children && item.isTopLevel()==false && item.visible == true && item.isTopLevel()==false){
for each (var itemKid:TocItem in item.children)
{  
itemKid.visible = true;
if (itemKid.scaledependant == true){
itemKid.scaledependant = true;
}
}
}

It sounds more like tinkering than proper programming... The ScaleDependantCheckBoxes get crazy too.


I'm happy if you can tell me more Tony about the way you would do it. Any advice is welcome.

Please also see my other post about hiding the children in the table of Content.

Thanks,
Matt

[JustinRobinson]

Hi Guys,

I was after the same effect and wanted something a little more scalable then Matshop's method.
Replace the onCheckBoxClick function of TOC/toc/tocClasses/TocItemRenderer.as with the function below (or modify it as such). This will take care of activating all parents in the list, however, not its children as Matshop was after.

private function onCheckBoxClick(event:MouseEvent):void
{
 event.stopPropagation();
 
 if (data is TocItem)
 {
  var item:TocItem = TocItem(data);
  do {
   item.visible = _checkbox.selected;
   if (item.isTopLevel() == true){
    break;
   } else {
    item = item.parent
   }
  }
  while (item.visible == false);
  
 }
}

[JustinRobinson]

Hello again, I decided that I was going to need to be able to toggle children as well... This, unfortunately, took far longer than it should have. Finally got it and it seemed so simple that I felt dumb for wasting far too much time. Anyway here we go:

private function toggleChildren(item:TocItem):void
{
 for each (var subitem:TocItem in item.children){
  subitem.visible = _checkbox.selected;
  if (subitem.children){
   toggleChildren(subitem);
  }
 }
}

private function onCheckBoxClick(event:MouseEvent):void
{
 event.stopPropagation();
 
 if (data is TocItem)
 {
  var item:TocItem = TocItem(data);
  var runonce:Boolean = false
   
  do {
   item.visible = _checkbox.selected;
   if (runonce == false){
    toggleChildren(item);
   }
   if (item.isTopLevel() == true){
    break;
   } else {
    runonce = true
    item = item.parent
   }
  }
  while (item.visible == false);

 }
}

This works for unlimited parents and children. I'm still a little unhappy with the whole "runonce" requirement, and recursion isn't the most efficient programming, but I'm not well versed enough with AS3 to figure out how to do it with iteration.

[SchoppMatthieu]

Thank you very much for sharing your code.

[Anonymous User]

Just a suggestion to readers.  You could have the best of both worlds by using the onCheckBoxClick for the more reserved approach and the  onCheckBoxDoubleClick function to explode all of the children. 

private function toggleChildren(item:TocItem):void
 {
  for each (var subitem:TocItem in item.children){
   subitem.visible = _checkbox.selected;
   if (subitem.children){
    toggleChildren(subitem);
   }
  }
 }
 private function onCheckBoxClick(event:MouseEvent):void
 {
  event.stopPropagation();
  if (data is TocItem)
  {
   var item:TocItem = TocItem(data);
   do {
    item.visible = _checkbox.selected;
    if (item.isTopLevel() == true){
     break;
    } else {
     item = item.parent
    }
   }
   while (item.visible == false);
  }
 }

    private function onCheckBoxDoubleClick(event:MouseEvent):void
    {
  event.stopPropagation();
  if (data is TocItem)
  {
   var item:TocItem = TocItem(data);
   var runonce:Boolean = false
   do {
    item.visible = _checkbox.selected;
    if (runonce == false){
     toggleChildren(item);
    }
    if (item.isTopLevel() == true){
     break;
    } else {
     runonce = true
     item = item.parent
    }
   }
   while (item.visible == false);
  }
    }