topic Re: TOC - Arrows instead of plus sign to expand TOC in ArcGIS JavaScript Maps SDK Questions

TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Wed, 15 Jun 2016 19:11:56 GMT

I want to replace the plus '+' sign with an arrow for the opening and closing of an item in the TOC. Also, I want to put the arrow to the left of the checkbox. How can I do this ?

--Brian

Re: TOC - Arrows instead of plus sign to expand TOC

RickeyFight — Wed, 15 Jun 2016 20:03:11 GMT

Brian what TOC are you referring too? Can you post a link to some script?

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Thu, 16 Jun 2016 12:23:50 GMT

Rickey, I am using nliu's TOC widget.

Re: TOC - Arrows instead of plus sign to expand TOC

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:38:42 GMT

Brian,

Sure you can do that if you modify the TOC.js and the TOC.css files

In the TOC.js make this change to the templateString (to move the expand icon to the left of the checkbox):

templateString: '<div class="agsjsTOCNode">' +
    '<div data-dojo-attach-point="rowNode" data-dojo-attach-event="onclick:_onClick">' +
    '<span data-dojo-attach-point="contentNode" class="agsjsTOCContent">' +
    '<img src="${_blankGif}" alt="" data-dojo-attach-point="iconNode" />' +
    '<span data-dojo-attach-point="checkContainerNode"></span>' +
    '<span data-dojo-attach-point="labelNode">' +
    '</span></span></div>' +
    '<div data-dojo-attach-point="containerNode" style="display: none;"> </div></div>',

and add this css rule to the TOC.css:

.claro .dijitTreeExpando {
    background-image: url("images/treeExpandImages.png") !important;
    width: 16px;
    height: 16px;
    background-position: -35px 0;
}

and Add an images folder to the agsjs\dijit\css folder and then save this image into it:

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Thu, 16 Jun 2016 17:38:28 GMT

Thanks Robert, I'm almost there. I did exactly what you said, but am still getting the '+' and '-' images to toggle the laters.

Re: TOC - Arrows instead of plus sign to expand TOC

RobertScheitlin__GISP — Thu, 16 Jun 2016 17:42:28 GMT

Brian,

I have tested this on my end so I know it works. Did you add an images folder to the agsjs\dijit\css folder?

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Thu, 16 Jun 2016 18:47:31 GMT

I got it to work with the image for the arrows to show. When I expand a layer, is the arrow supposed to change to the right pointing arrow ?

Re: TOC - Arrows instead of plus sign to expand TOC

RobertScheitlin__GISP — Thu, 16 Jun 2016 19:05:14 GMT

Brain,

it is right for expand and down for collapse

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Thu, 16 Jun 2016 19:16:10 GMT

I'm just getting the down arrows whether the layer is expanded or collapsed.

Re: TOC - Arrows instead of plus sign to expand TOC

RobertScheitlin__GISP — Thu, 16 Jun 2016 19:18:56 GMT

Brian,

Are you referencing the TOC.css in your app?

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Thu, 16 Jun 2016 19:20:51 GMT

yes, I changed the code to : <link rel="stylesheet" href="agsjs/dijit/css/toc.css">

this is what my .html page looks like :

then further down, I add a reference to TOC.js :

Re: TOC - Arrows instead of plus sign to expand TOC

RobertScheitlin__GISP — Thu, 16 Jun 2016 19:43:17 GMT

Brain,

That is pretty weird. Can you show me your TOC.css where you added the new rule?

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Thu, 16 Jun 2016 19:47:12 GMT

Here's TOC.css :

and here's TOC.js :

Re: TOC - Arrows instead of plus sign to expand TOC

RobertScheitlin__GISP — Thu, 16 Jun 2016 20:54:00 GMT

Brian,

Everything looks fine. Can you zip-up the whole thing and attach it for review?

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Mon, 20 Jun 2016 13:15:30 GMT

Robert,

Do you want me to send the zipped file to this email ?

Brian Foley

Re: TOC - Arrows instead of plus sign to expand TOC

RobertScheitlin__GISP — Mon, 20 Jun 2016 13:18:14 GMT

Brian,

Yes if you use the advanced editor you will have the ability to attach files to this thread.

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Mon, 20 Jun 2016 13:23:46 GMT

Robert,

Here's the zipped file.

Brian

Re: TOC - Arrows instead of plus sign to expand TOC

RobertScheitlin__GISP — Mon, 20 Jun 2016 14:18:22 GMT

Brian,

Add this css rule right after the other you added:

.claro .dijitTreeExpandoClosed {

background-position: 1px 0;

}

Re: TOC - Arrows instead of plus sign to expand TOC

BrianFoley1 — Mon, 20 Jun 2016 14:42:43 GMT

Robert,

Thanks, that did it. Another question I have is related to the image below. It is from a WPF Browser Application I was playing with. I wanted to create something similar in javascript. Along the top of the map, I have a feature called 'Identify Tools' which when selected drops down a menu with the tools available. Is it possible to do this in javascript ? I've been looking at the examples on developers.arcgis.com (javascript) and haven't seen anything similar.

Brian