Using jQWidgets with Angular HttpClient

This tutorial will show you how to use Angular's HttpClient for loading the data in jQWidgets components and how to use server-side sorting.

First we will need to have an Angular CLI project set up. For that we will use the Create jQWidgets Angular App.

Once we have the project ready it is time to create a DataService which will be responsible for sending HTTP request to our server

We will use the cli command for creating a service:

ng generate service data

The command generates skeleton DataService class in src/app/hero.service.ts. The DataService class should look like the following example.

data.service.ts

The @Injectable decorator marks that this class is available to Injector for creation. More about it you can read Here.

Now it is time to import Angular's HttpClient and inject it into our service constructor.

HttpClient offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable apis, and streamlined error handling. For more details, again you can read in Angular's Documentation.

We will also import Observable from rxjs/internal/Observable, which is the return type of the HTTP method calls.

For the purpose of this tutorial we will use a server which is served on localhost.

We will implement two methods in our data service:

• getData method, which will send a GET request to our server for fetching the data
• sortData method which will send a POST request to our server for getting the sorted data

Here is how our service would look when we implement the things mentioned above:

data.service.ts

One more thing we have to do in order for the HttpClient to work is to import HttpClientModule from @angular/common/http in our app.module.ts file and add it to the imports section.

Now let's look at the app.component which contains a jqxGrid.

This is how our app.component.html will look like:

Let's look the app-component.ts file. For a start, we will have the grid's properties there and the our dataService imported and injected it the constructor:

Note that the localdata in the source is set to null.

Now, we will implement the getData method, responsible for calling the service getData method and subscribing to the result. We will suppose that our server returns the data in JSON format. For this example, the return data will be:

We will subscribe to the Observable returned by the service and there we will set the data to the source's localdata and will update the grid's data:

getData() {
    this.dataService.getData()
        .subscribe((data) => {
            this.source.localdata = data;
            this.myGrid.updatebounddata();
        });
};

In the ngAfterViewInit we will invoke the jqxGrid's showloadelement method, so we can see the loader while we are waiting for the data to fetched and we will call the getData method that we have implemented:

ngAfterViewInit() {
    this.myGrid.showloadelement();
    this.getData();
}

If you run the application now you should have the grid loaded with the data returned from the server.

Server-side sorting

Now let's see how to use server-side sorting.

We have already implemented the sortData method in the service for making a post request to the server so what is left now is to use this in the app.component.ts.

Inside the dataAdapter's source we will add the sort callback. When it is implemented the client-side sorting would not be performed but instead this callback will be executed. It accepts the column and direction parameters, which we will pass as a body of the HTTP request so they can be used for the server's sorting logic.

    source: any = {
        localdata: null,
        datafields: [
        { name: 'name', type: 'string' },
        { name: 'type', type: 'string' },
        { name: 'calories', type: 'int' },
        { name: 'totalfat', type: 'string' },
        { name: 'protein', type: 'string' }
        ],
        datatype: 'json',
        sort: (column, direction) => {
        this.sortData(column, direction);
        }
    };

Now we should implement the sortData method. It will call the service sortData method and subscibe to the result. In the subscribe we set the result to the source and update the grid. Again, we will invoke showloadelement() before calling the service and hideloadelement() after the grid is updated:

    sortData(column, direction) {
        this.myGrid.showloadelement();

        this.dataService.sortData({ column, direction })
            .subscribe((data) => {
            this.source.localdata = data;
            this.myGrid.updatebounddata('sort');
            this.myGrid.hideloadelement();
        });
    };

Here is how the final version of our app.component.ts looks like:

You can now run the application and see the jqxGrid loading its data from the server and preform sorting server-side.