This is a migrated thread and some comments may be shown as answers.

async in event handlers?

1 Answer 1272 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Troy
Top achievements
Rank 1
Troy asked on 16 Jul 2018, 08:57 PM

Say I have an event handler function defined for a grid's beforeEdit event:

beforeEdit: function(e) {
    deferredpromise = doSomethingAsync(e.sender, e.model);

     // we'll return back here immediately, while whatever async stuff we started is still executing

     // and we'll return to Kendo from here before it is done 

}

The code in doSomethingAsync() does an AJAX call, among other things.  As far as I can tell, there's no way to have this work inside a Kendo event like beforeEdit?  My function is going to return immediately, and even if I return a promise, Kendo isn't designed in any way to take it back and wait on it before continuing with preparing the editor?  And there's no way short of somehow blocking on Javascript's execution while waiting for my ajax to complete (a horrible no-no) to prevent returning control to Kendo from the beforeEdit handler?

The problem I'm trying to solve is others making changes being made to the underlying remote database on records being displayed in the grid.  If "myAttribute" starts out as "123" when the page is loaded, then someone else somehow modifies that to "456", if the first person edits the record to change something else, the stale "123" value will be sent out and used in the update. I was going to have the beforeEdit handler retrieve the data for the row being edited from the remote server, compare it to the dataRec, and update any stale fields, but I run into the async problem described above.

I don't know if this might sort-of-work anyway - the async handler would use the model's set() method, and perhaps the editor window would visually refresh any elements that get modified by the async handler behind its back after the binding is done and the window is up?  Even then, there would be potential timing issues with the user and UI.

I just wanted to see if I was missing something obvious on waiting on the async to complete before returning from beforeEdit. The alternative we are looking at would be to add modification timestamps to the database tables involved, and if an update come in from Kendo and the stamps in the payload don't match the database record, the update would be rejected.  Aside from not wanting to monkey with our existing database schema unless absolutely necessary, it would require the user to re-enter their edits after a refresh.

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 17 Jul 2018, 08:18 AM
Hello, Troy,

Thank you for all of the details.

Indeed, the beforeEdit event is not designed for async requests due to its specifics.

We can recommend an approach which will not require changing the database logic.

The main idea is to prevent the event every time, to set it programmatically in edit only if the condition after the request is valid.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/editrow

I made an example demonstrating how this could be achieved:

https://dojo.telerik.com/ipEqiYan/3

We do understand that this is not an ideal approach, but we hope that it could be used as a valid workaround without making many unnecessary changes to the database or the application itself.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Troy
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or