React Axios on Jqxgrid

[denmark12Participant]

Hi, can i use axios to call an API and it will show the data on the datagrid? thank you

[HristoParticipant]

Hello denmark12,

You could get the data and pass back to the jqxDataAdapter:

axios.get("your/url")
	.then(res => {
		const newData = res.data;
		source.localdata = newData;
		dataAdapter.dataBind();
		this.myGrid.updatebounddata();
	});

You could try this approach.
Unfortunately, we do not have much experience with the Axios.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[denmark12Participant]

Hi where will i put this? because i get an error it cant find the source.localdata? thank you

[HristoParticipant]

Hello denmark12,

Please, take a look at this approach below:

import * as React from "react";
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
import JqxGrid, {
    IGridProps,
    jqx,
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";

class App extends React.PureComponent<{}, any> {
    private myGrid = React.createRef<JqxGrid>();
    constructor(props: any) {
        super(props);
        const source = {
            datafields: [
                {
                    name: "ShippedDate",
                    type: "date",
                },
                {
                    name: "Freight",
                    type: "float"
                },
                {
                    name: "ShipName",
                    type: "string",
                },
                {
                    name: "ShipAddress",
                    type: "string",
                },
                {
                    name: "ShipCity",
                    type: "string",
                },
                {
                    name: "ShipCountry",
                    type: "string",
                },
            ],
            datatype: "json",
            sortcolumn: "ShipName",
            sortdirection: "asc",
            localdata: [{ ShipName: "ShipName A" }, { ShipName: "ShipName" }]
        };
        this.state = {
            columns: [
                {
                    text: "Ship Name",
                    datafield: "ShipName"
                },
                {
                    text: "Shipped Date",
                    datafield: "ShippedDate",
                    cellsformat: "yyyy-MM-dd"
                },
                {
                    text: "Freight",
                    datafield: "Freight",
                    cellsformat: "f2",
                    cellsalign: "right"
                },
                {
                    text: "Ship Address",
                    datafield: "ShipAddress"
                },
                {
                    text: "Ship City",
                    datafield: "ShipCity",
                    width: "5%"
                },
                {
                    text: "Ship Country",
                    datafield: "ShipCountry",
                    width: "5%"
                },
            ],
            dataSource: source,
            source: new jqx.dataAdapter(source),
        };
    }

    updateGrid = () => {
        this.state.dataSource.localdata = [
            { ShipName: "ShipName B" }, { ShipName: "New ShipName" }
        ];
        this.myGrid.current!.updatebounddata("sort");
    };

    render() {
        return (
            <div>
                <button onClick={this.updateGrid}>Update</button>
                <JqxGrid ref={this.myGrid}
                    width={1024}
                    height={450}
                    source={this.state.source}
                    columns={this.state.columns}
                    altrows={true}
                    sortable={true}
                    columnsresize={false}
                    enabletooltips={true}
                />
            </div>
        );
    }
}

export default App;

It is not with the Axios but you could try the same way to update it.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[denmark12Participant]

Hi i already fixed it thank, but i have another question, can i change the identifiers of checkbox. my data have on / off string, and the default identifiers of checkbox is bool 0/1 thank you

[HristoParticipant]

Hello denmark12,

I would like to ask you for more details.
What do you mean by this “can i change the identifiers of checkbox. my data have on / off string”?
Do you have a column with boolean values and you want to visualize it?
I look forward to hearing from you.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts