Angular 4 HttpClient and jqxGrid

[margozziParticipant]

I want to use the built in networking of Angular 4. I am able to use Interceptors to deal with Authentication and such.
I am unable top find an example where i can make use of the jqxGrid and possibly DataAdapter with HttpClient from angular 4.3 onward.
I want to use an Angular Service to make all the REST calls and feed the data to the grid. I would also need to deal with sorting paging and filtering.
Is there a way to do this?

[Ivo ZhulevParticipant]

Hi margozzi,

Just get the data needed with the Angular HTTPClient and give it to the jqxGrid‘s dataAdapter. So, for example, you subscribe to the HTTPService and in the callback, you execute the new jqxGrid dataBinding.

What do you mean about sorting/paging/filtering ?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[margozziParticipant]

I think you are assuming way to much on my part. What do you mean “execute the new jqxGrid dataBinding”
Are you saying I have to instantiate a new grid each time I get data? Am I not able to simply replace the current data with new data?

I need a way to Determine the current sorting choices, filtering choices and paging choices made by the user and create an XHR request using the HttpClient in Angular 4.3. Then when I get a response, I need to update the existing grid widget with new data.

So, how do I determine the needed parameters for my XHR call. And when I get the response, how do I populate the grid?
I see no examples like this. Your document ion seems to mostly be examples and not any real explanation of things.

[Ivo ZhulevParticipant]

Hi margozzi,

In the callback you replace only the data, you don’t initialize a new jqxGrid. Check out this demo:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-refreshdata.htm

You have the methods getfilterinformation, getsortinformation, getpaginginformation. Get the information needed from them, make the request. Then when you receive the response from the server populate the jqxGrid as in the example above.

I suggest you to check out the jqxGrid API and demos to find out more about our widget.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[margozziParticipant]

I did as you pointed out and got further. I am able to get the grid to render a bunch of rows.
However, now I am trying to get remote sorting working. I have bound a function to the OnSort event.
In that call I make an asynchronous call for sorted rows. WHen the response comes back I update the data as before, on initial load.
Then I make the call to update the data like this:
updateData = (endpoints: ListResponse<Endpoint> ) => {
this.source.localdata = endpoints._embedded.items;
this.source.totalrecords = endpoints.count;
this.grid.updatebounddata(‘cells’);
}
The call to updatebounddata gets me into an infinite loop. It seems to cause the OnSort callback to be called, and round and round we go.

[margozziParticipant]

Seems to be related to the virtualMode and rendergridrows. I had those there before while trying to figure this out.
If I remove them, the grid no longer makes network request and sorts and filter locally. If I put them back, I get the loop.

beforeprocessing(data) {
this.source.totalrecords = data.count;
}

renderGridRows(params: any): any {
return params.data;
}

[margozziParticipant]

I figured it out. Once again, I have to say I am seriously considering not recommending this product do to the terrible API docs.

[Ivo ZhulevParticipant]

Hi margozzi,

What do you think should be improved with our API documentation?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[ejdesimoneParticipant]

Hello Ivo,

I am trying to deal with the same issue here, if the widget is for Angular one expect that it will be totally integrate.

About the API Documentation, a good start would be, at least, sort the API alphabetically. For more improvement, when a documentation of an API method mention another method from the same API or another, link it (a href tag), and maybe use something better to display the code examples.

Cheers,
J.

[Ivo ZhulevParticipant]

Hi ejdesimone,

Thanks for the feedback, we will consider both your points. As for your issue, aren’t my above posts help you?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[trandmaParticipant]

I would like to comment on the documentation part. It is nice that in most documentation menu points there are clearly made examples and demos of the described functionality. However I feel there is room for improvement for example in regard to the following points:

1. Information about components is spread over different sections of the page. For example if I want to find out what I can do with jqxGrid, I have to browse at the same time “Javascript / jqxGrid” and “Angular / jqxGrid”. Its is never clear how the information in the Javascript section applies to the Angular integration and if it works at all. It does for the most part but it takes a lot of trial and error to find out how things work. The API pages are quite different.

2. Most of the complicated stuff is not documented or hidden. For example jqxGrid server side operations. Even for Javascript it is hard to find. As far as I have seen, it is not listed in any menu. One needs to read through several sections and then notice at the end of the ‘Sorting’ section there is a simple link to a separate page with examples for PHP (no runnable code). It would be great if the CLIENT side differences for situation where the developer needs to use server side sorting, filtering etc were described on a separate page. It is nice that you also show server side code, but that is not really necessary as you are a UI library – just show at least the UI part of the code in a coherent and easily discoverable manner.

3. At least for the Angular section, most of the examples under the API section are completely useless. They all contain the same code example that sets a parameter for the component and then a description like ‘Sets or gets the cellhover property’. But what does it do? Go digging in the Javascript section. It would make more sense to add 1 paragraph of text about how properties are mapped to the component in angular and then just include the javascript API page which at least has more detailed descriptions. The current 30+ examples offer very little actual help.

4. It should be documented more clearly somewhere that the components do not actually integrate fully with Angular components. As far as I have discovered it is not possible to include other Angular components in the templates. They do not get initialized and do not work correctly. I found in the forums somewhere that if one wants to include other Angular components one needs to initialize these programmattically and inject them. The Angular documentation section should probably include more information about that. Maybe i am wrong about this though – I am quite new to jqxWidgets

Just some points to consider. Thank you for the hard work you have put into the library otherwise.

[Peter StoevKeymaster]

Hi trandma,

Thanks for writing.

Yes, there is always a space for improvement. However, the API for Angular and the API for Javasccript is the same and is fully available. The javascript API documentation and Angular API documentation are the same, too. They both have Sets or gets a property X and an example which shows how to achieve that. We do not have Angular Examples with HTTPClient available and we never claimed that we had such, but soon we will have as we are working on such demos. When we see a repeating question and feedback about something we prioritize and do it. About how to use other Angular components within or with our Angular components is shown with Examples and Documentation Tutorials are available exactly about that.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

• This reply was modified 4 years, 7 months ago by  Peter Stoev.

[Author]

Posts