attribute inspector no feature selected

[NadirHussain]

     Dear All on my button click event i am drawing one graphic.and from feature layer selection i am getting one feature that inside on that graphic.i want to open attribute inspector on that featre .my feature is point feature.My programm works fine.but when info window open it shows no feature selected.i am already get the feature from feature layer select feature.so how this feature should open in attarbute inspector..please help.result is shown in attached image.

Thanks

  map.on("load", function (evt) {

                var layerInfos;

                var attInspector;

               $("#myButton").click(function () {

                    pt = new Point("45.42", "23.24", map.SpatialReference);

                    circle = pt;

                    circle = new Circle({

                        center: pt,

                        geodesic: true,

                        radius: 0.25,

                        radiusUnit: "esriMiles"

                    });

                    map.graphics.clear();

                    map.infoWindow.hide();

                    var graphic = new Graphic(circle, circleSymb);

                    map.graphics.add(graphic);

                    var query = new Query();

                    query.geometry = circle.getExtent();

                    teamsFL.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {

                        if (features.length > 0) {

                            //store the current feature

                            updateFeature = features[0];

                            //-----------------------------------------------------------------------//

                            layerInfos = [

                              {

                                  "featureLayer": teamsFL,

                                  'showAttachments': true,

                                  'showDeleteButton': true,

                                  'isEditable': true,

                                  "fieldInfos": [

                                                    { 'fieldName': 'SIREN_NO', 'isEditable': false, 'tooltip': 'Siren Number', 'label': 'Siren Number:' },

                                                    { 'fieldName': 'Reg_A', 'isEditable': false, 'tooltip': 'Region In Arabic', 'label': 'Region In Arabic:' },

                                                    { 'fieldName': 'Reg_E', 'isEditable': false, 'tooltip': 'Region In English', 'label': 'Region In English:' },

                                                    { 'fieldName': 'Prov_A', 'isEditable': false, 'tooltip': 'Governorate Arabic', 'label': 'Governorate In Arabic:' },

                                                    { 'fieldName': 'Prov_E', 'isEditable': false, 'tooltip': 'Governorate English', 'label': 'Governorate In English:' },

                                                    { 'fieldName': 'City_A', 'isEditable': false, 'tooltip': 'City In Arabic', 'label': 'City In Arabic:' },

                                                    { 'fieldName': 'City_E', 'isEditable': false, 'tooltip': 'City In English', 'label': 'City In English:' },

                                                    { 'fieldName': 'Feature_Ty', 'isEditable': true, 'tooltip': 'Featue Type', 'label': 'Feature Type:' },

                                                    { 'fieldName': 'Descriptio', 'isEditable': true, 'tooltip': 'Description For Sirens', 'label': 'Description For Sirens:' },

                                                    { 'fieldName': 'Location', 'isEditable': true, 'tooltip': 'Location', 'label': 'Location:' },

                                                    { 'fieldName': 'POINT_X', 'isEditable': true, 'tooltip': 'Longitude', 'label': 'Longitude:' },

                                                    { 'fieldName': 'POINT_Y', 'isEditable': true, 'tooltip': 'Latitude', 'label': 'Latitude:' },

                                                    { 'fieldName': 'Zone_No', 'isEditable': true, 'tooltip': 'Zone Number', 'label': 'Zone Number:' }

                                  ]

                              }

                            ];

                            attInspector = new AttributeInspector({

                                layerInfos: layerInfos

                            }, domConstruct.create("div"));

                          //add a save button next to the delete button 

                            var saveButton = new Button({ label: "Save", "class": "saveButton atiButton" }, domConstruct.create("div"));

                            domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

                            saveButton.on("click", function () {

                                updateFeature.getLayer().applyEdits(null, [updateFeature], null);

                            });

                           attInspector.on("attribute-change", function (evt) {

                                //store the updates to apply when the save button is clicked 

                                updateFeature.attributes[evt.fieldName] = evt.fieldValue;

                            });

                            attInspector.on("next", function (evt) {

                                updateFeature = evt.feature;

                                console.log("Next " + updateFeature.attributes.objectid);

                            });

                            attInspector.on("delete", function (evt) {

                                evt.feature.getLayer().applyEdits(null, null, [evt.feature]);

                                map.infoWindow.hide();

                            });

                            map.infoWindow.setContent(attInspector.domNode);

                            map.infoWindow.resize(350, 240);

                         //----------------------------------------------------------------------------------//

                            map.infoWindow.setTitle(updateFeature.getLayer().name);

                            map.infoWindow.show(pt, map.getInfoWindowAnchor(pt));

                                              }

                        else {

                            map.infoWindow.hide();

                        }

                    });

             });//button click

          });

[RobertScheitlin__GISP · Accepted solution]

Nadir,

  I think your issue is that you need to do all the attribute inspector initialization outside your feature select event listener:

map.on("load", function (evt) {
  var layerInfos;
  var attInspector;
  //-----------------------------------------------------------------------//
  layerInfos = [
    {
      "featureLayer": teamsFL,
      'showAttachments': true,
      'showDeleteButton': true,
      'isEditable': true,
      "fieldInfos": [
        {
          'fieldName': 'SIREN_NO',
          'isEditable': false,
          'tooltip': 'Siren Number',
          'label': 'Siren Number:'
        },
        {
          'fieldName': 'Reg_A',
          'isEditable': false,
          'tooltip': 'Region In Arabic',
          'label': 'Region In Arabic:'
        },
        {
          'fieldName': 'Reg_E',
          'isEditable': false,
          'tooltip': 'Region In English',
          'label': 'Region In English:'
        },
        {
          'fieldName': 'Prov_A',
          'isEditable': false,
          'tooltip': 'Governorate Arabic',
          'label': 'Governorate In Arabic:'
        },
        {
          'fieldName': 'Prov_E',
          'isEditable': false,
          'tooltip': 'Governorate English',
          'label': 'Governorate In English:'
        },
        {
          'fieldName': 'City_A',
          'isEditable': false,
          'tooltip': 'City In Arabic',
          'label': 'City In Arabic:'
        },
        {
          'fieldName': 'City_E',
          'isEditable': false,
          'tooltip': 'City In English',
          'label': 'City In English:'
        },
        {
          'fieldName': 'Feature_Ty',
          'isEditable': true,
          'tooltip': 'Featue Type',
          'label': 'Feature Type:'
        },
        {
          'fieldName': 'Descriptio',
          'isEditable': true,
          'tooltip': 'Description For Sirens',
          'label': 'Description For Sirens:'
        },
        {
          'fieldName': 'Location',
          'isEditable': true,
          'tooltip': 'Location',
          'label': 'Location:'
        },
        {
          'fieldName': 'POINT_X',
          'isEditable': true,
          'tooltip': 'Longitude',
          'label': 'Longitude:'
        },
        {
          'fieldName': 'POINT_Y',
          'isEditable': true,
          'tooltip': 'Latitude',
          'label': 'Latitude:'
        },
        {
          'fieldName': 'Zone_No',
          'isEditable': true,
          'tooltip': 'Zone Number',
          'label': 'Zone Number:'
        }
      ]
    }
  ];
  attInspector = new AttributeInspector({
    layerInfos: layerInfos
  }, domConstruct.create("div"));

  //add a save button next to the delete button 
  var saveButton = new Button({
    label: "Save",
    "class": "saveButton atiButton"
  }, domConstruct.create("div"));

  domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

  saveButton.on("click", function () {
    updateFeature.getLayer().applyEdits(null, [updateFeature], null);
  });

  attInspector.on("attribute-change", function (evt) {
    //store the updates to apply when the save button is clicked 
    updateFeature.attributes[evt.fieldName] = evt.fieldValue;
  });

  attInspector.on("next", function (evt) {
    updateFeature = evt.feature;
    console.log("Next " + updateFeature.attributes.objectid);
  });

  attInspector.on("delete", function (evt) {
    evt.feature.getLayer().applyEdits(null, null, [evt.feature]);
    map.infoWindow.hide();
  });

  map.infoWindow.setContent(attInspector.domNode);
  map.infoWindow.resize(350, 240);
  //----------------------------------------------------------------------------------//
  $("#myButton").click(function () {
    pt = new Point("45.42", "23.24", map.SpatialReference);
    circle = pt;
    circle = new Circle({
      center: pt,
      geodesic: true,
      radius: 0.25,
      radiusUnit: "esriMiles"
    });

    map.graphics.clear();
    map.infoWindow.hide();
    var graphic = new Graphic(circle, circleSymb);
    map.graphics.add(graphic);
    var query = new Query();
    query.geometry = circle.getExtent();
    teamsFL.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
      if (features.length > 0) {
        //store the current feature
        updateFeature = features[0];
        map.infoWindow.setTitle(updateFeature.getLayer().name);
        map.infoWindow.show(pt, map.getInfoWindowAnchor(pt));
      } else {
        map.infoWindow.hide();
      }
    });
  }); //button click
});