Updating jqxgrid localdata on React

[chloewhen117Participant]

Hello, I’m having trouble updating the source for jqxgrid using data from AJAX request. The grid works if I input sample data into localdata so I’m not sure what the problem with my project was.

import * as React from 'react';
import axios from 'axios';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material-purple.css';

import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';

class Table extends React.PureComponent<{}, IGridProps> {

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

    private columns: IGridProps['columns'] =
        [
            { text: 'Passenger Name', datafield: 'Name'},
            { text: 'Sex', datafield: 'Sex'},
            { text: 'Age', datafield: 'Age'},
            { text: 'Number of Sibling/Spouse Aboard', datafield: 'SibSp'},
            { text: 'Number of Parent/Child aboard', datafield: 'Parch' },
            { text: 'Ticket', datafield: 'Ticket' },
            { text: 'Fare', datafield: 'Fare' },
            { text: 'Cabin', datafield: 'Cabin' },            
            { text: 'Class of Travel', datafield: 'PClass' },
            { text: 'Port Embarked', datafield: 'Embarked' },
            { text: 'Survived', datafield: 'Survived' }
        ];

    constructor(props: {}) {
        super(props);

        this.state = {
            columns: this.columns,
            source: new jqx.dataAdapter(this.source),
        };
    }

    public componentDidMount() {
        axios
            .get('http://localhost:5000/api/passengers/test-query')
            .then((res) => {
                let data_arr = [];
                res.data.forEach(passenger => {
                    let arr = [];
                    arr.push(passenger.Name);
                    arr.push(passenger.Sex);
                    arr.push(passenger.Age);
                    arr.push(passenger.SibSp);
                    arr.push(passenger.Parch);
                    arr.push(passenger.Ticket);
                    arr.push(passenger.Fare);
                    arr.push(passenger.Cabin);
                    arr.push(passenger.PClass);
                    arr.push(passenger.Embarked);
                    arr.push(passenger.Survived);
                    data_arr.push(arr);
                });
                this.source.localdata = data_arr;
            })
            .catch((error) => {
                // handle error
                console.log(error);
              });
    }

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

export default Table;

[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}
            />
        );
    }

[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 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}
            />
        );
    }

[Author]

Posts