Nested group layer visibility in AGSJS TOC

2715
6
Jump to solution
01-15-2013 10:08 AM
DerekWicks1
New Contributor
I am trying to get all the checkboxes nested below a group layer to update when the top group layer checkbox is toggled. Currently when the top group layer is toggled all child nodes directly below that group are also toggled, but the lower nested group layers remain unchanged. A bit confusing to explain so I've attached a screenshot to illustrate. I would like to update the visibility of A1, A2, etc. by toggling "Group Layer". Great tool by the way, thanks nliu.

[ATTACH=CONFIG]20744[/ATTACH]
0 Kudos
1 Solution

Accepted Solutions
NianweiLiu
Occasional Contributor II
You should change _onClick event handler, not _createChildrenNodes because what you want to change is behavior of the click, not how the TOC is presented. You probably need to create an inner function and make recursive calls to set visibility of all offsprings layers that is not direct children of the clicked group layer.

Also, you do not have to format the compressed code to make changes, the original source code is in the "src" folder.

View solution in original post

0 Kudos
6 Replies
DerekWicks1
New Contributor
I think I've narrowed it down to the _createChildrenNodes, which needs to be modified so that children of children are appended to the parent layer node array and are updated when _adjustToState is called. However, I'm having some trouble following this bit of code, could you provide any suggestions nliu?

      _createChildrenNodes: function (a, b) {
        this.rootLayerTOC._currentIndent++;
        for (var d = [], c = 0, e = a.length; c < e; c++) {
            var g = a,
                f = {
                    rootLayerTOC: this.rootLayerTOC,
                    rootLayer: this.rootLayer,
                    layer: this.layer,
                    legend: this.legend
                };
            f = g;
            f.data = g;
            g = new agsjs.dijit._TOCNode(f);
            g.placeAt(this.containerNode);
            d.push(g)
        }
        this._childTOCNodes = d;
        this.rootLayerTOC._currentIndent--
    }
0 Kudos
NianweiLiu
Occasional Contributor II
You should change _onClick event handler, not _createChildrenNodes because what you want to change is behavior of the click, not how the TOC is presented. You probably need to create an inner function and make recursive calls to set visibility of all offsprings layers that is not direct children of the clicked group layer.

Also, you do not have to format the compressed code to make changes, the original source code is in the "src" folder.
0 Kudos
DerekWicks1
New Contributor
Thank you, great job on the widget!
0 Kudos
KevinMacLeod1
Occasional Contributor III
nliu this is fantastic!

Have your or anyone integrated this into ESRI's Basic Viewer sample viewer template?

I'm just beginning with javascript and I would be very appreciative if anyone that has integrated these could share their code.
0 Kudos
wadsonmakari
New Contributor III
Dear all,

I would like to change the behaviour of the agsjs TOC control so that only one layer is visible at any given time. If user clicks a layer to make it visible then the control should automatically uncheck the previous visible layer if any is visible.

Can someone advise on how best to achieve this?

Kind regards,
0 Kudos
JonathanUihlein
Esri Regular Contributor
Dear all,

I would like to change the behaviour of the agsjs TOC control so that only one layer is visible at any given time. If user clicks a layer to make it visible then the control should automatically uncheck the previous visible layer if any is visible.

Can someone advise on how best to achieve this?

Kind regards,


You could modify the widget to emit an event when a layer is set to visible (and pass along the ID or reference to that layer).

Then you could set up a listener for that specific event, and hide all other layers based on that.
0 Kudos