TOC - Arrows instead of plus sign to expand TOC

[BrianFoley1]

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

[RickeyFight]

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

[BrianFoley1]

Rickey, I am using nliu's TOC widget.

[RobertScheitlin__GISP · Accepted solution]

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:

[BrianFoley1]

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

[RobertScheitlin__GISP]

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?

[BrianFoley1]

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 ?

[RobertScheitlin__GISP]

Brain,

    it is right for expand and down for collapse

[BrianFoley1]

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

[RobertScheitlin__GISP]

Brian,

  Are you referencing the TOC.css in your app?

<link rel="stylesheet" href="agsjs/dijit/css/toc.css">