My first sample was probably to simplistic to convey the real problem.
Imagine a complex app that has multiple Grids and perhaps several tabs or collapsible views each with their own Grids.
Having a "global" or "root" reference to a dozen unrelated grids would not only be a poor design, it is arguably not even feasible.
To further clarify the problem, lets say the app is using Reactive Forms (as opposed to ngModel templates) and the user is inline editing (Normal) a Grid.
When the user then clicks somewhere else on the page, the current Grid will loose focus (blur) and *something* else will gain focus.
When the Grid receives that blur event, I want to save the data (endEdit)if the reactive form is valid, but revert the data (closeEdit) if the form is invalid.
There are a number of SyncFusion examples where a focus and blur handler is added to the html input of a Reactive Forms based Normal editing Grid.
These examples are typically adding or removing an 'e-input-focus' class.
It seems logical to me that one should be able to add code to the blur handler in the example that would check Form validity, and invoke endEdit or closeEdit of the Grid that just lost focus.
Indeed the SyncFusion InPlaceEditor implements this very functionality via it's actionOnBlur property.
Unfortunately invoking a Grid's endEdit or closeEdit method from within the above mentioned blur handler (on the input element) throws an Error.
* My question is, what is the best way to implement this kind of 'actionOnBlur' functionality for a Grid.