Insert/Remove row from datatable (parse datacollection)

Webix JS
1

Hi forum,

I’m making some tests with the example of webix jet (jet-demos-04_server) in which I’ve added only a button to remove row of a datatable.

I’ve seen that if a remove a row of datatable by using remove method, the row is removed graphically but the rest DELETE request to server is not executed. Instead, if I use the remove method of the datacollection, everything works. This seems due to the lack of save url when parse method is used to load datacollection into datatable. In fact, if I add the url to the save property of datatable too, it works.

However, I’ve noticed that with webix 3.0 (version of the example) no errors are shown, instead, with webix 4.2 an error is shown: “TypeError: undefined is not an object (evaluating ‘this.pull[e].id=e’)”.

This behavior is the same for add method (insert row; POST request). The only action that works is to edit cells (PUT request).

Is this behavior supposed to be correct? I don’t think so…

Thanks in advance

2

Hello,

For proper view-collection cooperation you need to tune both of them in a slightly different way.

Firsty, if you decide in favour of such pattern, you need to pass loading and saving tasks entirely to DataCollection

var store = new webix.DataCollection({
  	save: "...",
	url: "..."
});

Seconly, you need to use the sync(), not parse() method to connect the view to the collection. Parsing is a one-time operation, while syncing will interlink the data: all changes in the collection will be reflected by the view:

$$("table").sync(store);

And you will need to perform the add/remove/update operations in the collection, not the view:

store.remove(id);
store.add({...});

You can test everything in the snippet below: https://webix.com/snippet/f9c2e4d2