Datatable refresh data

Webix JS
#1

Good day ,

i have a small problem with insert operation in datatable.
The problem is that the first time when i add a new row webix sends me a POST request with ‘webix_operation insert’ as it should. After that when i try to edit the newly added row (without refreshing the table) , it keeps sending me the same POST request with insert operation. In order it to send me ‘update’ operation i have to refresh the page.

Is there a way to refresh the table each time when i update/insert or delete something?

#2

fixed it with onAfterAdd event and window.location.reload();

Doesnt look very good when the page reloads , but works.

#3

Hello,

actually, page reload is a too bulky solution for this task.

Webix data components replace client-side ids for the newly added items with the server-side ones as normally the server generates unique ids. DataProcessor listens to this id change and replaces the old id with new one from the response:

//response
{ "id":"123145644453", "status":"success", "newid":"8" }

If you want to work with the newly added item immediately, you need to catch the moment when id has already been changed, e.g. on DataProcessor onAfterAdd event:

save: {
    //DataProcessor configuration
    url:url,
    on:{
       onAfterInsert:function(state, id, data){  webix.message(state.newid); }
    }
}

http://webix.com/snippet/04d8fd4d

If you want to visualize id change, use updateFromResponse property, which will repaint the row: http://webix.com/snippet/b5689497

Btw, in case of user editing, the problem should not occur as users need some time to edit the item after it has been added. Try editing the newly added item with the dedicated editor: http://webix.com/snippet/61869a35

#4

I have the same problem with a GraphQL table. I’ve tried the first snippet, but I can never see the “real id” message. I’ve edited the film title, pressed Enter, but nothing happens.

#5

Hello @dandv ,

In this case,
You can check the state of the obj as (where id is mentioned too):

rules:{
    $obj:function(obj){
      console.log(obj);
      return true;
      
    }
  },

https://snippet.webix.com/codup5v8