jQuery UI Widgets Forums Angular Angular Grid Component

This topic contains 3 replies, has 2 voices, and was last updated by  Yavor Dashev 1 week, 3 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Angular Grid Component #120937

    sshintaku
    Participant

    I followed the tutorial and I got the grid to display data via data binding. I changed the source to use data that I am getting via a RestAPI call and the data binding is not working. Here is what the code looks like:

    export class GridJqComponent implements AfterViewInit, OnInit {
    cStatus: CloudStatus[] = [];

    columns = [
    {text: ‘AKS Cloud Region’, datafield: ‘region’},
    {text: ‘Status’, datafield: ‘status’},
    ];

    source = new jqx.dataAdapter({
    localData: this.cStatus
    });

    constructor(private cloudRetrievalService: CloudRetrievalService) { }

    ngOnInit() {
    this.getCloudStatus();
    }

    getCloudStatus(): void {
    this.cloudRetrievalService.getAKSCloudStatus()
    .subscribe(status => this.cStatus = status);
    }
    ngAfterViewInit(): void {

    }

    }

    This is what the data structure looks like. It is very simple:

    export interface CloudStatus{
    region: string,
    status: string,

    }

    I know the RestAPI call is responding with JSON output but don’t know if the deserialization is working correctly or I am not setting the data correctly? Any suggestions? Thanks.

    Angular Grid Component #120940

    Yavor Dashev
    Participant

    Hi sshintaku,

    From the code snippet that you have shared I wasn’t able to completely reproduce the issue as described by you, but it could be caused because you haven’t set the datatype property of the jqx.dataAdapter which corresponds to the data type that the jqxGrid is receiving.

    However if you create a complete code example which reproduces this behavior then we could be able to give you a viable solution for your use case.

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

    • This reply was modified 1 week, 4 days ago by  Yavor Dashev.
    Angular Grid Component #120942

    sshintaku
    Participant

    Well, I think it is the asynch rest api data binding that is the problem. The code when setting the data object as an array of objects does work. Do you have any sample code examples of doing an asynch web api call, then doing data binding?

    Angular Grid Component #120946

    Yavor Dashev
    Participant

    Hi sshintaku,

    In this scenario there could be several problems/issues.

    We have documentation how to bind the data for the jqxGrid to mySQL database for example:
    https://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/bind-jquery-grid-to-mysql-database-using-php-mysqli.htm

    Also I strongly recommend you to take a look at the properties of the jqxDataAdapter and in the documentation for it we have section for asynchronous binding. Link for the documentation: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm

    Let me know what you think!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.