TOC widget - group layers across multiple services

[NhuMai]

This question is about NLiu's TOC widget. If i've understood correctly, the layerInfos for the TOC takes dynamic map services and feature layers. Our app includes services from various cities, with a service for each city's particular data category (e.g. City1_Water, City1_Electric, City1_Gas, City2_Water, City2_Electric, City2_Gas). I've integrated each as a dynamic map service.

So I currently added them to the TOC with success in this way. However, I'm looking to group things one level further, by City. Is there any way to do this out of the box? If not, any suggestions on tweaking the widget to do so?

toc = new TOC({
 map: window.myMap,
 layerInfos: [
 {
 layer: City1_Water,
 title: "City1_Water",
 collapsed: true
 },
 {
 layer: City1_Electric,
 title: "City1_Electric",
 collapsed: true
 },
 {
 layer: City1_Gas,
 title: "City1_Gas",
 collapsed: true
 },
 {
 layer: City2_Water,
 title: "City2_Water",
 collapsed: true
 },
 {
 layer: City2_Electric,
 title: "City2_Electric",
 collapsed: true
 },
 {
 layer: City2_Gas,
 title: "City2_Gas",
 collapsed: true
 }
 ]
 }, 'legendDiv');

[deleted-user-ZTub55yWbsya]

Sorry I cannot provide a full solution for your situation, but here's what little I'll offer if you cannot republish your map services to have the desired group structure.  Very generally speaking, you'll need to alter both the html (templateString variable at the top) and a lot of the javascript to compensate for this custom introduced group level.  The trick will be how to define groups.  Probably requires a new parameter at the top of the widget.

It may require something like this (pink is added code), though beware this could be poorly thought out.

templateString: '<div class="agsjsTOCNode">' +

'<div data-dojo-attach-point="rowNodeGroup" data-dojo-attach-event="onclick:_onClick">' +

'<span data-dojo-attach-point="checkContainerNodeGroup"></span>' +

'<span data-dojo-attach-point="labelNodeGroup"></span>' +

'<div data-dojo-attach-point="rowNode" data-dojo-attach-event="onclick:_onClick">' +

 .....

In postCreate: function(),

if you include

chk.placeAt(this.checkContainerNodeGroup);
chk.startup();
‍‍‍‍‍‍‍‍

and

chk = domConstruct.create('input', {
 type: 'checkbox',
 checked: this.data.visible
 }, this.checkContainerNodeGroup);‍‍‍‍‍‍‍‍‍‍‍‍

you'll see it creates a top level checkbox above each map service and layer level.  This might be a start for understanding how to piece it together.  Good luck if you get into the messy weeds!  It will surely strengthen your javascript coding.

[NhuMai]

Thank you for your response. I'm just now diving into this adventure. I'm leaving the question open in case others have tried this as well..