bind react grid

[kashehiParticipant]

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
}

[svetoslav_borislavovParticipant]

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/

[kashehiParticipant]

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;

[svetoslav_borislavovParticipant]

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/

[kashehiParticipant]

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

[svetoslav_borislavovParticipant]

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/

[kashehiParticipant]

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

[svetoslav_borislavovParticipant]

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/

[kashehiParticipant]

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;

})

}

[svetoslav_borislavovParticipant]

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

[kashehiParticipant]

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
}

[svetoslav_borislavovParticipant]

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

[kashehiParticipant]

Thank You soooo much, It works.
Best Regards

[svetoslav_borislavovParticipant]

Hi,

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

Best regards,
Svetoslav Borislavov
jQWidgets Team

[kashehiParticipant]

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

[Author]

Posts