topic Re: keep dijit menuitem open after select in ArcGIS JavaScript Maps SDK Questions

keep dijit menuitem open after select

BrianFoley1 — Tue, 26 Jul 2016 19:03:41 GMT

I have a table of contents (TOC) with a legend that allows me to turn on/off layer in my map. I placed my the TOC in a dijit menubar across the top of my page. When I make a selection from the TOC to turn on/off a layer, I want the TOC to stay opened, but it closes immediately after I select a layer. Any ideas ?

Re: keep dijit menuitem open after select

RobertScheitlin__GISP — Tue, 26 Jul 2016 20:30:49 GMT

Brain,

There is a lot left to questioning and interpretation here. What TOC (the LayerList dijit, AGSTOC, etc)? It would be way better for you to show your code .

Re: keep dijit menuitem open after select

BrianFoley1 — Wed, 27 Jul 2016 11:13:59 GMT

Good idea Robert, I was a bit vague. Here is my code :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>TOC</title>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/dropit.js"></script>
    <link rel="stylesheet" href="css/dropit.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="agsjs/dijit/css/claro.css">
    <link rel="stylesheet" type="text/css" href="agsjs/dijit/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="agsjs/dijit/css/TOC.css" />

#content { position:fixed; top:32px; width:100%; height:100%; left:0; margin:0; border:0;}

#footer { position: fixed; bottom: 0; width: 100%; height:35px; left:0; background:silver; }

        #map { position:fixed; width:100%; height:100%; border:0; margin-left:-15px; margin-top:-15px; margin-right:-15px; }

    </style>

dojo.require("agsjs.dijit.TOC");

        dojo.require("dijit.Dialog");
        dojo.require("dijit.DropDownMenu");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.MenuBar");
        dojo.require("dijit.MenuBarItem");
        dojo.require("dijit.MenuItem");
        dojo.require("dijit.PopupMenuBarItem");
        dojo.require("esri.layers.FeatureLayer");
        dojo.require("esri.map");
        dojo.require("esri.dijit.Popup");
        dojo.require("esri.dijit.PopupTemplate");

</script>

function init() {

            var initialExtent = new esri.geometry.Extent({
                xmin: -8119646.38042271,
                ymin: 4986891.42830988,
                xmax: -8102329.13378822,
                ymax: 4999699.14992532,
                "spatialReference": {
                    "wkid": 102100
                }
            });
            map = new esri.Map("map", {
                extent: initialExtent
                , smartNavigation: false
                , slider: false
            });

basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);

dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("https://xxxx/ArcGIS/rest/services/xxxx/Contaminated_Areas_or_Facilites/MapServer", { opacity: 0.8 });
dynaLayer2 = new esri.layers.ArcGISDynamicMapServiceLayer("https://xxxx/ArcGIS/rest/services/xxxx/Other_Constraints/MapServer", { opacity: 0.8 });

            var h = dojo.connect(map, 'onLayersAddResult', function (results) {
                dynaLayer1.setVisibleLayers([0]);
                dynaLayer2.setVisibleLayers([0, 1]);

                try {
                    toc = new agsjs.dijit.TOC({
                        map: map,
                        layerInfos:
                        [
                                { layer: dynaLayer1, title: "Contaminated Areas", collapsed: true, slider: false }
                            , { layer: dynaLayer2, title: "Other Constraints", collapsed: true, slider: false }
                        ]
                    }, 'tocDiv');

toc.startup();

dojo.connect(toc, 'onLoad', function () { });

dojo.connect(toc, 'onTOCNodeChecked', function (rootLayer, serviceLayer, checked) {
});

dojo.disconnect(h);
}

                catch (e) {
                    alert(e);
                }

});

            map.addLayers([dynaLayer1, dynaLayer2]);
        }
        dojo.ready(init);
    </script>
</head>

     <div data-dojo-type="dijit/MenuBar" id="header" >
         <div data-dojo-type="dijit/PopupMenuBarItem" style="width:23%;background:silver;border:none;font-family:Calibri;font-size:16px;">
              <span><img src="/images/i_layers_ESRI.png" height="23" width="23" />Map Feature List</span>

             <div data-dojo-type="dijit/DropDownMenu" id="editMenu" style="width:100px;margin-top:-5px;width:100px;background:silver;border:none;">
                 <div data-dojo-type="dijit/MenuItem" style="width:100px;" >
                     <div id="tocDiv" style="height:100%;width:100px;font-family:Calibri;font-size:10px;word-wrap:break-word;"></div>
                 </div>
             </div>

</div>
</div>

</body>
</html>

Re: keep dijit menuitem open after select

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:29:08 GMT

Brain,

A dojo menu item is always going to close the parent menu when clicked on. You need to consider using a DropDownButton or a button that just open a dojo dialog dijit.

Here is your code re-written in AMD style (you need to quit using Legacy style coding) and using a dropdownbutton (I have change map service urls and the location of the toc files):

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>TOC</title>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="agsjs/dijit/css/TOC.css" />
    <style>
        html,
        body {
            height: 98%;
            width: 98%;
            margin: 0;
            padding: 5px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }

        .header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            left: 0;
            background: silver;
        }

        #content {
            position: fixed;
            top: 32px;
            width: 100%;
            height: 100%;
            left: 0;
            margin: 0;
            border: 0;
        }

        #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 35px;
            left: 0;
            background: silver;
        }

        #map {
            position: fixed;
            width: 100%;
            height: 100%;
            border: 0;
            margin-left: -15px;
            margin-top: -15px;
            margin-right: -15px;
        }

        #tocDiv {
          background-color: white;
          padding: 8px;
          overflow: auto;
          max-width: 600px;
          max-height: 500px;
        }
    </style>
    <script type="text/javascript">
        var djConfig = {
            paths: {
                agsjs: "/js/agsjs"
            }
        };
    </script>
    <script src="https://js.arcgis.com/3.17/"></script>

    <script type="text/javascript">
        var map, toc, basemap, dynaLayer1, dynaLayer2;
        require([
            "dojo/dom",
            "dojo/parser",
            "dojo/on",
            "dojo/_base/lang",
            "esri/map",
            "esri/geometry/Extent",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "agsjs/dijit/TOC",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dijit/form/DropDownButton",
            "dojo/domReady!"
        ], function(dom, parser, on, lang,
            Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
            TOC) {
            parser.parse();
            var initialExtent = new Extent({
                xmin: -8119646.38042271,
                ymin: 4986891.42830988,
                xmax: -8102329.13378822,
                ymax: 4999699.14992532,
                "spatialReference": {
                    "wkid": 102100
                }
            });
            map = new Map("map", {
                extent: initialExtent,
                smartNavigation: false,
                slider: false
            });
            basemap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(basemap);
            dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/NapervilleShelters/MapServer", {
                opacity: 0.8
            });
            dynaLayer2 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/LocalGovernment/Recreation/MapServer", {
                opacity: 0.8
            });

            var h = map.on('LayersAddResult', lang.hitch(this, function(results) {
                dynaLayer1.setVisibleLayers([0]);
                dynaLayer2.setVisibleLayers([0, 1]);

                try {
                    toc = new TOC({
                        map: map,
                        layerInfos: [{
                            layer: dynaLayer1,
                            title: "Contaminated Areas",
                            collapsed: true,
                            slider: false
                        }, {
                            layer: dynaLayer2,
                            title: "Other Constraints",
                            collapsed: true,
                            slider: false
                        }]
                    }, 'tocDiv');
                    toc.startup();
                    toc.on('load', function() {});
                    toc.on('TOCNodeChecked', function(rootLayer, serviceLayer, checked) {});
                    h.remove();
                    var myButton = new dijit.form.DropDownButton({
                        label: "Map Feature List",
                        dropDown: toc
                    });
                    dom.byId("dropDownButtonContainer").appendChild(myButton.domNode);
                } catch (e) {
                    alert(e);
                }
            }));
            map.addLayers([dynaLayer1, dynaLayer2]);
        });
    </script>
</head>

<body class="claro">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true">
        <div id="tocDiv" style="display: none;"></div>
        <div id="dropDownButtonContainer" class="header"></div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"></div>
    </div>
    <div id="footer"></div>
</body>

</html>

Re: keep dijit menuitem open after select

BrianFoley1 — Wed, 27 Jul 2016 16:35:15 GMT

Robert,

Thanks for the quick reply. I used the code you modified but this is what I’m getting.

Brian

Re: keep dijit menuitem open after select

RobertScheitlin__GISP — Wed, 27 Jul 2016 17:42:57 GMT

Brain,

As I mentioned the path to the agsjs was changed to match my file location so you need to change the path to match yours. Look at your browsers web console and you will likely see a 400 error.

Re: keep dijit menuitem open after select

BrianFoley1 — Wed, 27 Jul 2016 17:45:28 GMT

Just saw that, it works now. Thanks Robert.

Re: keep dijit menuitem open after select

RobertScheitlin__GISP — Wed, 27 Jul 2016 17:53:16 GMT

Brian,

Be sure to mark the reply that answered your question as the "correct answer" (right now you have marked your reply as the correct answer).

Re: keep dijit menuitem open after select

BrianFoley1 — Wed, 27 Jul 2016 17:55:40 GMT

Just corrected it

Re: keep dijit menuitem open after select

BrianFoley1 — Wed, 27 Jul 2016 19:48:41 GMT

Robert,

I want to add a feature (see below) to the header bar, in addition to the TOC. Should I add another dropdownbutton, or could I add a dropdownmenu ? And if I can add a dropdownmenu, how can I do that.

Re: keep dijit menuitem open after select

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:29:11 GMT

Brain,

Sure here is a sample:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>TOC</title>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="agsjs/dijit/css/TOC.css" />
    <style>
        html,
        body {
            height: 98%;
            width: 98%;
            margin: 0;
            padding: 5px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }

        #header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            left: 0;
            background: silver;
        }

        #content {
            position: fixed;
            top: 32px;
            width: 100%;
            height: 100%;
            left: 0;
            margin: 0;
            border: 0;
        }

        #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 35px;
            left: 0;
            background: silver;
        }

        #map {
            position: fixed;
            width: 100%;
            height: 100%;
            border: 0;
            margin-left: -15px;
            margin-top: -15px;
            margin-right: -15px;
        }

        #tocDiv {
          background-color: silver;
          padding: 8px;
          overflow: auto;
          max-width: 600px;
          max-height: 500px;
        }

        .IdentifyIcon {
            background-image: url("images/Identify.png");
            background-repeat: no-repeat;
            width: 18px;
            height: 18px;
            text-align: center;
        }

        .FindIcon {
            background-image: url("images/query.png");
            background-repeat: no-repeat;
            width: 18px;
            height: 18px;
            text-align: center;
        }

        .claro .dijitButton .dijitButtonNode,
        .claro .dijitDropDownButton .dijitButtonNode,
        .claro .dijitComboButton .dijitButtonNode,
        .claro .dijitToggleButton .dijitButtonNode {
            border: 0;
            padding: 2px 4px 4px 4px;
            color: #000000;
            border-radius: 0;
            box-shadow: none;
            background: none;
        }

        .claro .dijitMenu {
            background-color: silver;
            border: 1px solid gray;
        }
    </style>
    <script type="text/javascript">
        var djConfig = {
            paths: {
                agsjs: "/js/agsjs"
            }
        };
    </script>
    <script src="https://js.arcgis.com/3.17/"></script>

    <script type="text/javascript">
        var map, toc, basemap, dynaLayer1, dynaLayer2;
        require([
            "dojo/dom",
            "dojo/parser",
            "dojo/on",
            "dojo/_base/lang",
            "esri/map",
            "esri/geometry/Extent",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "agsjs/dijit/TOC",
            "dijit/form/DropDownButton",
            "dijit/DropDownMenu",
            "dijit/MenuItem",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function(dom, parser, on, lang,
            Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
            TOC, DropDownButton, DropDownMenu, MenuItem) {
            parser.parse();
            var initialExtent = new Extent({
                xmin: -8119646.38042271,
                ymin: 4986891.42830988,
                xmax: -8102329.13378822,
                ymax: 4999699.14992532,
                "spatialReference": {
                    "wkid": 102100
                }
            });
            map = new Map("map", {
                extent: initialExtent,
                smartNavigation: false,
                slider: false
            });
            basemap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(basemap);
            dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/NapervilleShelters/MapServer", {
                opacity: 0.8
            });
            dynaLayer2 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/LocalGovernment/Recreation/MapServer", {
                opacity: 0.8
            });

            var h = map.on('LayersAddResult', lang.hitch(this, function(results) {
                dynaLayer1.setVisibleLayers([0]);
                dynaLayer2.setVisibleLayers([0, 1]);

                try {
                    toc = new TOC({
                        map: map,
                        layerInfos: [{
                            layer: dynaLayer1,
                            title: "Contaminated Areas",
                            collapsed: true,
                            slider: false
                        }, {
                            layer: dynaLayer2,
                            title: "Other Constraints",
                            collapsed: true,
                            slider: false
                        }]
                    }, 'tocDiv');
                    toc.startup();
                    toc.on('load', function() {});
                    toc.on('TOCNodeChecked', function(rootLayer, serviceLayer, checked) {});
                    h.remove();
                    var myButton = new DropDownButton({
                        label: "Map Feature List",
                        dropDown: toc
                    });
                    dom.byId("header").appendChild(myButton.domNode);

                    var menu = new DropDownMenu({ style: "display: none;"});
                    var menuItem1 = new MenuItem({
                        label: "Identify Feature",
                        iconClass:"IdentifyIcon",
                        onClick: function(){ alert('Identify'); }
                    });
                    var menuItem2 = new MenuItem({
                        label: "Find Building",
                        iconClass:"FindIcon",
                        onClick: function(){ alert('Find'); }
                    });
                    menu.addChild(menuItem1);
                    menu.addChild(menuItem2);
                    var myButton2 = new DropDownButton({
                        label: "Identify Tools",
                        dropDown: menu
                    });

                    dom.byId("header").appendChild(myButton2.domNode);
                } catch (e) {
                    alert(e);
                }
            }));
            map.addLayers([dynaLayer1, dynaLayer2]);
        });
    </script>
</head>

<body class="claro">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true">
        <div id="tocDiv" style="display: none;"></div>
        <div id="header"></div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"></div>
    </div>
    <div id="footer"></div>
</body>

</html>

Re: keep dijit menuitem open after select

BrianFoley1 — Thu, 28 Jul 2016 14:06:46 GMT

Geez Robert that was quick.

As I was thrown into the deep end on this project, with very little experience, your help is greatly appreciated.

Re: keep dijit menuitem open after select

BrianFoley1 — Mon, 01 Aug 2016 14:20:45 GMT

Robert,

Do you know how to change the font size for the layer title in the TOC ?

Brian

Re: keep dijit menuitem open after select

KenBuja — Mon, 01 Aug 2016 14:45:47 GMT

This would be a good time to learn how to use the developers tools (Chrome, Firefox, IE, Edge) within your browser. All of them have tools to inspect elements on your page, where you can see which CSS rule is used.

Re: keep dijit menuitem open after select

RobertScheitlin__GISP — Mon, 01 Aug 2016 17:47:39 GMT

Brian,

What Ken is talking about is (for example in Chrome) you would right click on the layer title in the TOC and choose "Inspect", which would bring up the browsers developer tools and select the span element

<span data-dojo-attach-point="labelNode" class="agsjsTOCRootLayerLabel">Contaminated Areas</span>

Then you would look at the class attribute and see that it is assigned "agsjsTOCRootLayerLabel" then you look for the css rule and file that the rule is coming from (see image):

Now you know you need to look in the TOC.css line 22 to find this css rule and edit it.

Re: keep dijit menuitem open after select

BrianFoley1 — Mon, 01 Aug 2016 17:49:36 GMT

Robert,

I just looked at that now. That is extremely helpful. Thanks.

Brian