New to Kendo UI for Angular? Start a free 30-day trial


ProductProgress® Kendo UI for Angular Grid


How can I bind the Grid data to Progress JSDO?


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 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 supportpaging, sorting, and filtering).

  2. Handle the dataStateChange event to call the read service method and pass the current state upon each user interaction.

        public dataStateChange(state: DataStateChangeEvent): void {
            this.state = state;

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

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

        public editHandler(e: any): void {
            const { sender, rowIndex, dataItem } = e;
            this.originalItem = Object.assign({}, dataItem);
            this.editDataModel = dataItem;
            this.formGroup = createFormGroup(this.originalItem);
            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) {
            } else {
        public addHandler(e: any): void {
            const { sender } = e;
            this.editDataModel = this.dataService.createModel();
            this.formGroup = createFormGroup({});
        public removeHandler(e: any): void {
            const { dataItem } = e;
        private closeEditor(grid: GridComponent, rowIndex: number = this.editedRowIndex): void {
            this.editedRowIndex = undefined;

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

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 file. The implementation is based on an abstract class which is defined in the 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 and @progress/jsdo-angular packages.
  2. Use @progress/jsdo-core and @progress/jsdo-angular in the data service. Provide credentials where necessary.
  3. Use 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: