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

[pcafstockf]

Hi,

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

https://stackblitz.com/edit/angular-umeuhb-22nhra?file=normal-edit.html

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.

Thanks

[Pavithra Subramaniyam]

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 

        this.grid.endEdit(); 

    } 

} 

 

https://ej2.syncfusion.com/angular/documentation/api/grid/#endedit 

 

For your reference we have modified the sample you provided based on this. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-umeuhb-jqvdlo?file=normal-edit.html 

 

Please get back to us if you have any further queries. 

 

Regards, 

Pavithra S. 

[pcafstockf]

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?

Thanks,

-Earl

[Sujith Kumar Rajkumar]

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, 

Sample: https://stackblitz.com/edit/angular-umeuhb-dzhkrl?file=normal-edit.component.ts  

 

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. 

 

Regards, 

Sujith R 

[pcafstockf]

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.

Thanks,

-Earl

[Sujith Kumar Rajkumar]

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.    

 

https://www.syncfusion.com/account/login   

 

Regards,  

Sujith R