jQuery UI Widgets Forums Grid Updating jqxgrid localdata on React

Tagged: ,

This topic contains 3 replies, has 1 voice, and was last updated by  chloewhen117 5 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Updating jqxgrid localdata on React #105614

    chloewhen117
    Participant

    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;
    
    Updating jqxgrid localdata on React #105627

    chloewhen117
    Participant

    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}
                />
            );
        }
    
    Updating jqxgrid localdata on React #105628

    chloewhen117
    Participant

    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"}]
    
    Updating jqxgrid localdata on React #105630

    chloewhen117
    Participant

    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}
                />
            );
        }
    
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.