agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

4920
28
07-26-2013 10:51 AM
NianweiLiu
Occasional Contributor II
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
28 Replies
KenBuja
MVP Honored Contributor
Great update, Nianwei! I really like the widget and am quite thankful that you took the time to create it.
Reply
0 Kudos
KevinMacLeod1
Occasional Contributor III
Thank you Nianwei you rock! This is awesome!
Reply
0 Kudos
BarryGuidry
New Contributor III
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'
Reply
0 Kudos
NianweiLiu
Occasional Contributor II
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.
Reply
0 Kudos
AdrianMarsden
Regular Contributor II
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
Reply
0 Kudos
NianweiLiu
Occasional Contributor II

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.
Reply
0 Kudos
AdrianMarsden
Regular Contributor II
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.
Reply
0 Kudos
AdrianMarsden
Regular Contributor II
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
Reply
0 Kudos
BarryGuidry
New Contributor III
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.
Reply
0 Kudos