Adding/Deleting Data Items

Here you should make use of the add() and remove() methods included into your custom functions.

Adding and deletion are implemented in the form of events taking place on a user action. Normally, they happen on clicking the button with a corresponding label.

Basic Adding and Deleting

Basic syntax here looks as follows:

$$("myview").add({
    id:"item_id",  // adding  an item with two properties
    property:"some_value"
});
$$("myview").remove("item_id"); // to delete a single item
 
$$("myview").remove(["idA","idB","idC","idD"]); // to delete multiple items

Adding User Data from Form

To add an item which is a string entered by a user in a form, you need to derive this string from the input area and then add the data to the desired component. Again, specify everything by their ID. It's a common rule for all methods and event handlers.

The Form and HTMLForm components have different code for input fields. Look at the example with the library's text control and standard HTML input respectively. It shows that different methods are used to get data from them:

Adding Data from JS Form

function addData(){
    $$("data_1").add({
        user:$$('form1').getValues().user, 
        email:$$('form1').getValues().email,
    }, 0);
} // 'user' and 'mail' are IDs of dedicated text fields

Adding data from [HtmlForm]

function addData() {
 $$("data_2").add({
    title: document.getElementById("title").value, // the data user enters into input 
    year: document.getElementById("year").value 
 },0)
}

Deletion of Selected Items

Since only selected items can be deleted, set the select parameter to true (select: true) during the initialization of the component. Before removal let's check whether an item is selected with the help of the simplest if-else statement.

Deletion of one item

function removeData(){ 
    if(!$$("data").getSelectedId()){
        webix.message("No item is selected!");
        return; //'data' is an ID of the needed component
    }
    $$("data").remove($$("data").getSelectedId());
};

Related sample:  Adding/Removing Items

Deletion of several items

In the multiselect mode several items from the dataset can be selected. To remove all selected items, make use of a for-loop:

function remove_item(){
    var list = $$('mylist');
    var sel = list.getSelectedId(true);
    if (!sel) return;
    for (var i = 0; i < sel.length; i++)
    list.remove(sel[i]);
};

All the items can be removed from the component with the help of the following code:

$$("mylist").clearAll();

The clearAll method can take an optional boolean parameter that allows preserving some parameters of a data view, e.g. the x-scroll state in a datatable or an url used for dynamic loading for any data view. To enable this possibility, pass true to the method:

$$("mylist").clearAll(true);

Back to top