[chloewhen117Participant]

I’ve got it to load the data
Here’s the final code

    public render() {
        let source = {
            datafields:
                [
                    { name: 'Name', type: 'string' },
                    { name: 'Sex', type: 'string' },
                    { name: 'Age', type: 'int' },
                    { name: 'SibSp', type: 'string' },
                    { name: 'Parch', type: 'int' },
                    { name: 'Ticket', type: 'string' },
                    { name: 'Fare', type: 'float' },
                    { name: 'Cabin', type: 'string' },
                    { name: 'PClass', type: 'int' },
                    { name: 'Embarked', type: 'string' },
                    { name: 'Survived', type: 'int' }
                ],
            datatype: 'json',
            content: "data",
            url: "http://localhost:5000/api/passengers/all"
        };
        let dataAdapter = new jqx.dataAdapter(source, {
            loadComplete: () => {
              // get data records.
              var records = dataAdapter.records;
              this.source.localdata = records;
            }
          });
        return (
            <JqxGrid
                width={1280} source={dataAdapter} columns={this.state.columns}
                pageable={true} autoheight={true} sortable={true} theme={'material-purple'}
                altrows={true} enabletooltips={true} editable={true}
            />
        );
    }

[chloewhen117Participant]

Disregard the previous post.
I’ve made the following changes to source

    private source: IGridProps['source'] = {
        datafields:
            [
                { name: 'Name', type: 'string' },
                { name: 'Sex', type: 'string' },
                { name: 'Age', type: 'int' },
                { name: 'SibSp', type: 'string' },
                { name: 'Parch', type: 'int' },
                { name: 'Ticket', type: 'string' },
                { name: 'Fare', type: 'float' },
                { name: 'Cabin', type: 'string' },
                { name: 'PClass', type: 'int' },
                { name: 'Embarked', type: 'string' },
                { name: 'Survived', type: 'int' }
            ],
        datatype: 'json',
        id: 'PassengerId',
        record: "data",
        url: 'http://localhost:5000/api/passengers/test-query'
    };

I’ve been able to retrieve the data from the url, which sends back a json like this. Not sure why the table shows “No data to display” when the dataAdapter is able to retrieve the json under loadedData

Here’s the json from the ajax request:

[{"PassengerId":1,"Survived":0,"PClass":3,"Name":"Braund, Mr. Owen Harris","Sex":"male","Age":22,"SibSp":"1","Parch":0,"Ticket":"A/5 21171","Fare":7.25,"Cabin":"","Embarked":"S"},{"PassengerId":2,"Survived":1,"PClass":1,"Name":"Cumings, Mrs. John Bradley (Florence Briggs Thayer)","Sex":"female","Age":38,"SibSp":"1","Parch":0,"Ticket":"PC 17599","Fare":71.2833,"Cabin":"C85","Embarked":"C"},{"PassengerId":3,"Survived":1,"PClass":3,"Name":"Heikkinen, Miss. Laina","Sex":"female","Age":26,"SibSp":"0","Parch":0,"Ticket":"STON/O2. 3101282","Fare":7.925,"Cabin":"","Embarked":"S"},{"PassengerId":4,"Survived":1,"PClass":1,"Name":"Futrelle, Mrs. Jacques Heath (Lily May Peel)","Sex":"female","Age":35,"SibSp":"1","Parch":0,"Ticket":"113803","Fare":53.1,"Cabin":"C123","Embarked":"S"},{"PassengerId":5,"Survived":0,"PClass":3,"Name":"Allen, Mr. William Henry","Sex":"male","Age":35,"SibSp":"0","Parch":0,"Ticket":"373450","Fare":8.05,"Cabin":"","Embarked":"S"},{"PassengerId":7,"Survived":0,"PClass":1,"Name":"McCarthy, Mr. Timothy J","Sex":"male","Age":54,"SibSp":"0","Parch":0,"Ticket":"17463","Fare":51.8625,"Cabin":"E46","Embarked":"S"},{"PassengerId":8,"Survived":0,"PClass":3,"Name":"Palsson, Master. Gosta Leonard","Sex":"male","Age":2,"SibSp":"3","Parch":1,"Ticket":"349909","Fare":21.075,"Cabin":"","Embarked":"S"},{"PassengerId":9,"Survived":1,"PClass":3,"Name":"Johnson, Mrs. Oscar W (Elisabeth Vilhelmina Berg)","Sex":"female","Age":27,"SibSp":"0","Parch":2,"Ticket":"347742","Fare":11.1333,"Cabin":"","Embarked":"S"},{"PassengerId":10,"Survived":1,"PClass":2,"Name":"Nasser, Mrs. Nicholas (Adele Achem)","Sex":"female","Age":14,"SibSp":"1","Parch":0,"Ticket":"237736","Fare":30.0708,"Cabin":"","Embarked":"C"},{"PassengerId":11,"Survived":1,"PClass":3,"Name":"Sandstrom, Miss. Marguerite Rut","Sex":"female","Age":4,"SibSp":"1","Parch":1,"Ticket":"PP 9549","Fare":16.7,"Cabin":"G6","Embarked":"S"}]

[chloewhen117Participant]

I’ve been able to resolve this. I just made the following changes
1. removed this.state.source in constructor()
2. Initialize dataAdapter later in render() function

    public render() {
        let dataAdapter = new jqx.dataAdapter(this.source);
        return (
            <JqxGrid
                width={850} source={dataAdapter} columns={this.state.columns}
                pageable={true} autoheight={true} sortable={true} theme={'material-purple'}
                altrows={true} enabletooltips={true} editable={true}
            />
        );
    }

[Author]

Posts