Component items can be edited within the component itself, within its rows and cells, provided that the component is switched to editable mode.
Data updating allows for editing info in dedicated input fields like UI text. It works regardless of the component's editability state.
Updating process happens in two stages:
1 . Placing selected data to some editor (ui-related text or dedicated HTML input field) with the help of an attached event.
<input type="text" id="value" style='width:300px' value="new value" />
...
$$('mylist').attachEvent("onAfterSelect", function(id) {
var value = this.getItem(id).title;
document.getElementById("value").value = value;
}); // as a result, the item title from the dataset appears in the text field
2 . Saving the edited data back to the component. It is implemented with an update function that takes ID of selected item as argument. Called from component object, it is included into the complex update function.
function update_item() {
var data = $$('data'); // ID of the data-presenting component
var sel = data.getSelectedId(true);
if (!sel) return; //if nothing is selected, there's nothing to update!
var value = document.getElementById("value").value; //deriving new value from the input
for (var i = 0; i < sel.length; i++) {
var item = data.getItem(sel[i]);
item.title = value; //setting the new value for the item
data.updateItem(sel[i], item); //the dataset is updated!
}
}
Related sample: Server-side Integration: Dataview
Data binding helps greately simplify the process and makes editing of several item values convenient. It ensures that a data component (dataview, list, etc.) transmits data to a form / htmlform each time an item there is selected.
More info on Data Binding
$$('htmlform1').bind($$('listA'));
The function above makes list a datasource for form, so when an item in the list is selected, the form is filled. Input names in the form must coincide with item properties from teh initial dataset (those you include into #hash signs# within data template) for the list.
Having finished editing data in form fields, call the save function to push new data into the list.
<input type="button" value="Submit" onclick='$$("htmlform1").save()'/>
The same functionality is used when updating data items loaded from the database. Read about Server-side Integration in the corresponding chapter of the documentation.
Back to top