Dojo DataGid doesnot show in Infowindow

DeepikaJain1 · ‎11-30-2016

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();

RobertScheitlin__GISP · ‎12-01-2016

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

View solution in original post

KenBuja · ‎12-01-2016

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

RobertScheitlin__GISP · ‎12-01-2016

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

DeepikaJain1 · ‎12-05-2016

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