This sample demonstrates how to edit using the FeatureTable widget while also enabling pagination. In this example, editable data is enabled for editing within the widget. In order to enable this, the table's editingEnabled property must be set to true. Once set, the cell values within the table can be updated via a double-click.
Note that the service hosting the data must be enabled to allow editing. In this particular example, full editing privileges are granted on the data. It is also possible to restrict edit functionality even further at the field level. This is done by setting the table's FieldColumnTemplate.editable property to false within the table's field configurations. In this sample, the Case No. field is restricted to not allow editing.
In addition to showing tabular editing, this sample also demonstrates how to display and manage attachments within the FeatureTable by setting attachmentsEnabled to true. If the layer supports attachments, any attachments associated with a feature displays within the attachments column that is appended to the end of the table. Pagination is achieved by setting the paginationEnabled property to true.
Lastly, sorting on multiple columns is enabled by setting multiSortEnabled to true.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
view.when(() => {
// Create the feature layer
featureLayer = new FeatureLayer({
portalItem: {
id: "3807c58dd48c4d32810042d8edf4a2fe"
},
outFields: ["*"],
title: "Chicago crime incidents"
});
map.add(featureLayer);
// Create the feature table
const featureTable = new FeatureTable({
view: view, // This must be set to enable highlight in the map
layer: featureLayer,
multiSortEnabled: true, // Set this to enable sorting on multiple columns
attachmentsEnabled: true // This must be set to enable attachments in the table
editingEnabled: true, // This must be set to enable editing in the table
tableTemplate: { // autocast to TableTemplate
columnTemplates: [ // takes an array of GroupColumnTemplate and FieldColumnTemplate
{ // autocast to GroupColumnTemplate
type: "group",
label: "Crime details",
columnTemplates: [
{ // autocast to FieldColumnTemplate
type: "field",
fieldName: "Primary_Type",
label: "Crime type"
},
{
type: "field",
fieldName: "Arrest",
label: "Arrest"
},
{
type: "field",
fieldName: "incident_date",
label: "Date of incident"
}]
},
{ // autocast to GroupColumnTemplate
type: "group",
label: "Record information",
columnTemplates: [
{ // autocast to FieldColumnTemplate
type: "field",
fieldName: "Case_Number",
label: "Case No.",
editable: false // read only
}]
}]
},
container: document.getElementById("tableDiv")
});
...Known Limitations
For a comprehensive list of limitations, please refer to the widget's API Reference documentation.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4