Community

keep dijit menuitem open after select

3101
15
Jump to solution
07-26-2016 12:03 PM
BrianFoley1
by
New Contributor II
‎07-26-2016 12:03 PM

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 ?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-28-2016 06:58 AM

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>

View solution in original post

15 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-26-2016 01:30 PM

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 .

0 Kudos
BrianFoley1
by
New Contributor II
‎07-27-2016 04:13 AM

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" />

<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; }
         
    </style>

    <script type="text/javascript">
        //==============================================
        $(document).ready(function () {
            $('.menu').dropit();
        });
        //==============================================
        var djConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "agsjs",
                "location": location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs'
            }]
        };
        //==============================================
    </script>

    <script src="agsjs/dijit/init.js" ></script>       
    <script src="agsjs/dijit/TOC.js"></script>
       
    <script type="text/javascript">

        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>

    <link rel="stylesheet" href="css/claro.css">

<script>dojoConfig = { async: true, parseOnLoad: true }</script>
    <script src='http://dojotoolkit.org/reference-guide/_static/js/dojo/dojo.js'></script>

    <script type="text/javascript">
        var map, toc, basemap, dynaLayer1, dynaLayer2, dynaLayer3, dynaLayer4, dynaLayer5, dynaLayer6, popup, SimpleMarkerSymbol, popup;
        var toolbar, Popup, domClass, domConstruct, Dialog;
     

        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>

<body class="claro">

     <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>

     <div id="content" data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="true">
         <div id="map" data-dojo-type="dijit.layout.ContentPane" region="center"></div>
     </div>

     <div id="footer"></div>

</body>
</html>

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-27-2016 08:40 AM

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>
BrianFoley1
by
New Contributor II
‎07-27-2016 09:35 AM

Robert,

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

Brian

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-27-2016 10:42 AM

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.

0 Kudos
BrianFoley1
by
New Contributor II
‎07-27-2016 10:45 AM

Just saw that, it works now. Thanks Robert.

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-27-2016 10:53 AM

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).

0 Kudos
BrianFoley1
by
New Contributor II
‎07-27-2016 10:55 AM

Just corrected it

0 Kudos
BrianFoley1
by
New Contributor II
‎07-27-2016 12:48 PM

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.

0 Kudos