agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

[NianweiLiu]

Hello,
  For those folks that use the widget agsjs.dijit.TOC, please be aware that a few enhancements have been put in, specifically:

--FeatureLayer. Supports Simple, UniqueValue and Range Renderer.
--AMD compatible. support both AMD and classic syntax (with sample code).
--fixed some problem when refresh after layer list change.

Some of the fairly complex but less known functionality was dropped to simplify the code upgrade, such as creation of check box on legend items based on UniqueValueRenderer, etc.

For live sample and download, please go to
http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

Nianwei Liu
Charlotte, NC

[KenBuja]

Great update, Nianwei! I really like the widget and am quite thankful that you took the time to create it.

[KevinMacLeod1]

Thank you Nianwei you rock! This is awesome!

[BarryGuidry]

Could anybody ever get this portion of the agsjs connection code to work? I could only get a full direct path to the 'agsjs' directory to work.

name: "agsjs", //necessary for TOC
                location:location.pathname.replace(/\/[^/]+$/, "")+'/./build/agsjs'

[NianweiLiu]

Could anybody ever get this portion of the agsjs connection code to work? I could only get a full direct path to the 'agsjs' directory to work

Bottom line is that you need to let the browser resolve to the correct path, and that depends on your folder structure. You can see where the 404 error says in firebug, or simply log the path out to see if matches your actual folders.

[AdrianMarsden]

Liu - many thanks for the update.  The only non-style based change I make is to this line

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

adding a class to the image - any chance of adding that to your version?  It justs gives me a bit more control over style - I add a vertical-algn:bottom to mine.

Many thanks

ACM

[NianweiLiu]

adding a class to the image
ACM

I added class 'agsjsTOCIcon' class. It's in code not in template string because feature layer's symbol is replaced by a SVG/VML container, not a IMG.

If you just need to set your icon image style, you do not really need this new class, simply use

.agsjsTOCNode img {
 /* your style */    
}

in your style sheet would be sufficient.

But I added the class to cover client side none IMG symbol.

[AdrianMarsden]

Brilliant!  Missed that, I'll take a look at it now and revert to the original code.

Nice update - grouped styles work as they do in ArcMap now, rather than being split by the unique values.

[AdrianMarsden]

Hi

I'm not sure if this is a small glitch, but I used to have

{
                layer: aerials,
                slider: true,
                title: "Aerials",
                collapsed: true
            }

To define a TOC on my aerial service, which is pure rasters, with nothing switched on by default.  Using the latest version this gets classed as a un-openable menu item

<img src="http://my server/arcgis_js_api/library/3.5/jsapi/js/dojo/dojo/resources/blank.gif" alt="" data-dojo-attach-point="iconNode" class="dijitTreeExpando dijitTreeExpandoClosed" style="visibility: hidden;">

A very small tweak to my code

{
                layer: aerials,
                slider: true,
                title: "Aerials",
                isopen: true,
                collapsed: true
            }

and all is fine

Cheers

ACM

[BarryGuidry]

Could anybody ever get this portion of the agsjs connection code to work? I could only get a full direct path to the 'agsjs' directory to work.

name: "agsjs", //necessary for TOC
                location:location.pathname.replace(/\/[^/]+$/, "")+'/./build/agsjs'

I ended up having IT place the 'agsjs' files on the server, and put the full path to the directory on the server in the web application, which now works. First, I basically tried the same on my Sharepoint site, which did not work.