How to launch attributeInspector from grid click when using Editor

TracySchloss — Sun, 12 Dec 2021 02:18:01 GMT

My editor widget works when I click on a feature to edit. I also have a grid list of the features. When the user clicks in the grid, I'd like it to launch the attributeInspector.

I've seen examples that open the domNode of the attributeInspector. In this case, I'm not constructing an attributeInspector, I've created a Editor widget and the attributeInspector is just part of it.

My grid is declared as:

   initGrid: function (gridid,gridDiv){
        var grid = new (declare([OnDemandGrid, Selection, Keyboard]))({
           id: gridid,
           selectionMode: 'single',
           showHeader: false,
           renderRow: function (obj){
            var template = '<div class="gridTitle gridInfo">${0}</div><div class="details gridInfo">${1}</div> <div class="details gridInfo"> ${2}</div><div class="details gridInfo">Phone: ${3}</div><div class="details gridInfo">Cell: ${4}</div>';
               return domConstruct.create("div", {
               innerHTML: dojoString.substitute(template, [obj.name, obj.address, obj.city,obj.phone, obj.cell])
               });
          },
           loadingMessage: 'Loading data...',
           noDataMessage: 'No staff located in this area.'
         }, gridDiv);
         grid.startup();
         return grid;
      }

The grid contents update on an extent change. I've tried reaching into the Editor to get to attributeInspector, but this line isn't working for me.

 updateGrid: function(){

        var queryParams = new Query();
        queryParams.geometry = app.currentExtent;
        queryParams.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
        queryParams.outFields = ["Name", "Address", "City", "Phone", "Cell", "OBJECTID"];
        queryParams.outSpatialReference = app.spatialReference;
        var queryTask = new QueryTask(app.eusLayer.url);
        queryTask.on('error', queryErrorHandler);
        queryTask.execute(queryParams, updateGridHandler);
        
        function queryErrorHandler(err){
          console.log("error in queryTask is " + err.error);
        }
        function updateGridHandler(featureSet){
          var data = [];
          if (app.grid) {
            app.grid.refresh();
          }
          data = arrayUtils.map(featureSet.features, function(feature){
            var cellTest = feature.attributes.Cell;
            var cellNumber = "";
            if (cellTest) {
              cellNumber = cellTest;
            } else{
              cellNumber = "N/A"
            }
            return {
              'id': feature.attributes.OBJECTID,
              'name': feature.attributes.Name,
              'address': feature.attributes.Address,
              'city': feature.attributes.City,
              'phone': feature.attributes.Phone,
              'cell': cellNumber
            };
          });
          var currentMemory = new Memory({
            data: data,
            idProperty: 'id'
        });
       app.grid.set('store',currentMemory);
          app.grid.sort('name');
          
          app.grid.on('.dgrid-row:click', function(event){
            var row = app.grid.row(event);
            var query = new Query();
            query.objectIds = [row.data.id];
           app.eusLayer.selectFeatures(query).then(function(results){
                var resultGeometry = results[0].geometry;
               /*
                app.map.infoWindow.setFeatures(results);
                app.map.infoWindow.show(resultGeometry);
              */
            app.map.infoWindow.setTitle("Staff Information");
            app.map.infoWindow.setContent(app.myEditor.attributeInspector.domNode);//doesn't work
            app.map.infoWindow.show(resultGeometry);


            });
          });
        }
      }
);
          });

My editor is defined as:

  initEditor: function (evt, geometryService, map) {
    var layers = [];
       var templatePicker = new TemplatePicker({
            featureLayers: [app.eusLayer],
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();


        layers.push({featureLayer: app.eusLayer });
     
 var settings = {
            map: map,
            templatePicker: templatePicker,
            geometryService: geometryService,
            layerInfos: layers,
            toolbarVisible: false
          };


          var params = { settings: settings };
          app.myEditor = new Editor(params, 'editorDiv');

          app.myEditor.startup();
}

I might not need as much configuration as I have for it. I only have one layer I'm trying to edit.

Re: How to launch attributeInspector from grid click when using Editor

TracySchloss — Tue, 26 Jan 2016 21:04:49 GMT

Showing the infoWindow was enough. I shouldn't have been setting the infoWindow content. The grid click definition:

app.grid.on('.dgrid-row:click', function(event){

var row = app.grid.row(event);

var query = new Query();

query.objectIds = [row.data.id];

app.eusLayer.selectFeatures(query).then(function(results){

var resultGeometry = results[0].geometry;

app.map.infoWindow.show(resultGeometry);

});

The infoWindow opens as an attributeInspector.

topic Re: How to launch attributeInspector from grid click when using Editor in ArcGIS JavaScript Maps SDK Questions

How to launch attributeInspector from grid click when using Editor

Re: How to launch attributeInspector from grid click when using Editor