PSPavithra Subramaniyam Syncfusion Team December 6, 2019 05:50 AM
You can achieve your requirement – “Save edit changes on focusing the input element rendered outside the grid” by binding focus event to this element and calling the grid’s endEdit method if it is in edit state. This is demonstrated in below code snippet,
Please get back to us if you have any further queries.
PCpcafstockfOctober 30, 2020 04:42 PM
The solution you propose will only work if every single element on a page has it's own reference to the grid (which is not an option).
I did try to call endEdit from the (blur) handler attached to the input, but endEdit throws an exception when called from the blur event.
* How can this 'actionOnBlur' capability of an InPlaceEditor be duplicated for the Grid editor?
SKSujith Kumar Rajkumar Syncfusion Team November 2, 2020 05:32 AM
When the Grid reference is defined in the current page root, then it can be accessed inside any function of the page from the angular root instance. You need not define the Grid reference for every element in the page in order to access it.
Based on your query we suspect you have defined dynamic focus event for the input element(in order to end Grid edit on focus out) and not able to access the Grid reference there. This problem occurs if the angular root instance is not accessible in the event from ‘this’ keyword which can be resolved by using the ‘bind’ keyword for binding the root instance for the focus event. On doing so you will be able to access the Grid instance there.
Please find the modified sample based on this for your reference below,
Also can you please elaborate on this query – “I did try to call endEdit from the (blur) handler attached to the input, but endEdit throws an exception when called from the blur event.How can this 'actionOnBlur' capability of an InPlaceEditor be duplicated for the Grid editor?” as we are not able to clearly understand it.
Let us know if you have any concerns.
PCpcafstockfNovember 2, 2020 12:50 PM
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.