Intermediate

Adding/Deleting Data Items

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

These methods are true for chart, datatable, list and dataview components. For Tree and treetable look up their documentation.

Adding and deletion is implemented in the form of event taking place on user action. Normally, it is done 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 user in a form, you need to derive this string from the input area and then add data to the desired component. Again, specify everything by their ID. It's a common rule for all methods and event handlers.

Form and HtmlForm components have different code for input fields - look for the library's text control and standard HTML input respectively. It means 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 ID-s of dedicated text fields

Adding data from [HtmlForm]

function addData() {
    $$("data_2").add({
        title: document.getElementById("title").value, //data users enter into an input field 
        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 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 above described methods are as well true for database-connected components. Learn more about server-side integration here .

Back to top