I want to prevent datatable editor to save the entered data directly into a row object. Instead I want to handle saving data myself. How to do it?
Hello @maug,
I want to prevent datatable editor to save the entered data directly into a row object.
Could you please elaborate a little bit? Do you want to send the data to the server manually instead of it being sent automatically after you are done editing? Or are you looking to cancel the default editing behaviour altogether and update the row manually with the data you’ve been given?
Hi @Dzmitry,
By “saving” I mean writing it to the underlying JS object.
My scenario:
- User confirms value in the datatable editor (presses enter or clicks outside)
- Validate the entered data before saving, preventing the editor to close in case of error, and displaying the error (I already figured out how to do it in onBeforeEditStop)
- If there is no error, get the data from editor, do something with it (write manually to underlying JS object) and close editor (editor should just close without writing the data)
While I’m not completely sure how you could “prevent” the editing process completely, you can revert the changes done when editing, which essentially looks as if the editing was cancelled (by using the onBeforeEditStop event you’ve already discovered). This also allows you to get access to the value inside of your editor, and write it to the corresponding data item.
Please take a look at the following example: https://snippet.webix.com/9siu5rvs.
Thanks @Dzmitry,
Although value in JS object stays the same, it will overwrite any changes to the field I would do in line 10. For example, I’d like an empty string from editor to be written to object as null. How to do it?
Ok, it seems that I made the problem overcomplicated 
I just assign o.value = null in such case, thanks @Dzmitry
@Dzmitry, one more thing - is there a way to recognize the action which triggered datatable editor to write the data? I want to know if it was Enter key, Tab key or click outside editor.
Unfortunately, I don’t think there is a way to know this. Basically, any of these actions will call the onBlur event, which will then in turn trigger the setValue() method of the built-in editor. During this whole chain, none of the information regarding the pressed key (or a mouse click) is being passed on.
@Dzmitry, maybe the other way around - is there a way to define which of these actions should save the value and which should cancel edit?
All of these actions are handled by the UIManager. It is possible to attach your own custom logic to a certain hotkey and perform the needed actions this way. Naturally, there are some predefined keys with their own logic. Using the methods provided by the UIManager API, it is possible to delete these default hotkeys and add new ones.
As an example: https://snippet.webix.com/rmj8utjr. Please note that we are removing the global hotkey here, as this is the one responsible for saving the data. In general, I would never recommend replacing the default hotkey logic (mostly in cases when it’s tied to inner logic, i.e. “Tab”). You can read more about custom hotkeys in this article.
Thank you! @Dzmitry is it possible to add custom hotkey handler BEFORE the default one and allow/prevent execution of the subsequent one (in this case the default) by returning suitable return value or call some method?
I didn’t find any possible way to intercept this behaviour, hence why I was suggesting the deletion of the default hotkey first. The only way to modify this behaviour is by modifying the source code, I’d wager (where you would be able to set the default hotkey functionality).
Do you consider implementing such functionality in webix (queue of hotkey handlers)? Without it I find it impossible to, for example, preventing Esc to close some specific windows, without loosing the default Esc behaviour in other components.