AnsweredAssumed Answered

Hwo to use dGrid sample with points instead of shapes

Question asked by mheinrich86 on Jan 27, 2013
Latest reply on Jun 21, 2017 by yamuna83
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.

Outcomes