# Binding and Editing with Progress JSDO

## Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Angular Grid</td>
	    </tr>
    </tbody>
</table>

## Description

How can I bind the Grid data to Progress JSDO?

## Solution

The Grid is agnostic as to where its data comes from, relies on various events that are emitted upon user interaction, such as page or filter change and editing, and contains the event data that is required for performing the respective action.

You can handle these events and call the corresponding data service methods that will proceed with the performing of the remote server calls and with the consuming of the response, or, depending on the scenario, will let the Grid or its host component consume it.

While handling the Grid events, you can bind the Grid to Progress JSDO and follow the same general approach.

### Sample Application

[This runnable sample project](https://github.com/telerik/kendo-angular/tree/master/examples/projects/grid-jsdo) demonstrates how to bind a Kendo UI for Angular Grid to a Progress JSDO data source and implement server-side data operations (paging, sorting, and filtering), editing, and CRUD operation support.

### Configuring the Grid

To populate the Grid according to its initial state, provide the data service and perform the `read` request accordingly.

1. Configure the data operations which the Grid has to support—[paging](https://www.telerik.com/kendo-angular-ui/components/grid/paging/basics), [sorting](https://www.telerik.com/kendo-angular-ui/components/grid/sorting/basics), and [filtering](https://www.telerik.com/kendo-angular-ui/components/grid/filtering/basics)).

2. Handle the [`dataStateChange`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#datastatechange) event to call the `read` service method and pass the current state upon each user interaction.

   ```ts
       public dataStateChange(state: DataStateChangeEvent): void {
           this.state = state;
           this.dataService.read(this.state);
       }
   ```

   For more information on binding the Grid and configuring its data operations, refer to:

   * [Data Binding Basics](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/basics)
   * [Data-Binding Directives of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/local-data#automatic-data-processing)

3. Similarly, handle the editing-related events and call their corresponding data service methods.

   ```ts
       public editHandler(e: any): void {
           const { sender, rowIndex, dataItem } = e;
           this.originalItem = Object.assign({}, dataItem);
           this.editDataModel = dataItem;
           this.formGroup = createFormGroup(this.originalItem);
           this.closeEditor(sender);
           this.editedRowIndex = rowIndex;
           sender.editRow(rowIndex, this.formGroup);
       }

       public cancelHandler({ sender, rowIndex }: any): void {
           Object.assign(this.editDataModel, this.originalItem);
           this.closeEditor(sender, rowIndex);
       }

       public saveHandler({ sender, rowIndex, isNew }: any): void {
           const item: any = Object.assign(this.editDataModel, this.formGroup.value);

           if (isNew) {
               this.dataService.create(item);
           } else {
               this.dataService.update(item);
           }

           sender.closeRow(rowIndex);
       }

       public addHandler(e: any): void {
           const { sender } = e;
           this.editDataModel = this.dataService.createModel();
           this.formGroup = createFormGroup({});
           this.closeEditor(sender);
           sender.addRow(this.formGroup);
       }

       public removeHandler(e: any): void {
           const { dataItem } = e;
           this.dataService.remove(dataItem);
       }

       private closeEditor(grid: GridComponent, rowIndex: number = this.editedRowIndex): void {
           grid.closeRow(rowIndex);
           this.editedRowIndex = undefined;
       }
   ```

   For more information on the editing functionality of the Grid, refer to:

   * [Editing in Reactive Forms](https://www.telerik.com/kendo-angular-ui/components/grid/editing/inline-editing#using-reactive-forms))
   * [Custom Editing in Reactive Forms](https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-editors)

### Configuring the Data Service

The data service is responsible for performing the necessary HTTP requests and for sending the respective data which is required for the successful completion of the data or CRUD operation to the server. Depending on the requirements of your project, you can process the response in the same or another service method, or in the callback where the service method was initially invoked.

For an example on configuring the data service of the Grid, refer to the [`progress.service.ts`](https://github.com/telerik/kendo-angular/blob/master/examples/projects/grid-jsdo/src/app/data/progress.service.ts) file. The implementation is based on an abstract class which is defined in the [`data.service.ts`](https://github.com/telerik/kendo-angular/blob/master/examples/projects/grid-jsdo/src/app/data/data.service.ts) file. However, as long as the implementation serves the general purpose, you can have a specific implementation which is different from the suggested one.

### Integrating Progress JSDO

1. Install the [@progress/jsdo-core](https://www.npmjs.com/package/@progress/jsdo-core) and [@progress/jsdo-angular](https://www.npmjs.com/package/@progress/jsdo-angular).
2. Use @progress/jsdo-core and @progress/jsdo-angular in the data service. Provide credentials where necessary.
3. Use [progress-session service.ts](https://github.com/telerik/kendo-angular/blob/master/examples/projects/grid-jsdo/src/app/data/progress-session.service.ts) which is responsible for initiating the Progress JSDO session. Provide credentials where necessary.

For more information on Progress JSDO, refer to:

* [Official JSDO documentation](https://documentation.progress.com/output/pdo/index.html#page/pdo/jsdo-overview.html)
* [Wiki page on GitHub](https://github.com/progress/JSDO/wiki/Using-the-JSDO-and-DataSource-components-in-an-Angular-web-app)

## Suggested Links

* [Data-Binding Basics](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/basics)
* [Data-Binding Directives of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/local-data#automatic-data-processing)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)