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; } } }

Nested group layer visibility in AGSJS TOC

DerekWicks1

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]

TOC.png

Vind meer berichten getagd met

Accepted answers

NianweiLiu

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.

All comments

JonathanUihlein

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.

wadsonmakari

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,

KevinMacLeod1

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.

DerekWicks1

Thank you, great job on the widget!

NianweiLiu

DerekWicks1

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--
    }

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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