topic Re: Dojo DataGid doesnot show in Infowindow in ArcGIS JavaScript Maps SDK Questions

Dojo DataGid doesnot show in Infowindow

DeepikaJain1 — Thu, 01 Dec 2016 07:27:47 GMT

Hi I am trying place my datagrid into map infowindow but it doesnot show up, where as all the other contents do come up such as buttons etc.

here is the snippet of code:

var cp1 = new ContentPane({

title: "Expired VBB Report",

style: "width:500px;height:500px;"

// innerHTML:"this is test"

});

var myMemoryStore = new Memory(

{ data: [

{ 'id': '0', 'lastname': 'Frank' },

{ 'id': '1', 'lastname': 'Herbert'}]

});

var myObjectStore = new ObjectStore({ objectStore: myMemoryStore });

var myStructure = [

{ type: "dojox.grid._CheckBoxSelector" },

[

{ 'name': 'Column 1', 'field': 'id', 'width': '20%' },

{ 'name': 'Column 2', 'field': 'lastname', 'width': '20%', formatter: this.createLink }

]

];

var ShowVBBGrid = new DataGrid({

//id:'ShowVBBGrid',

store: myObjectStore,

structure: myStructure,

autoHeight: true

//selectionMode: "single",

// style: "width:400px;height:400px;display:block"

});

dojo.place(ShowVBBGrid.domNode, cp1.containerNode, 'first');

// cp1.set("content", ShowVBBGrid.domNode);

ShowVBBGrid.startup();

this.map.infoWindow.setTitle("Section58 Values");

this.map.infoWindow.resize(600, 500);

this.map.infoWindow.setContent(cp1.containerNode);

this.map.infoWindow.show();

Re: Dojo DataGid doesnot show in Infowindow

KenBuja — Thu, 01 Dec 2016 14:46:10 GMT

Are there error messages in the console? Can you show more of your code?

Finally, DataGrid has been deprecated and you should move to using dGrid (v 1.1 or v 0.3).

Re: Dojo DataGid doesnot show in Infowindow

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:23:15 GMT

Deepika,

Here is a sample that shows how to use the new v 1.1 dgrid in the map info window:

<!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>Basemap gallery</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/dgrid1/css/dgrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            padding: 0;
        }

        .dgrid {
          height: 180px;
        }

        .dgrid .field-id {
            width: 20%;
        }
        
        .dgrid .field-lastname {
            width: 70%;
        }

        .dgrid .field-col1 {
          width: 10%;
        }

    </style>

    <script src="http://js.arcgis.com/3.18/"></script>
    <script>
        var map;
        require([
            "dojo/_base/declare", "dojo/on", "esri/map",
            "dojo/parser",
            "dstore/Memory",
            "dgrid1/OnDemandGrid",
            "dgrid1/Selector",
            "dgrid1/extensions/DijitRegistry",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dijit/TitlePane",
            "dojo/domReady!"
        ], function(
            declare, on, Map,
            parser, Memory, Grid, Selector, DijitRegistry, BorderContainer, ContentPane
        ) {
            parser.parse();

            map = new Map("map", {
                basemap: "topo",
                center: [-105.255, 40.022],
                zoom: 13
            });

            map.on("load", function(){
              var cp1 = new ContentPane({
                  title: "Expired VBB Report",
                  style: "width:500px;height:200px;"
              });

              var data = [
                {
                  'oid': '0',
                  'lastname': 'Frank'
                }, {
                  'oid': '1',
                  'lastname': 'Herbert'
                }
              ];
              var store = new Memory({ data: data });

              var dataGrid = new(declare([Grid, Selector, DijitRegistry]))({
                  id: "dgrid_1",
                  bufferRows: Infinity,
                  selectionMode: "none",
                  collection: store,
                  columns: {
                    col1: { label:"", selector: 'checkbox'},
                    oid: { label: "Id"},
                    lastname: { label: "Last Name"}
                  }
              });

              cp1.addChild(dataGrid);
              cp1.startup();
              　
              map.infoWindow.setTitle("Section58 Values");
              map.infoWindow.resize(530, 320);
              map.infoWindow.setContent(cp1.domNode);
              map.infoWindow.show();
              dataGrid.resize();
            });
        });
    </script>
</head>

<body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0;">
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">
        </div>
    </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Dojo DataGid doesnot show in Infowindow

DeepikaJain1 — Tue, 06 Dec 2016 05:02:12 GMT

Thanks Rob for all the help and efforts, it worked magically