Hwo to use dGrid sample with points instead of shapes

MarcoHeinrich

Hi,
I am referring to this sample: http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/fl_dgrid

My code looks like this right now:

// dojo's layout dijits and the parser to auto-create the dijits
require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane"]);

// bring in dgrid, esri and dojo modules
// create the grid and the map
// then parse the dijit layout dijits
/// <reference path="jsapi_vsdoc10_v33.js" />

require(["dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "esri/map", "esri/layers/FeatureLayer", "dojo/_base/declare", "dojo/number", "dojo/parser", "dojo/domReady!"],
      function (Grid, Selection, Memory, Map, FeatureLayer, declare, dojoNum, parser) {
          // call the parser to create the dijit layout dijits
          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: {
                  "OBJECTID": "ID",
                  "SAN_ERFOR": "Sanierung erforderlich",
                  "GEFAHR": "Gefahr",
                  "STATUS": "Status"
              }
          }, "grid");
          // add a click listener on the ID column
          grid.on(".field-id:click", selectState);

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

          window.statesUrl = "http://defg1gis01/ArcGIS/rest/services/hws/MapServer/1";
          window.outFields = ["OBJECTID", "SAN_ERFOR", "GEFAHR", "STATUS"];
          var fl = new FeatureLayer(window.statesUrl, {
              id: "states",
              mode: 1, // ONDEMAND, could also use esri.layers.FeatureLayer.MODE_ONDEMAND
              outFields: window.outFields
          });
          dojo.connect(fl, "onLoad", function (fl) {
              fl.maxScale = 0; 
              fl.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
          });
          dojo.connect(fl, "onClick", selectGrid);
          map.addLayer(fl);

          dojo.connect(map, "onLoad", function (map) {
              // show the border container now that the dijits 
              // are rendered and the map has loaded
              dojo.style(dijit.byId("container").domNode, "visibility", "visible");
              populateGrid(Memory); // pass a reference to the MemoryStore constructor
          });
      }
    );

function populateGrid(Memory) {
    var qt = new esri.tasks.QueryTask(window.statesUrl);
    var query = new esri.tasks.Query();
    query.where = "1=1";
    query.returnGeometry = true;
    query.outFields = window.outFields;
    qt.execute(query, function (results) {
        var data = dojo.map(results.features, function (feature) {
            return {
                // property names used here match those used when creating the dgrid
                "OBJECTID": feature.attributes[window.outFields[0]],
                "SAN_ERFOR": feature.attributes[window.outFields[1]],
                "GEFAHR": feature.attributes[window.outFields[2]],
                "STATUS": 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("states");
    var query = new esri.tasks.Query();
    query.objectIds = [parseInt(e.target.innerHTML)];
    fl.selectFeatures(query, esri.layers.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 esri.tasks.Query();
    query.objectIds = [id];
    var states = map.getLayer("states");
    states.selectFeatures(query, esri.layers.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();
}

There are several problems with it, compared to the functionality of the live sample.

1) I can click on the symbols, which are displayed, but then this specific point disappears from the map (no rendering style for selected?)

2) When clicking on a point, the dgrid does not jump to the specific row, to display the data.

3)When clicking on a row, the map does not center on the designated point.

4)Only 125 rows do get loaded/display.


It would be nice, if you could help me out with those problems.

Kind regards.

YamunadeviRathinasamy

I resolved "4)Only 125 rows do get loaded/display." by the following code.

You Memory is missing id field. that is the reason the grid not displaying more than 125 records.

In your case set OBJETCID is id field for Memory.

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

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