topic Troubles getting Dojox datagrid to work right in ArcGIS JavaScript Maps SDK Questions

Troubles getting Dojox datagrid to work right

LouieDowney_III — Tue, 03 May 2011 17:10:59 GMT

I'm having some problems with the datagrid.

When I try to add a datagrid to my page, it breaks and nothing displays after the header and the init function never gets called.

however, if I comment out the dojox.mobile.parser and instead use dojo.parser, then the page displays just fine, except the button event handler gets called two times.

This is really rudimentary, but I can't seem to figure out what I've got wrong here. Any help would be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel='stylesheet' type="text/css" href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/mobile/themes/iPhone/iPhone.css' >
    <link rel='stylesheet' type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/mobile/themes/buttons.css">
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/grid/resources/claroGrid.css">


    <!-- ArcGIS API for JavaScript -->
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2compact"></script>
    
    <script type="text/javascript">
        /*************
        * Dojo stuff
        *************/
        dojo.require("dojox.mobile");
        dojo.require("esri.map");
        // Works without datagrid
        dojo.require("dojox.mobile.parser");

        // Works with datagrid, but button event triggers 2x
        //dojo.require("dojo.parser");

        // this breaks things
        dojo.require("dojox.grid.DataGrid");


        // Initilize the map
        dojo.addOnLoad(init);

        // Setup and configure global variables
        var map, initExtent;
        initExtent = new esri.geometry.Extent({ "xmin": 244598, "ymin": 6241389, "xmax": 278995, "ymax": 6264320, "spatialReference": { "wkid": 102100} });


        function init() {

            map = new esri.Map("map", { extent: initExtent });
            tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", { id: "Base", opacity: 1, visible: true });
            map.addLayer(tiledLayer);

            var resizeTimer;
            dojo.connect(dijit.byId('map'), 'onLoad', function (theMap) {
                dojo.connect(dijit.byId('map'), 'resize', function () {
                    //resize the map if the div is resized
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    }, 500);
                });
            });
        }

        function TestButton() {
            alert("test.");
        }

    </script>
</head>
<body class="claro">
    <div id="vwMap" dojoType="dojox.mobile.View" selected="true" style="width:100%; height:100%;">
        <h1 dojoType="dojox.mobile.Heading" id="mapHeading" back="Search Results" moveTo="vwSearchResults"></h1>
        <div style="position:absolute; right:5px; top:48px; z-index:999">
            <button dojoType="dojox.mobile.Button" onClick="TestButton();" id="btnMapToggle">Button</button>
        </div>
        <div id="map" style="width:100%; height:80%;"></div>
       
    </div>
</body>
</html>

Re: Troubles getting Dojox datagrid to work right

HemingZhu — Sat, 11 Dec 2021 21:12:15 GMT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel='stylesheet' type="text/css" href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/mobile/themes/iPhone/iPhone.css' >
    <link rel='stylesheet' type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/mobile/themes/buttons.css">
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/grid/resources/claroGrid.css">


    <!-- ArcGIS API for JavaScript -->
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2compact"></script>
    
    <script type="text/javascript">
        /*************
        * Dojo stuff
        *************/
        dojo.require("dojox.mobile");
        dojo.require("esri.map");
        // Works without datagrid
        dojo.require("dojox.mobile.parser");

        // Works with datagrid, but button event triggers 2x
        //dojo.require("dojo.parser");

        // this breaks things
        dojo.require("dojox.grid.DataGrid");


        // Initilize the map
        dojo.addOnLoad(init);

        // Setup and configure global variables
        var map, initExtent;
        initExtent = new esri.geometry.Extent({ "xmin": 244598, "ymin": 6241389, "xmax": 278995, "ymax": 6264320, "spatialReference": { "wkid": 102100} });


        function init() {

            map = new esri.Map("map", { extent: initExtent });
            tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", { id: "Base", opacity: 1, visible: true });
            map.addLayer(tiledLayer);

            var resizeTimer;
            dojo.connect(dijit.byId('map'), 'onLoad', function (theMap) {
                dojo.connect(dijit.byId('map'), 'resize', function () {
                    //resize the map if the div is resized
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    }, 500);
                });
            });
        }

        function TestButton() {
            alert("test.");
        }

    </script>
</head>
<body class="claro">
    <div id="vwMap" dojoType="dojox.mobile.View" selected="true" style="width:100%; height:100%;">
        <h1 dojoType="dojox.mobile.Heading" id="mapHeading" back="Search Results" moveTo="vwSearchResults"></h1>
        <div style="position:absolute; right:5px; top:48px; z-index:999">
            <button dojoType="dojox.mobile.Button" onClick="TestButton();" id="btnMapToggle">Button</button>
        </div>
        <div id="map" style="width:100%; height:80%;"></div>
       
    </div>
</body>
</html>

Since you are using dojox.mobile.parser. I would put dojox.mobile.parser.parse(); in the beginning of the init() to explicitly dojox.mobile.paser to parse the page and comment out the following portion:

<script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        }
    </script>

It should solve the issue.

Re: Troubles getting Dojox datagrid to work right

LouieDowney_III — Wed, 11 May 2011 14:10:59 GMT

Thanks, that seems to have resolved the issue. I thought I had tried that before posting, but clearly I didn't.