jQuery UI Widgets Forums React bind react grid

This topic contains 14 replies, has 2 voices, and was last updated by  kashehi 1 month ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • bind react grid #121910

    kashehi
    Participant

    Hi,
    I have a grid that fetch the data from server but after getting the data my grid is empty, would you please help me to find the problem?
    this is my code:
    import * as React from ‘react’;
    import JqxGrid, { IGridProps, jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid’;
    import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
    import “jqwidgets-scripts/jqwidgets/styles/jqx.material.css”;
    import { getcourseList } from ‘../data-access/Course’
    class GridCourse extends React.PureComponent {
    constructor(props) {
    super(props);
    const source =
    {
    datafields: [
    { name: ‘Tabageh’, type: ‘string’ },
    { name: ‘Univ’, type: ‘string’ },
    { name: ‘SexGroup’, type: ‘string’ },
    { name: ‘CorseStatus’, type: ‘string’ },
    { name: ‘CorseCode’, type: ‘string’ },
    { name: ‘CorseName’, type: ‘string’ },

    ],
    datatype: ‘json’,
    localdata: [],

    };
    this.state = {
    columns: [
    { text: ‘CompanyName’, datafield: ‘Tabageh’, width: 250 },
    { text: ‘ContactName’, datafield: ‘Univ’, width: 150 },
    { text: ‘SexGroup’, datafield: ‘SexGroup’, width: 150 },
    { text: ‘CorseStatus’, datafield: ‘CorseStatus’, width: 150 },
    { text: ‘CorseCode’, datafield: ‘CorseCode’, width: 150 },
    { text: ‘CorseName’, datafield: ‘CorseName’, width: 150 },

    ],

    source: new jqx.dataAdapter(source)
    }

    }

    componentDidMount() {
    getcourseList().then(data =>
    this.state.source.localdata = data
    )

    }

    render() {

    return (
    <JqxGrid
    width=’90%’ source={this.state.source} columns={this.state.columns} columnsresize={true} />
    );
    }
    }
    export default GridCourse;

    and this is my getcourseList function in another js file:

    export async function getcourseList() {
    const res = await fetch(‘Corse’);
    const data = await res.json();
    return data
    }

    • This topic was modified 1 month, 1 week ago by  kashehi.
    bind react grid #121919

    Hi,

    The problem is that you are not binding the data. Please look at this example.
    After calling this.state.source.localdata = data you should update the bound data via the updatebounddata method
    Here is an example:
    https://www.jqwidgets.com/react/react-grid/index.htm#https://www.jqwidgets.com/react/react-grid/react-grid-refreshdata.htm

    I hope this makes it more clear!
    If you have any other questions, please do not hesitate to contact us again.

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team
    https://www.jqwidgets.com/

    bind react grid #121932

    kashehi
    Participant

    Hi,
    Thank you for your help.
    I changed my code to this code as below but it is not work
    when I click on update button data is load on grid but when I open my page on load of page grid is empty, would you please help me again
    import * as React from “react”;
    import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
    import JqxGrid, {
    IGridProps,
    jqx,
    } from “jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid”;
    import { GetCourseList } from ‘../data-access/Course’
    import CourseDropdown from ‘./CourseDropDown’
    class CourseGrid extends React.PureComponent {
    myGrid = React.createRef(JqxGrid);
    constructor(props) {
    super(props);

    const source = {
    datafields: [
    {
    name: “Tabageh”,
    type: “string”,
    },
    {
    name: “Univ”,
    type: “string”
    },
    {
    name: “SexGroup”,
    type: “string”,
    },
    {
    name: “CorseStatus”,
    type: “string”
    },
    {
    name: “CorseCode”,
    type: “string”,
    },
    {
    name: “CorseName”,
    type: “string”
    }
    ,
    {
    name: “CorseNoe”,
    type: “string”
    }

    ],
    datatype: “json”,

    localdata: []
    };
    this.state = {
    columns: [
    {
    text: “نام درس”,
    datafield: “CorseName”,

    }
    ,

    {
    text: “جنسیت”,
    datafield: “SexGroup”,

    }

    ,
    {
    text: “Tabageh”,
    datafield: “Tabageh”,
    hidden: true
    },
    {
    text: “Univ”,
    datafield: “Univ”,
    hidden: true

    }

    ,
    {
    text: “نوع درس”,
    datafield: “CorseStatus”,

    }

    ,
    {
    text: “CorseCode”,
    datafield: “CorseCode”,
    hidden: true
    }

    ,

    {
    text: “CorseNoe”,
    datafield: “CorseNoe”,

    }
    ],
    dataSource: source,
    source: new jqx.dataAdapter(source),
    };
    }

    updateGrid = () => {
    GetCourseList().then(data => this.state.dataSource.localdata = data)
    this.myGrid.current.updatebounddata(“sort”);
    };
    componentDidMount() {
    GetCourseList().then(data => this.state.dataSource.localdata = data)
    this.myGrid.current.updatebounddata(‘sort’);

    }

    render() {
    return (
    <div>
    <div><CourseDropdown /></div>
    <button onClick={this.updateGrid}>Update</button>
    <JqxGrid ref={this.myGrid}
    width={‘100%’}
    height={‘100%’}
    source={this.state.source}
    columns={this.state.columns}
    altrows={true}
    sortable={true}
    columnsresize={true}
    enabletooltips={true}
    pageable={true}
    rtl={true}
    />

    </div>

    );
    }
    }

    export default CourseGrid;

    bind react grid #121934

    Hi,

    Try to pass the GetCourseList() to the localdata property of source when you are initialising the source.

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team
    https://www.jqwidgets.com/

    bind react grid #121938

    kashehi
    Participant

    Thank you for your response, I edit my code according what you said but it is still load mygrid empty,
    I am confused please help me to do that in right way.
    this is my code
    const source = {
    datafields: [
    {
    name: “Tabageh”,
    type: “string”,
    },
    {
    name: “Univ”,
    type: “string”
    },
    {
    name: “SexGroup”,
    type: “string”,
    },
    {
    name: “CorseStatus”,
    type: “string”
    },
    {
    name: “CorseCode”,
    type: “string”,
    },
    {
    name: “CorseName”,
    type: “string”
    }
    ,
    {
    name: “CorseNoe”,
    type: “string”
    }

    ],
    datatype: “json”,

    localdata: GetCourseList(),

    };

    this.state = {
    columns: [
    {
    text: “نام درس”,
    datafield: “CorseName”,

    }
    ,

    {
    text: “جنسیت”,
    datafield: “SexGroup”,

    }

    ,
    {
    text: “Tabageh”,
    datafield: “Tabageh”,
    hidden: true
    },
    {
    text: “Univ”,
    datafield: “Univ”,
    hidden: true

    }

    ,
    {
    text: “نوع درس”,
    datafield: “CorseStatus”,

    }

    ,
    {
    text: “CorseCode”,
    datafield: “CorseCode”,
    hidden: true
    }

    ,

    {
    text: “CorseNoe”,
    datafield: “CorseNoe”,

    }
    ],
    dataSource: source,
    source: new jqx.dataAdapter(source),
    };
    }

    export async function GetCourseList() {
    const res = await fetch(‘Corse/GetCourseList’);
    const data = await res.json();
    return data
    }

    this is image url of my problem
    https://ibb.co/MVZ368b

    bind react grid #121940

    Hi,

    Okay, so remove the GetCourseList() from localdata initially. Try this:

    updateGrid = () => {
            GetCourseList().then(data => {
                this.state.dataSource.localdata = data;
                this.myGrid.current.updatebounddata('sort');
            })
        }
    
    componentDidMount() {
        GetCourseList().then(data => {
            this.state.dataSource.localdata = data;
            this.myGrid.current.updatebounddata('sort');
        })
    }

    .

    You should not only set the localdata, but you also should update the bound data.

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team
    https://www.jqwidgets.com/

    bind react grid #121942

    kashehi
    Participant

    I do not Know how can I thank you, It completely works.

    bind react grid #121944

    Hi,

    I am so happy to hear that! Please let me know if you need further assistance.

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team
    https://www.jqwidgets.com/

    bind react grid #121945

    kashehi
    Participant

    Thank you
    And Would you please help me about jqxdropdownlist from json
    which method I should use for update dropdownlist after call below function:
    componentDidMount() {
    GetCourseAndTabgeh().then(data => {
    this.state.dataSource.localdata = data;

    })

    }

    bind react grid #121947

    Hi,

    Take a look here: https://www.jqwidgets.com/react/react-dropdownlist/index.htm#https://www.jqwidgets.com/react/react-dropdownlist/react-dropdownlist-bindingtojson.htm

    You can replace the url property`s value with yours and the data will be loaded from the URL.

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team

    bind react grid #121955

    kashehi
    Participant

    Hi,
    again I have this code as below load dropdown data from json but my dropdown is empty, would you please help me:
    import * as React from ‘react’;
    import JqxDropDownList, { IDropDownListProps, jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’;
    import { GetCourseAndTabgeh } from ‘../data-access/Course’
    class CourseDropdown extends React.PureComponent {
    log = React.createRef(HTMLDivElement);
    constructor(props) {
    super(props);
    const source = {
    datafields: [
    { name: ‘Tabageh’ },
    { name: ‘CorseName’ }
    ],
    datatype: ‘json’,

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

    }
    componentDidMount() {
    GetCourseAndTabgeh().then(data => {
    this.state.source = data;

    })
    console.log(this.state.dataSource)
    }
    render() {
    return (
    <div>
    <JqxDropDownList
    width={200}
    height={30}
    source={this.state.source}
    selectedIndex={2}
    displayMember={‘CorseName’}
    valueMember={‘Tabageh’}
    rtl={true}
    />
    <div ref={this.log} />
    </div>
    );
    }

    }
    export default CourseDropdown;

    export async function GetCourseAndTabgeh() {
    const res = await fetch(‘Corse/GetCourseAndTabgeh’);
    const data = await res.json();
    return data
    }

    bind react grid #121956

    Hi,

    Your source should be something like this:

    constructor(props: {}) {
            super(props);
            const source: any = {
                datafields: [
                    { name: 'Tabageh' },
                    { name: 'CorseName' }
                ],
                datatype: 'json',
                url: 'Corse/GetCourseAndTabgeh' // if Corse/GetCourseAndTabgeh is the url you get the data from
            };
            this.state = {
                source: new jqx.dataAdapter(source)
            }
        }

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team

    bind react grid #121957

    kashehi
    Participant

    Thank You soooo much, It works.
    Best Regards

    bind react grid #121958

    Hi,

    Glad to hear that! If you need further assistance, let me know.

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team

    bind react grid #121976

    kashehi
    Participant

    Hi,
    I have two dropdown that the second one load base on selected row in first one
    now:
    1- first dropdown rows loaded from json that return from server with fetch and it completely works, but for load data to second dropdown at first I need to get the id of selected row in first dropdown and send it to server for get the result, But i dont know how can I write this code,
    would you please help me?
    this is my firstdropdown and it is ok:
    import * as React from ‘react’;
    import JqxDropDownList, { IDropDownListProps, jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’;
    class TabaghehDropDown extends React.PureComponent {
    log = React.createRef(HTMLDivElement);
    constructor(props) {
    super(props);
    const source = {
    datafields: [
    { name: ‘Tabageh’ },
    { name: ‘CorseName’ }
    ],
    datatype: ‘json’,
    url: ‘Corse/GetTabgeh’
    };
    this.state = {
    dataSource: source,
    source: new jqx.dataAdapter(source)
    }

    }

    render() {
    return (
    <div>
    <JqxDropDownList
    width={200}
    height={30}
    source={this.state.source}
    selectedIndex={-1}
    displayMember={‘CorseName’}
    valueMember={‘Tabageh’}
    rtl={true}
    placeHolder=”طبقه را انتخاب نمایید”
    />
    <div ref={this.log} />
    </div>
    );
    }

    }
    export default TabaghehDropDown;

    this is my second dropdowncode:
    import * as React from ‘react’;
    import JqxDropDownList, { IDropDownListProps, jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’;

    class GroupDropDown extends React.PureComponent {
    log = React.createRef(HTMLDivElement);
    constructor(props) {
    super(props);

    const source= {
    datafields: [
    { name: ‘Tabageh’ },
    { name: ‘CorseName’ }
    ],
    datatype: ‘json’,
    url: ‘Corse/GetGroup’
    };
    this.state = {
    dataSource: source,
    source: new jqx.dataAdapter(source)
    }

    }

    render() {
    return (
    <div>
    <JqxDropDownList
    width={200}
    height={30}
    source={this.state.source}
    selectedIndex={2}
    displayMember={‘CorseName’}
    valueMember={‘Tabageh’}
    rtl={true}
    placeHolder=”گروه را انتخاب نمایید”
    />
    <div ref={this.log} />
    </div>
    );
    }

    }
    export default GroupDropDown;

    BestRegards
    Sama

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

You must be logged in to reply to this topic.