AnsweredAssumed Answered

How to launch attributeInspector from grid click when using Editor

Question asked by schlot on Jan 25, 2016
Latest reply on Jan 26, 2016 by schlot

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.

Outcomes