External Form for Angular Grid

[bhavin]

In the example 

https://www.telerik.com/kendo-angular-ui/components/grid/editing/external-editing/

as provided a call back is made to the service which fetches the Product data. Is there any easier way of achieving this? Also is there an example where the data is already defined in one of the ts over calling it from a link?

[bhavin]

Using the  would serve a better option than the  I feel

[bhavin]

I am trying to call the data from within the application rather than the  but throwing me mine error. 

Is there any example that calls an internal  data rather than having it done via a link?

 

(Ref: https://www.telerik.com/kendo-angular-ui/components/grid/editing/external-editing/)

[bhavin]

I have something like

  private _url: string = 'assets/notesData/';

private fetch(action: string = '', data?: any): Observable<any[]> {

    return this.http
      .jsonp(this._url+`/${action}?${this.serializeModels(data)}`, 'callback')
      .pipe(map(res => <any[]>res));
  }

All i get is "Uncaught ReferenceError: callback is not defined" all the time even if i tried various other routes

[Dimiter Topalov]

Hi Bhavin,

The External Form editing example utilizes a JSONP backend  that actually returns a callback function that is executed on the client and provides the data.

When trying to access some url (like "assets/notesData/") this should be an actual JSONP service so that it can function as expected with the syntax, used in the demo.

Further information about JSONP is available in multiple online resources, e.g.:

https://www.w3schools.com/js/js_json_jsonp.asp

Of course, you are not required to use JSONP or a remote server at all (using a remote data service is just the most common scenario). You can manipulate all data locally too.

In general, the Grid editing functionality relies on emitting events (edit, cancel, add, remove...). In the External Form editing example, the data item that should be edited (or a newly created one when adding a new item) is passed to the custom component, that contains the form and is responsible for binding the respective inputs to the proper data fields of the passed data item.

When the user is finished editing, the save event is emitted and handled in the host component (where in turn the respective edit service method is called).

For example to update the data only locally, you can customize the example by binding the Grid to an array of local data, and manipulate this array accordingly, e.g.:

https://stackblitz.com/edit/angular-4qf79s?file=app/app.component.ts

Note that the example is not fully functional - it just demonstrates a sample approach for editing local data without going through a service and remote server. Adding and removing new items is omitted for simplicity, but approach would be the same.

Further details about the Grid editing mechanics in general, are available in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[bhavin]

Thanks for the demo, just a  the delete and add new is not working in the example provided