We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Proper way to commit a Template-driven Forms based editor?


I've created a sample based loosely on the documentation for Template-driven Forms.

The editor works as expected if you click to edit, make changes, then hit the Enter key to commit your changes.
However, I want to also commit the changes if the user clicks outside the grid (grid loses focus).
I added an input element at the top of the sample page that can be clicked to steal focus.

Basically I'm looking for the 'actionOnBlur' property of the InPlaceEditor component, but for a Template based Grid editor.

Also, if there is a more preferred way to write the html for the ng-template editor, I'd like some feedback on that as well.


5 Replies

PS Pavithra Subramaniyam Syncfusion Team December 6, 2019 10:50 AM UTC

Hi Earl, 
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, 
<input type='text' size='25' name='shiftFocus' (focus)='onFocus()' placeholder='click-here-to-steal-focus' /> 
public onFocus() { 
    // Check is the grid is in edit state 
    if (this.grid.isEdit) { 
        // Saves the record 
For your reference we have modified the sample you provided based on this. You can find it below, 
Please get back to us if you have any further queries. 
Pavithra S. 

PC pcafstockf October 30, 2020 09:42 PM UTC

Hi Pavithra,

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?



SK Sujith Kumar Rajkumar Syncfusion Team November 2, 2020 10:32 AM UTC

Hi Earl, 
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. 
Sujith R 

PC pcafstockf November 2, 2020 05:50 PM UTC

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.
Here is one such SyncFusion example:  Reactive Forms
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.



SK Sujith Kumar Rajkumar Syncfusion Team November 3, 2020 11:34 AM UTC

Hi Earl, 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.    
Sujith R 

Live Chat Icon For mobile
Up arrow icon