How to launch attributeInspector from grid click when using Editor

1895
1
Jump to solution
01-25-2016 12:56 PM
TracySchloss
Frequent Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
TracySchloss
Frequent Contributor

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.

View solution in original post

0 Kudos
1 Reply
TracySchloss
Frequent Contributor

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.

0 Kudos