Custom Feature layer on loading on dgrid

GaneshSolai_Sambandam · ‎09-25-2013

Hi Guys,
Can you anyone help look into my code below and find out why custom feature layer service isn't loading on to the Data grid.

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>Map with a Dojo dGrid</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojo/resources/dojo.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/dgrid.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/skins/tundra.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">   <style>     html, body {        height: 100%;        width: 100%;        margin: 0;        padding: 0;        overflow: hidden;     }     #container {        height: 100%;        visibility: hidden;     }     #bottomPane { height: 200px; }     #grid { height: 100%; }     .dgrid { border: none; }     .field-id { cursor: pointer; }   </style>    <script src="http://js.arcgis.com/3.6/"></script>   <script>       // load dgrid, esri and dojo modules       // create the grid and the map       // then parse the dijit layout dijits       require([         "dojo/ready",         "dgrid/OnDemandGrid",         "dgrid/Selection",         "dojo/store/Memory",         "dojo/_base/array",         "dojo/dom-style",         "dijit/registry",         "esri/map",         "esri/layers/FeatureLayer",         "esri/symbols/SimpleFillSymbol",         "esri/tasks/QueryTask",         "esri/tasks/query",         "dojo/_base/declare",         "dojo/number",         "dojo/on",         "dojo/parser",         "dijit/layout/BorderContainer",         "dijit/layout/ContentPane"       ], function (           ready,           Grid,           Selection,           Memory,           array,           domStyle,           registry,           Map,           FeatureLayer,           SimpleFillSymbol,           QueryTask,           Query,           declare,           dojoNum,           on,           parser         ) {           ready(function () {                parser.parse();                // create the dgrid               window.grid = new (declare([Grid, Selection]))({                   // use Infinity so that all data is available in the grid                   bufferRows: Infinity,                   columns: {                       "BankName": "Bank Name",                       "BankAddres": "Bank Address",                       "Manager": "Manager Name",                       "Time": "Opening Time"                   }               }, "grid");               // add a click listener on the ID column               grid.on(".field-BankName:click", selectState);                window.map = new Map("map", {                   basemap: "streets",                   center: [-101.426, 42.972],                   zoom: 4               });            //    window.statesUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4";           //    window.outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW1M_CY"];                infoSBITemplate = new InfoTemplate("SBI Bank Locations", "Bank Name: ${BankName}<br/>" + "Bank Address: ${BankAddres}<br/>" + "Manager Name: ${Manager}<br/>" + "Opening Time: ${Time}");                window.flSBIUrl = "http://services1.arcgis.com/rHig23wEINZ1MKYI/arcgis/rest/services/SBI_BankLocation/FeatureServer/0";               window.outFields = ["BankName", "BankAddres", "Manager", "Time"];                var fl = new FeatureLayer(window.flSBIUrl, {                //   BankName: "SBIBank",                   mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND                   outFields: window.outFields               });                fl.on("load", function () {                  // fl.maxScale = 0; // show the states layer at all scales                //   fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));               });                fl.on("click", selectGrid);                // change cursor to indicate features are click-able               fl.on("mouse-over", function () {                   map.setMapCursor("pointer");               });               fl.on("mouse-out", function () {                   map.setMapCursor("default");               });                map.addLayer(fl);                map.on("load", function (evt) {                   // show the border container now that the dijits                    // are rendered and the map has loaded                   domStyle.set(registry.byId("container").domNode, "visibility", "visible");                   populateGrid(Memory); // pass a reference to the MemoryStore constructor               });                function populateGrid(Memory) {                   var qt = new QueryTask(window.flSBIUrl);                   var query = new Query();                   query.where = "1=1";                   query.returnGeometry = false;                   query.outFields = window.outFields;                   qt.execute(query, function (results) {                       var data = array.map(results.features, function (feature) {                           return {                               // property names used here match those used when creating the dgrid                               "BankName": feature.attributes[window.outFields[0]],                               "BankAddres": feature.attributes[window.outFields[1]],                               "Manager": feature.attributes[window.outFields[2]],                               "Time": feature.attributes[window.outFields[3]]                           }                       });                       var memStore = new Memory({ data: data });                       window.grid.set("store", memStore);                   });               }               // fires when a row in the dgrid is clicked               function selectState(e) {                   // select the feature                   var fl = map.getLayer("SBIBank");                   var query = new Query();                   query.objectIds = [parseInt(e.target.innerHTML)];                   fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) {                       if (result.length) {                           // re-center the map to the selected feature                           window.map.centerAt(result[0].geometry.getExtent().getCenter());                       } else {                           console.log("Feature Layer query returned no features... ", result);                       }                   });               }                // fires when a feature on the map is clicked               function selectGrid(e) {                   var id = e.graphic.attributes.OBJECTID;                   // select the feature that was clicked                   var query = new Query();                   query.objectIds = [id];                   var states = map.getLayer("SBIBank");                   states.selectFeatures(query, FeatureLayer.SELECTION_NEW);                   // select the corresponding row in the grid                   // and make sure it is in view                   grid.clearSelection();                   grid.select(id);                   grid.row(id).element.scrollIntoView();               }           }         );       });   </script> </head>  <body class="tundra">   <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">     <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>     <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div>     </div>   </div> </body> </html>

JonathanUihlein · ‎09-25-2013

You need to load the InfoTemplate module.

require(["esri/InfoTemplate", ... ], function(InfoTemplate, ... ){ ... });

As soon as I put the module into your require block, the dgrid loaded and it looked great!

View solution in original post

JonathanUihlein · ‎09-25-2013

You need to load the InfoTemplate module.

require(["esri/InfoTemplate", ... ], function(InfoTemplate, ... ){ ... });

As soon as I put the module into your require block, the dgrid loaded and it looked great!

GaneshSolai_Sambandam · ‎09-25-2013

Hi Jon
thanks for your help,
it worked and loaded on to my dgrid.

I got an another problem,when I select a row on the dgrid, it doesn't zoom to extent of the point feature.

I would appreciate your help. thanks in advance

regards
Ganesh

JonathanUihlein · ‎09-25-2013

Hey Ganesh!

Glad to help.

I looked at your code for a few more minutes and you are on the right track.
I saw two things you may want to change, though.

You may run into trouble with dgrid and select events because your memory store doesn't have a uniqueid set for each feature (or datarow).

Change this line:

var memStore = new Memory({ data: data });

to this:

 var memStore = new Memory({ data: data, idProperty: "BankAddres" });

This is assuming all of the BankAddres names will be unique; otherwise, you should have another attribute for each feature that represents a uniqueid. You'll now notice that you can successfully select one row in your grid (but it will not zoom to the feature's extent because that code needs tweaking).

Secondly, I see you are calling an event here:

grid.on(".field-BankName:click", selectState);

I would change that to:

grid.on("dgrid-select", function(event){ 
 var rowID = event.rows[0].id; //reference to the selected row.
 var rowInMemory = window.grid.store.get(rowID[0].id); //reference to the row in memory
 // do feature layer stuff here
});

This gives you more freedom and relieves potential scope issues (I see you've assigned the grid to window.grid; this is very helpful for debugging but not optimal in production environments).

GaneshSolai_Sambandam · ‎09-25-2013

Hi Jon,
I changed the code as per your suggestion, but didn't work. Also, you said that widow.grid is not optimal for production environments. So, what is best method adopted in production environment.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
  <style>
    html, body { 
      height: 100%; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      overflow: hidden;
    }
    #container { 
      height: 100%; 
      visibility: hidden;
    }
    #bottomPane { height: 200px; }
    #grid { height: 100%; }
    .dgrid { border: none; }
    .field-id { cursor: pointer; }
  </style>

  <script src="http://js.arcgis.com/3.6/"></script>
  <script>
      // load dgrid, esri and dojo modules
      // create the grid and the map
      // then parse the dijit layout dijits
      require([
        "dojo/ready",
        "dgrid/OnDemandGrid",
        "dgrid/Selection",
        "dojo/store/Memory",
        "dojo/_base/array",
        "dojo/dom-style",
        "dijit/registry",
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/InfoTemplate",
        "dojo/_base/declare",
        "dojo/number",
        "dojo/on",
        "dojo/parser",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane"
      ], function (
          ready,
          Grid,
          Selection,
          Memory,
          array,
          domStyle,
          registry,
          Map,
          FeatureLayer,
          SimpleFillSymbol,
          QueryTask,
          Query,
          InfoTemplate,
          declare,
          dojoNum,
          on,
          parser
        ) {
          ready(function () {

              parser.parse();

              // create the dgrid
              window.grid = new (declare([Grid, Selection]))({
                  // use Infinity so that all data is available in the grid
                  bufferRows: Infinity,
                  columns: {
                      "id": "ID",
                      "bankName": "Bank Name",
                      "bankAddres": "Bank Address",
                      "manager": "Manager Name",
                      "time": "Opening Time"
                  }
              }, "grid");
              // add a click listener on the ID column
              //grid.on(".field-id:click", selectState);

              grid.on("dgrid-select", function (event) {
                  var rowID = event.rows[0].id; //reference to the selected row.
                  var rowInMemory = window.grid.store.get(rowID[0].id); //reference to the row in memory
                  // do feature layer stuff here

                  var fl = map.getLayer("SBI_BankLocation");
                  var query = new Query();
                  //query.objectIds = [parseInt(e.target.innerHTML)];
                  query.objectIds = [rowID];
                  fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) {
                      if (result.length) {
                          // re-center the map to the selected feature
                          window.map.centerAt(result[0].geometry.getExtent().getCenter());
                      } else {
                          console.log("Feature Layer query returned no features... ", result);
                      }
                  });
              });

              window.map = new Map("map", {
                  basemap: "streets",
                  center: [-101.426, 42.972],
                  zoom: 4
              });

          //    window.statesUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4";
          //    window.outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW1M_CY"];

              infoSBITemplate = new InfoTemplate("SBI Bank Locations", "Bank Name: ${BankName}<br/>" + "Bank Address: ${BankAddres}<br/>" + "Manager Name: ${Manager}<br/>" + "Opening Time: ${Time}");

              window.flSBIUrl = "http://services1.arcgis.com/rHig23wEINZ1MKYI/arcgis/rest/services/SBI_BankLocation/FeatureServer/0";
              window.outFields = ["id", "BankName", "BankAddres", "Manager", "Time"];

              var fl = new FeatureLayer(window.flSBIUrl, {
                 id: "SBI_BankLocation",
                  mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
                  outFields: window.outFields,
                  infoTemplate: infoSBITemplate
              });

             fl.on("load", function () {
                 fl.maxScale = 0; // show the states layer at all scales
               //   fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
              });

              fl.on("click", selectGrid);

              // change cursor to indicate features are click-able
              fl.on("mouse-over", function () {
                  map.setMapCursor("pointer");
              });
              fl.on("mouse-out", function () {
                  map.setMapCursor("default");
              });

              map.addLayer(fl);

              map.on("load", function (evt) {
                  // show the border container now that the dijits 
                  // are rendered and the map has loaded
                  domStyle.set(registry.byId("container").domNode, "visibility", "visible");
                  populateGrid(Memory); // pass a reference to the MemoryStore constructor
              });

              function populateGrid(Memory) {
                  var qt = new QueryTask(window.flSBIUrl);
                  var query = new Query();
                  query.where = "1=1";
                  query.returnGeometry = false;
                  query.outFields = window.outFields;
                  qt.execute(query, function (results) {
                      var data = array.map(results.features, function (feature) {
                          return {
                              // property names used here match those used when creating the dgrid
                              "id": feature.attributes[window.outFields[0]],
                              "bankName": feature.attributes[window.outFields[1]],
                              "bankAddres": feature.attributes[window.outFields[2]],
                              "manager": feature.attributes[window.outFields[3]],
                              "time": feature.attributes[window.outFields[4]]
                          }
                      });
                      var memStore = new Memory({ data: data, idProperty: "id"});
                      window.grid.set("store", memStore);
                  });
              }
              // fires when a row in the dgrid is clicked
              function selectState(e) {
                  // select the feature
                  var fl = map.getLayer("SBI_BankLocation");
                  var query = new Query();
                  query.objectIds = [parseInt(e.target.innerHTML)];
                  fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) {
                      if (result.length) {
                          // re-center the map to the selected feature
                          window.map.centerAt(result[0].geometry.getExtent().getCenter());
                      } else {
                          console.log("Feature Layer query returned no features... ", result);
                      }
                  });
              }

              // fires when a feature on the map is clicked
              function selectGrid(e) {
                  var id = e.graphic.attributes.id;
                  // select the feature that was clicked
                  var query = new Query();
                  query.objectIds = [id];
                 var states = map.getLayer("SBI_BankLocation");
                  states.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                  // select the corresponding row in the grid
                  // and make sure it is in view
                  grid.clearSelection();
                  grid.select(id);
                  grid.row(id).element.scrollIntoView();
              }
          }
        );
      });
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
    <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div>
    </div>
  </div>
</body>
</html>

JonathanUihlein · ‎09-25-2013

I would just define grid within the context of the require block, rather than at the window (global) level.

Basically, just change:

window.grid = new (declare([Grid, Selection]))({
                  // use Infinity so that all data is available in the grid
                  bufferRows: Infinity,
                  columns: {
                      "id": "ID",
                      "bankName": "Bank Name",
                      "bankAddres": "Bank Address",
                      "manager": "Manager Name",
                      "time": "Opening Time"
                  }
              }, "grid");

to

var grid = new (declare([Grid, Selection]))({
                  // use Infinity so that all data is available in the grid
                  bufferRows: Infinity,
                  columns: {
                      "id": "ID",
                      "bankName": "Bank Name",
                      "bankAddres": "Bank Address",
                      "manager": "Manager Name",
                      "time": "Opening Time"
                  }
              }, "grid");

You won't be able to access the 'grid' variable outside of your require block, which is why assigning grid to window.grid makes debugging much easier when using FireBug or WebDevToolbars.

After making the idProperty change, were you able to select a single row in your grid?
Before, the rows remained highlighted, even when selecting a different row.
That's the functionality I was targeting; you're really close to getting it all to work now.

GaneshSolai_Sambandam · ‎09-26-2013

Hi Jon
When I changed the code from window.grid to grid the data didn't populate into dgrid.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
  <style>
    html, body { 
      height: 100%; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      overflow: hidden;
    }
    #container { 
      height: 100%; 
      visibility: hidden;
    }
    #bottomPane { height: 200px; }
    #grid { height: 100%; }
    .dgrid { border: none; }
    .field-id { cursor: pointer; }
  </style>

  <script src="http://js.arcgis.com/3.6/"></script>
  <script>
      // load dgrid, esri and dojo modules
      // create the grid and the map
      // then parse the dijit layout dijits
      require([
        "dojo/ready",
        "dgrid/OnDemandGrid",
        "dgrid/Selection",
        "dojo/store/Memory",
        "dojo/_base/array",
        "dojo/dom-style",
        "dijit/registry",
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/InfoTemplate",
        "dojo/_base/declare",
        "dojo/number",
        "dojo/on",
        "dojo/parser",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane"
      ], function (
          ready,
          Grid,
          Selection,
          Memory,
          array,
          domStyle,
          registry,
          Map,
          FeatureLayer,
          SimpleFillSymbol,
          QueryTask,
          Query,
          InfoTemplate,
          declare,
          dojoNum,
          on,
          parser
        ) {
          ready(function () {

              parser.parse();

              // create the dgrid
              var grid = new (declare([Grid, Selection]))({
                  // use Infinity so that all data is available in the grid
                  bufferRows: Infinity,
                  columns: {
                      "id": "ID",
                      "bankName": "Bank Name",
                      "bankAddres": "Bank Address",
                      "manager": "Manager Name",
                      "time": "Opening Time"
                  }
              }, "grid");
              // add a click listener on the ID column
             grid.on(".field-id:click", selectState);

          /* grid.on("dgrid-select", function (event) {
                  var rowID = event.rows[0].id; //reference to the selected row.
                  var rowInMemory = grid.store.get(rowID[0].id); //reference to the row in memory
                  // do feature layer stuff here

                  var fl = map.getLayer("SBI_BankLocation");
                  var query = new Query();
                  //query.objectIds = [parseInt(e.target.innerHTML)];
                  query.objectIds = [rowID];
                  fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) {
                      if (result.length) {
                          // re-center the map to the selected feature
                          map.centerAt(result[0].geometry.getExtent().getCenter());
                      } else {
                          console.log("Feature Layer query returned no features... ", result);
                      }
                  });
              }); */

              map = new Map("map", {
                  basemap: "streets",
                  center: [-101.426, 42.972],
                  zoom: 4
              });

          //    window.statesUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4";
          //    window.outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW1M_CY"];

             var infoSBITemplate = new InfoTemplate("SBI Bank Locations", "Bank Name: ${BankName}<br/>" + "Bank Address: ${BankAddres}<br/>" + "Manager Name: ${Manager}<br/>" + "Opening Time: ${Time}");

           var flSBIUrl = "http://services1.arcgis.com/rHig23wEINZ1MKYI/arcgis/rest/services/SBI_BankLocation/FeatureServer/0";
            var outFields = ["id", "BankName", "BankAddres", "Manager", "Time"];

              var fl = new FeatureLayer(flSBIUrl, {
                 id: "SBI_BankLocation",
                  mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
                  outFields: outFields,
                  infoTemplate: infoSBITemplate
              });

             fl.on("load", function () {
                 fl.maxScale = 0; // show the states layer at all scales
               //   fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
              });

              fl.on("click", selectGrid);

              // change cursor to indicate features are click-able
              fl.on("mouse-over", function () {
                  map.setMapCursor("pointer");
              });
              fl.on("mouse-out", function () {
                  map.setMapCursor("default");
              });

              map.addLayer(fl);

              map.on("load", function (evt) {
                  // show the border container now that the dijits 
                  // are rendered and the map has loaded
                  domStyle.set(registry.byId("container").domNode, "visibility", "visible");
                  populateGrid(Memory); // pass a reference to the MemoryStore constructor
              });

              function populateGrid(Memory) {
                  var qt = new QueryTask(flSBIUrl);
                  var query = new Query();
                  query.where = "1=1";
                  query.returnGeometry = false;
                  query.outFields = outFields;
                  qt.execute(query, function (results) {
                      var data = array.map(results.features, function (feature) {
                          return {
                              // property names used here match those used when creating the dgrid
                              "id": feature.attributes[outFields[0]],
                              "bankName": feature.attribute[outFields[1]],
                              "bankAddres": feature.attributes[outFields[2]],
                              "manager": feature.attributes[outFields[3]],
                              "time": feature.attributes[outFields[4]]
                          }
                      });
                //      var memStore = new Memory({ data: data, idProperty: "id" });
                      var memStore = new Memory({ data: data });

                     grid.set("store", memStore);
                  });
              }
              // fires when a row in the dgrid is clicked
              function selectState(e) {
                  // select the feature
                  var fl = map.getLayer("SBI_BankLocation");
                  var query = new Query();
                  query.objectIds = [parseInt(e.target.innerHTML)];
                  fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) {
                      if (result.length) {
                          // re-center the map to the selected feature
                          map.centerAt(result[0].geometry.getExtent().getCenter());
                      } else {
                          console.log("Feature Layer query returned no features... ", result);
                      }
                  });
              }

              // fires when a feature on the map is clicked
              function selectGrid(e) {
                  var id = e.graphic.attributes.BankAddres;
                  // select the feature that was clicked
                  var query = new Query();
                  query.objectIds = [id];
                 var states = map.getLayer("SBI_BankLocation");
                  states.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                  // select the corresponding row in the grid
                  // and make sure it is in view
                  grid.clearSelection();
                  grid.select(id);
                  grid.row(id).element.scrollIntoView();
              }
          }
        );
      });
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
    <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div>
    </div>
  </div>
</body>
</html>

JonathanUihlein · ‎09-26-2013

Just looked; it seems you've changed something else.

I tested it and it works with your original code.

JonathanUihlein · ‎09-26-2013

It seems you changed this code:

                  var data = array.map(results.features, function (feature) {
                          return {
                              // property names used here match those used when creating the dgrid
                              "id": feature.attributes[outFields[0]],
                              "bankName": feature.attribute[outFields[1]],
                              "bankAddres": feature.attributes[outFields[2]],
                              "manager": feature.attributes[outFields[3]],
                              "time": feature.attributes[outFields[4]]
                          }
                      });

You wrote 'attribute' instead of 'attributes.' Change that and it works.

If you are having trouble with errors like these, you could use a try/catch block to more easily identify the problem.

If you have any additional issues, it might be better to open a new thread.

GaneshSolai_Sambandam · ‎09-27-2013

thanks jon. I figured that one myself, but anyway, really grateful to you for wonderful support and looking into this.

My code works fine on separate html file and loads perfectly on the dgrid. But, When I tried to integrate the same code, with my actual application, data fail to load on them, I end up getting parser error and the IDE reports Object doesn't support property or method
parser.parse()

Do you know what might be the problem.