jQWidgets Forums

jQuery UI Widgets Forums React jqxgrid data not display in table

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 7 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • jqxgrid data not display in table #99821

    amitkmrchouhan
    Participant

    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.

    jqxgrid data not display in table #99839

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxgrid data not display in table #99845

    amitkmrchouhan
    Participant

    So 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.

    jqxgrid data not display in table #99863

    Hristo
    Participant

    Hello amitkmrchouhan,

    Please, post in one place similar posts.
    It is a duplicate post.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.