jQuery UI Widgets Forums React React Axios on Jqxgrid

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 2 weeks, 1 day ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • React Axios on Jqxgrid #113459

    denmark12
    Participant

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

    React Axios on Jqxgrid #113473

    Hristo
    Participant

    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

    • This reply was modified 1 month ago by  Hristo.
    React Axios on Jqxgrid #113490

    denmark12
    Participant

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

    React Axios on Jqxgrid #113496

    Hristo
    Participant

    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

    React Axios on Jqxgrid #113531

    denmark12
    Participant

    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

    React Axios on Jqxgrid #113626

    Hristo
    Participant

    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

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

You must be logged in to reply to this topic.