topic Re: Default Editor with Dgrid in ArcGIS JavaScript Maps SDK Questions

Default Editor with Dgrid

RickeyFight — Sat, 11 Dec 2021 19:04:26 GMT

I am not sure what I am doing wrong.

I can edit but nothing shows up in the dgrid.

I am not sure if the code below will post properly here is the script in Edit fiddle - JSFiddle

Any suggestions?

<!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>Emergency Loc</title>


    <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
      }


      body {
        background-color: #fff;
        overflow: hidden;
        font-family: Helvetica, san-serif;
      }


      #templatePickerPane {
        width: 225px;
        overflow: hidden;
      }


      #panelHeader {
        background-color: #92A661;
        border-bottom: solid 1px #92A860;
        color: #FFF;
        font-size: 18px;
        height: 24px;
        line-height: 22px;
        margin: 0;
        overflow: hidden;
        padding: 10px 10px 10px 10px;
      }


      #map {
        margin-right: 5px;
        padding: 0;
      }


      .esriEditor .templatePicker {
        padding-bottom: 5px;
        padding-top: 5px;
        height: 500px;
        border-radius: 0px 0px 4px 4px;
        border: solid 1px #92A661;
      }


      .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content {
        position: relative;
      }
         .dgrid { border: none; height: 100%; }
      .dgrid-column-0 {
        width: 35px;
      }
      .dgrid-row-odd {
        background: #FFFDF3;
      }
      td div img:hover {
        cursor: pointer;
      }
    </style>


    <script src="https://js.arcgis.com/3.15/"></script>
    <script>
      var map, grid;


      require([
        "esri/config",
        "esri/map",
        "esri/SnappingManager",
        "esri/dijit/editing/Editor",
        "esri/layers/FeatureLayer",
        "esri/tasks/GeometryService",
        "esri/toolbars/draw",
        "dojo/keys",
        "dojo/parser","esri/layers/ArcGISDynamicMapServiceLayer","dojo/_base/declare","dgrid/OnDemandGrid","dgrid/Selection","esri/symbols/SimpleFillSymbol","esri/Color","dijit/form/Button",
        "esri/symbols/SimpleMarkerSymbol","dojo/_base/array",
        "dojo/i18n!esri/nls/jsapi",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function (
        esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService,
        Draw, keys, parser,ArcGISDynamicMapServiceLayer,declare,Grid,Selection, SimpleFillSymbol,Color,Button,SimpleMarkerSymbol, arrayUtils, i18n
        ) {


        parser.parse();


        //snapping is enabled for this sample - change the tooltip to reflect this
        i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping";
        i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping";


        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
        //for details on setting up a proxy page.
        esriConfig.defaults.io.proxyUrl = "/proxy/";


        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
        esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
   <!--____________________________________________Dgrid________________________________________________________________--!>
    var StatesGrid = declare([Grid, Selection]);


        var columns = [{
          label: "",  //wasn't able to inject an HTML <div> with image here
          field: "ObjectID",
          formatter: makeZoomButton
        }, {
          label: "Location",
          field: "Location"
        }, {
          label: "Call Type",
          field: "CallType"
        }];


     //restrict sorting to the state name field
        for (var i = 0; i < columns.length; i++) {
          if (i == 1) {
            columns.sortable = true;
          } else {
            columns.sortable = false;
          }
        }


        grid = new StatesGrid({
          bufferRows: Infinity,
          columns: columns
        }, "grid");

  <!--____________________________________________Script________________________________________________________________--!>
        map = new Map("map", {
          basemap: Layer4,
        center: [-122.710375, 42.197994],
          zoom: 14
        });


        map.on("layers-add-result", initEditing);


         var Layer4 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch/MapServer", {
                    opacity: 1
                });
                map.addLayer(Layer4);


                  var Layer7 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer", {
                    visible: true,
                    refreshInterval: 0.3
                });
                Layer7.setVisibleLayers([1]);
   map.addLayer(Layer7);
   
   
        var operationsPointLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
  
        map.addLayers([operationsPointLayer]);
        map.infoWindow.resize(400, 300);


        function initEditing (event) {
          var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {
            return {
            
   
   "featureLayer": layer.layer,
                            "isEditable": true,
                            'showAttachments': true,
                            "showDeleteButton": false,
                            "fieldInfos": [{
                            'fieldName': 'Caller_Name',
                                'isEditable': false,
                                'tooltip': 'Caller Name',
                                'label': 'Caller Name:'
                        }, {
                            'fieldName': 'Priority',
                                'isEditable': true,
                                'tooltip': 'Priority',
                                'label': 'Priority:'
                        }, {
                            'fieldName': 'Location',
                                'isEditable': false,
                                'label': 'Location:'
                        }, {
                            'fieldName': 'Phone',
                                'isEditable': false,
                                'label': 'Phone:'
                        }, {
                            'fieldName': 'Notes',
                                'isEditable': false,
                                'label': 'Notes:'
                        }, {
                            'fieldName': 'CallType',
                                'isEditable': true,
                                'label': 'CallType:'
                        }]
            };
          });


          var settings = {
            map: map,
            layerInfos: featureLayerInfos
          };
          var params = {
            settings: settings
          };
   
  /* var editorWidget = dijit.byId('editorDiv');
if (editorWidget) {
   editorWidget.destroyRecursive(true);
}*/


          var editorWidget = new Editor(params, 'editorDiv');
          editorWidget.startup();


          //snapping defaults to Cmd key in Mac & Ctrl in PC.
          //specify "snapKey" option only if you want a different key combination for snapping
          map.enableSnapping();
        }






   <!--____________________________________________Dgrid________________________________________________________________--!>
              
        //add the states demographic data
        var statesLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer/0", {
          mode: FeatureLayer.MODE_SELECTION,
          outFields: ["OBJECTID", "Priority", "Location", "last_edited_date","CallType"]
        });


           //create Selection Symbol
                        var highlightSymbol = new SimpleMarkerSymbol({
                            "color":[0,112,255,255],
                            "size":10,
                            "angle":0,
                            "xoffset":0,
                            "yoffset":14,
                            "type":"esriSMS",
                            "style":"esriSMSDiamond"
                        });




        statesLayer.on("load", function(evt) {
          var query = new Query();
          query.where = "1=1";
          evt.layer.queryFeatures(query, function(featureSet) {
            var items = array.map(featureSet.features, function(feature) {
              return feature.attributes;
            });


            //idProperty must be set manually if value is something other than 'id'
            var memStore = new Memory({
              data: items,
              idProperty: "ObjectID"
            });
            window.grid.set("store", memStore);
            window.grid.set("sort", "Location");


            grid.on(".field-ObjectID:click", function(e) {
              //retrieve the ObjectId when someone clicks on the magnifying glass
              if (e.target.alt) {
                zoomRow(e.target.alt);
              }
            });
          });
        });


        map.addLayers([statesLayer]);


        function makeZoomButton(id) {
          //set the feature 'id' as the alt value for the image so that it can be used to query below
          var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'";
          zBtn = zBtn + " width='18' height='18'></div>";
          return zBtn;
        }
        
    //center at the selected feature on the map from the row in the data grid
  function zoomRow(id) {
            statesLayer.clearSelection();
            var query = new Query();
            query.objectIds = [id];
            statesLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
                //re-centre map to zoom to the selected feature
                map.centerAt(features[0].geometry); //using centerAt()
                //map.centerAndZoom(features[0].geometry, 14); //using centerAndZoom()
            });
        }

      });
    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">
     <div id="grid"></div>
        <div id="panelHeader">
          Default Editor
        </div>
        <div style="padding:10px;" id="editorDiv">
        </div>

      </div>
    </div>
  </body>


</html>

Re: Default Editor with Dgrid

thejuskambi — Thu, 03 Dec 2015 17:47:14 GMT

can you share something more, like error message or code?

Re: Default Editor with Dgrid

RickeyFight — Thu, 03 Dec 2015 17:47:49 GMT

Ya the code will not post look at the jsfiddle I just posted.

Edit fiddle - JSFiddle

I also get this error:

When I post the question this is what it looks like:

Re: Default Editor with Dgrid

RobertScheitlin__GISP — Thu, 03 Dec 2015 17:48:16 GMT

Rickey,

I am not seeing anything in your post. Did you forget to use the advanced editor and syntax highlighting?

Re: Default Editor with Dgrid

RobertScheitlin__GISP — Thu, 03 Dec 2015 18:03:40 GMT

Rickey,

The issue with that error you posted is that you are calling "initEditing" on "layers-add-result" and thus is is getting called more than once and inside that function you are doing a new editor widget, thus the error.

Re: Default Editor with Dgrid

RickeyFight — Thu, 03 Dec 2015 18:18:22 GMT

Robert,

Is this error stopping the dgrid from displaying?

Re: Default Editor with Dgrid

RobertScheitlin__GISP — Thu, 03 Dec 2015 18:26:06 GMT

No, you are missing the requires for Query and Memory and are using array instead of arrayUtil

Re: Default Editor with Dgrid

RickeyFight — Thu, 03 Dec 2015 18:47:29 GMT

Robert,

I have now added Query and Memory.

I also changed array to arrayUtil in the script.

The fields in dgrid are still not showing up.

Do you have any other suggestions?

Thank you

Re: Default Editor with Dgrid

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:04:30 GMT

Rickey,

Here is all my corrections:

<!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>Emergency Loc</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
    }

    body {
      background-color: #fff;
      overflow: hidden;
      font-family: Helvetica, san-serif;
    }

    #templatePickerPane {
      width: 225px;
      overflow: hidden;
    }

    #panelHeader {
      background-color: #92A661;
      border-bottom: solid 1px #92A860;
      color: #FFF;
      font-size: 18px;
      height: 24px;
      line-height: 22px;
      margin: 0;
      overflow: hidden;
      padding: 10px 10px 10px 10px;
    }

    #map {
      margin-right: 5px;
      padding: 0;
    }

    .esriEditor .templatePicker {
      padding-bottom: 5px;
      padding-top: 5px;
      height: 500px;
      border-radius: 0px 0px 4px 4px;
      border: solid 1px #92A661;
    }

    .dj_ie .infowindow .window .top .right .user .content,
    .dj_ie .simpleInfoWindow .content {
      position: relative;
    }

    .dgrid {
      border: none;
      height: 100%;
    }

    .dgrid-column-0 {
      width: 35px;
    }

    .dgrid-row-odd {
      background: #FFFDF3;
    }

    td div img:hover {
      cursor: pointer;
    }
  </style>

  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map, grid;

    require([
      "esri/config",
      "esri/map",
      "esri/SnappingManager",
      "esri/dijit/editing/Editor",
      "esri/layers/FeatureLayer",
      "esri/tasks/GeometryService",
      "esri/toolbars/draw",
      "dojo/keys",
      "dojo/parser", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "esri/symbols/SimpleFillSymbol", "esri/Color", "dijit/form/Button",
      "esri/symbols/SimpleMarkerSymbol", "dojo/_base/array",
      "dojo/i18n!esri/nls/jsapi",
      "esri/tasks/query",
      "dojo/store/Memory",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService,
      Draw, keys, parser, ArcGISDynamicMapServiceLayer, declare, Grid, Selection, SimpleFillSymbol, Color, Button, SimpleMarkerSymbol,
       arrayUtils, i18n, Query, Memory
    ) {

      parser.parse();

      //snapping is enabled for this sample - change the tooltip to reflect this
      i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping";
      i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping";

      //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
      //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
      //for details on setting up a proxy page.
      esriConfig.defaults.io.proxyUrl = "/proxy/";

      //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
      esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      <!--____________________________________________Dgrid________________________________________________________________--!>
      var StatesGrid = declare([Grid, Selection]);

      var columns = [{
        label: "", //wasn't able to inject an HTML <div> with image here
        field: "OBJECTID",
        formatter: makeZoomButton
      }, {
        label: "Location",
        field: "Location"
      }, {
        label: "Call Type",
        field: "CallType"
      }];

      //restrict sorting to the state name field
      for (var i = 0; i < columns.length; i++) {
        if (i == 1) {
          columns.sortable = true;
        } else {
          columns.sortable = false;
        }
      }

      grid = new StatesGrid({
        bufferRows: Infinity,
        columns: columns
      }, "grid");

      <!--____________________________________________Script________________________________________________________________--!>
      map = new Map("map", {
        basemap: Layer4,
        center: [-122.710375, 42.197994],
        zoom: 14
      });

      map.on("layers-add-result", initEditing);

      var Layer4 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch/MapServer", {
        opacity: 1
      });
      map.addLayer(Layer4);

      var Layer7 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer", {
        visible: true,
        refreshInterval: 0.3
      });
      Layer7.setVisibleLayers([1]);
      map.addLayer(Layer7);


      var operationsPointLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/FeatureServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"]
      });

      map.addLayers([operationsPointLayer]);
      map.infoWindow.resize(400, 300);

      function initEditing(event) {
        var featureLayerInfos = arrayUtils.map(event.layers, function(layer) {
          return {
            "featureLayer": layer.layer,
            "isEditable": true,
            'showAttachments': true,
            "showDeleteButton": false,
            "fieldInfos": [{
              'fieldName': 'Caller_Name',
              'isEditable': false,
              'tooltip': 'Caller Name',
              'label': 'Caller Name:'
            }, {
              'fieldName': 'Priority',
              'isEditable': true,
              'tooltip': 'Priority',
              'label': 'Priority:'
            }, {
              'fieldName': 'Location',
              'isEditable': false,
              'label': 'Location:'
            }, {
              'fieldName': 'Phone',
              'isEditable': false,
              'label': 'Phone:'
            }, {
              'fieldName': 'Notes',
              'isEditable': false,
              'label': 'Notes:'
            }, {
              'fieldName': 'CallType',
              'isEditable': true,
              'label': 'CallType:'
            }]
          };
        });

        var settings = {
          map: map,
          layerInfos: featureLayerInfos
        };
        var params = {
          settings: settings
        };

        var editorWidget = new Editor(params, 'editorDiv');
        editorWidget.startup();

        //snapping defaults to Cmd key in Mac & Ctrl in PC.
        //specify "snapKey" option only if you want a different key combination for snapping
        map.enableSnapping();
      }
      
      <!--____________________________________________Dgrid________________________________________________________________--!>

      //add the states demographic data
      var statesLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer/0", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"]
      });

      //create Selection Symbol
      var highlightSymbol = new SimpleMarkerSymbol({
        "color": [0, 112, 255, 255],
        "size": 10,
        "angle": 0,
        "xoffset": 0,
        "yoffset": 14,
        "type": "esriSMS",
        "style": "esriSMSDiamond"
      });

      statesLayer.on("load", function(evt) {
        var query = new Query();
        query.where = "1=1";
        query.outFields = ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"];
        query.returnGeometry = true;
        statesLayer.queryFeatures(query, function(featureSet) {
          var items = arrayUtils.map(featureSet.features, function(feature) {
            return feature.attributes;
          });

          //idProperty must be set manually if value is something other than 'id'
          var memStore = new Memory({
            data: items,
            idProperty: "ObjectID"
          });
          window.grid.set("store", memStore);
          window.grid.set("sort", "Location");

          grid.on(".field-OBJECTID:click", function(e) {
            //retrieve the ObjectId when someone clicks on the magnifying glass
            if (e.target.alt) {
              zoomRow(e.target.alt);
            }
          });
        }, function(error){
          console.info(error);
        });
      });

      map.addLayer(statesLayer);

      function makeZoomButton(id) {
        //set the feature 'id' as the alt value for the image so that it can be used to query below
        var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'";
        zBtn = zBtn + " width='18' height='18'></div>";
        return zBtn;
      }

      //center at the selected feature on the map from the row in the data grid
      function zoomRow(id) {
        statesLayer.clearSelection();
        var query = new Query();
        query.objectIds = [id];
        console.info(id);
        statesLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
          //re-centre map to zoom to the selected feature
          map.centerAt(features[0].geometry); //using centerAt()
          //map.centerAndZoom(features[0].geometry, 14); //using centerAndZoom()
        });
      }

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" id="templatePickerPane" data-dojo-props="region:'left',width:'180px'">
      <div id="grid"></div>
      <div id="panelHeader">
        Default Editor
      </div>
      <div style="padding:10px;" id="editorDiv">
      </div>

    </div>
  </div>
</body>

</html>

Re: Default Editor with Dgrid

RickeyFight — Thu, 03 Dec 2015 18:57:53 GMT

Robert,

Thank you!