Intermediate

Data Updating

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 data for selected items can be implemented in two ways:

  • one by one - with the help of updateItem() function;
  • in groups - by pushing data from the bound Form / HTMLForm. Data Binding

UpdateItem() Function

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

Form / HTMLform binding

Data binding helps greatly 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 data source 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()'/>

Related sample:  Data Binding

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