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
});
Solved! Go to 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 });
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 });