I have used the 'attribute table' widget to display the table, and it worked but when I set the property 'editable' to true, and I start editing nothing is edited and I get an error in the console saying "Can't complete this operation" meanwhile editing works for layers.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>FeatureTable - Custom Menu Items</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/geometry/Extent",
"esri/graphicsUtils",
"esri/tasks/query",
"esri/symbols/PictureMarkerSymbol",
"esri/map",
"dojo/dom",
"dojo/parser",
"dojo/ready",
"dojo/on",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function (
FeatureLayer, FeatureTable, Extent, graphicsUtils, Query, PictureMarkerSymbol, Map,
dom, parser, ready, on, ContentPane, BorderContainer
) {
parser.parse();
ready(function(){
var map = new Map("map",{
basemap: "dark-gray",
center: [-5.80, 35.75],
zoom: 12
});
//Load a FeatureTable to the application once map loads
map.on("load", loadTable);
function loadTable(){
// editable FeatureLayer
var myFeatureLayer = new FeatureLayer("......./FeatureServer/4", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true,
id: "fLayer2"
});
// set a selection symbol for the featurelayer
myFeatureLayer.setSelectionSymbol(selectionSymbol);
// listen to featurelayer click event to handle selection
// from layer to the table.
// when user clicks on a feature on the map, the corresponding
// record will be selected in the table.
myFeatureLayer.on("click", function(evt) {
var idProperty = myFeatureLayer.objectIdField,
feature,
featureId,
query;
if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
feature = evt.graphic,
featureId = feature.attributes[idProperty];
query = new Query();
query.returnGeometry = false;
query.objectIds = [featureId];
query.where = "1=1";
myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
}
});
// Redlands police vehicle locations layer
// this layer is an editable layer
map.addLayer(myFeatureLayer);
//create new FeatureTable and set its properties
var myFeatureTable = new FeatureTable({
featureLayer : myFeatureLayer,
map : map,
editable: true,
syncSelection: true,
dateOptions: {
datePattern: 'M/d/y',
timeEnabled: true,
timePattern: 'H:mm',
},
// use fieldInfos object to change field's label (column header),
// change the editability of the field, and to format how field values are displayed
// you will not be able to edit callnumber field in this example.
fieldInfos: [
{
name: 'objectid',
alias: 'Identifiant',
editable: false //disable editing on this field
},
{
name: 'zone',
alias: "Zone",
format: {
template: "${value} mph" //add mph at the of the value
}
},
{
name: 'type',
alias: "le type"
},
{
name: 'etat_abime',
alias: 'Etat abimé'
}
],
// add custom menu functions to the 'Options' drop-down Menu
menuFunctions: [
{
label: "Filter Available Emergency Vehicles",
callback: function(evt){
console.log(" -- evt: ", evt);
// set definition expression on the layer
// show only available emergency vehicles
myFeatureLayer.setDefinitionExpression("type = '240L'");
// call FeatureTable.refresh() method to re-fetch features
// from the layer. Table will only show records that meet
// layer's definition expression creteria.
myFeatureTable.refresh();
}
},{
label: "Show All Emergency Vehicles",
callback: function(evt){
console.log(" -- evt: ", evt);
myFeatureLayer.setDefinitionExpression("1=1");
myFeatureTable.refresh();
}
}]
}, 'myTableNode');
myFeatureTable.startup();
// listen to refresh event
myFeatureTable.on("refresh", function(evt){
console.log("refresh event - ", evt);
});
}
});
});
</script>
</head>
<body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
<div id="map"></div>
</div>
<div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%;">
<div id="myTableNode"></div>
</div>
</div>
</body>
</html>
