jQWidgets Forums
jQuery UI Widgets › Forums › React › jqxgrid data not display in table
Tagged: jqxgrid reactjs
This topic contains 3 replies, has 2 voices, and was last updated by Hristo 7 years, 1 month ago.
-
Author
-
Hi I am using reactjs jqxgrid library.
I am fetching data in the table through calling an api but in the table its shows me no data display.
Here is my code
—————call an api
————createRows=()=>{
this.setState({loader:true});
console.log(“inside create rows”);
let url=CONSTANTS.event;
console.log(url);
fetch(url,{
method:’GET’
})
.then((response)=>response.json())
.then((responseJson)=>{
console.log(responseJson);
let row=[];
for(let i=0; i<responseJson.data.length; i++){
let time_period=””;
if(responseJson.data[i][“time_per_unit”] === 1){
time_period=’Days’;
}
else if(responseJson.data[i][“time_per_unit”] === 2){
time_period=’Month’;
}
else if(responseJson.data[i][“time_per_unit”] === 3){
time_period=’Year’;
}
row.push({
id:responseJson.data[i][“event_id”],
event_name:responseJson.data[i][“event_type”],
category:responseJson.data[i][“event_cat”],
time_period:time_period,
table_mapped:”no-data”,
count_high:responseJson.data[i][“high_evnt_cnt”],
count_medium:responseJson.data[i][“med_evnt_cnt”],
count_low:responseJson.data[i][“low_evnt_cnt”],
has_num_val:1,
})
}
console.log(row);
this.setState({rows:row});
this.setState({loader:false});
}).catch((error)=>{
console.log(“error while getting rows”,error);
});}
render(){
let columns =
[
{ text: ‘Action’, datafield:’Image’, width:’10%’},
{ text : ‘#’, datafield: ‘id’, width: ‘10%’},
{ text: ‘Event Name’, datafield: ‘event_name’, width: ‘10%’},
{ text: ‘Category’, datafield: ‘category’,width: ‘10%’ },
{ text: ‘Time Period’, datafield: ‘time_period’, width: ‘10%’},
{ text: ‘# Tables Mapped’, datafield: ‘table_mapped’, width: ‘20%’},
{ text: ‘Event Count: High’, datafield: ‘count_high’, width: ‘10%’ },
{ text: ‘Event Count: Medium’, datafield: ‘count_medium’ ,width: ‘10%’},
{ text: ‘Event Count: Low’, datafield: ‘count_low’,width: ‘10%’ },
{ text: ‘Hash Numeric Value’, datafield: ‘has_num_val’, width: ‘10%’ }
];
let data1 = this.state.rows;
console.log(data1);let source =
{
localdata: this.state.rows,
datatype: ‘json’,
datafields: [
{ name: ‘Image’},
{ name: ‘id’},
{ name: ‘event_name’ },
{ name: ‘category’ },
{ name: ‘time_period’ },
{ name: ‘table_mapped’ },
{ name: ‘count_high’ },
{ name: ‘count_medium’ },
{ name: ‘count_low’},
{ name: ‘has_num_val’ },
],
// localdata:this.state.rows
};
let dataAdapter = new window.$.jqx.dataAdapter(source);
console.log(dataAdapter);
return(
<div>
<JqxGrid ref=’myGrid’
width={‘100%’} pageable={true} source={dataAdapter}
sortable={true} altrows={true} enabletooltips={true}
autoheight={true} editable={false} columns={columns}
selectionmode={‘singlecell’}/>
</div>
)
}All the things fine but in the rows its shows me no data display.
Hello amitkmrchouhan,
Please, provide us the more accurate example and with details.
Could you clarify it, is there any error message in the console?Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comSo If i set localData=data which i define inside render() function then inside table data is coming but when I called api in componentWillMount() function to fetch data from database and set localdata=this.state.rows, then inside table its shows me no data display.
and when i do console.log(dataAdapter); then inside localdata its shows me whole data with datafiled.Hello amitkmrchouhan,
Please, post in one place similar posts.
It is a duplicate post.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.