jQuery UI Widgets Forums React jqxgrid data not populated in the table dynamically

This topic contains 10 replies, has 2 voices, and was last updated by  Hristo 5 years, 12 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author

  • amitkmrchouhan
    Participant

    So my jqxgrid code is:-
    ———————–

    componentWillMount()
    console.log(“inside create rows”);
    let url=CONSTANTS.new_url;
    console.log(url);
    fetch(url,{
    method:’GET’
    })
    .then((response)=>response.json())
    .then((responseJson)=>{
    console.log(responseJson);
    let row=[];
    }
    row.push({
    id:responseJson.data[i][“id”],
    abc:responseJson.data[i][“abc”],
    xyz:responseJson.data[i][“xyz”],
    }
    console.log(row);

    this.setState({rows:row});
    this.setState({loader:false});
    })

    .catch((error)=>{
    console.log(“error while getting rows”,error);
    });

    }
    render(){
    let imageMenuRenderer = (row, datafield, value,rowdata)=>{
    console.log(rowdata);

    return ‘<div style=”cursor: pointer;”></div>\
    \
    ‘;
    }

    let columns =
    [
    { text: ‘Action’, datafield:’Image’, width:’5%’,cellsrenderer:imageMenuRenderer },
    { text: ‘abc’, datafield: ‘abc’, width: ‘10%’ },
    { text: ‘xyz’, datafield: ‘xyz’,width: ‘10%’ },

    ];
    let source =
    {
    data: this.state.rows,
    datatype:’array’,
    datafields: [
    { name: ‘Image’},
    { name: ‘abc’, type: ‘string’ },
    { name: ‘xyz’ , type: ‘number’},

    ],
    // localdata:this.state.rows
    };
    let dataAdapter = new window.$.jqx.dataAdapter(source);
    return(
    <JqxGrid ref=’myGrid_a’
    width={‘100%’} pageable={true} source={dataAdapter}
    sortable={true} altrows={true} enabletooltips={true}
    autoheight={true} editable={false} columns={columns} selectionmode={‘singlecell’}

    />
    );
    }

    Table and column is coming but row data which is call from componentwillmount is not set in the table.
    In table its only shows me no data display.


    Hristo
    Participant

    Hello amitkmrchouhan,

    I would like to ask you for a little bit more clear example (with indent).
    Also, what you want to achieve and try to use the componentWillMount?
    Is there any error message?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    amitkmrchouhan
    Participant

    Hi Hristo,

    class Event extends Component
    {
    constructor()
    {
    super();
    this.state = {
    checkButtonValue:””,
    newEventModal:false,
    mapTableModal:false,
    rows:[],
    };
    }

    componentWillMount()
    {
    console.log(‘Inside componentWillMount’);
    let seesion_data = sessionStorage.getItem(‘checkLogin’);
    console.log(seesion_data);
    if(seesion_data.toString() !== “1”)
    {
    sessionStorage.removeItem(“checkLogin”);
    history.push({
    pathname: “/”
    });
    history.go();
    }

    else{
    console.log(“”);
    this.createRows();
    }
    }

    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”].toString(),
    event_name:responseJson.data[i][“event_type”].toString(),
    category:responseJson.data[i][“event_cat”].toString(),
    time_period:time_period.toString(),
    table_mapped:”+”.toString(),
    count_high:responseJson.data[i][“high_evnt_cnt”].toString(),
    count_medium:responseJson.data[i][“med_evnt_cnt”].toString(),
    count_low:responseJson.data[i][“low_evnt_cnt”].toString(),
    has_num_val:”1″.toString(),
    })
    }
    console.log(row);
    this.setState({rows:row});
    this.setState({loader:false});
    })

    .catch((error)=>{
    console.log(“error while getting rows”,error);
    });

    }

    componentDidMount(){
    console.log(“inside componentDidMount”);
    this.refs.myGrid_a.on(‘cellclick’,(event)=>{
    if(event.args.datafield === “table_mapped”){
    console.log(“inside table_mapped”);
    this.setState({mapTableModal:true});
    }
    });

    let editrow = -1;
    this.refs.myGrid_a.on(‘contextmenu’, () => {
    return false;
    });

    this.refs.myGrid_a.on(‘cellclick’, (event) => {
    console.log(“inside oncellclick”);
    console.log(event.args);
    if(event.args.datafield === “Image”){
    if (!event.args.rightclick) {
    this.refs.myGrid_a.selectrow(event.args.rowindex);
    let scrollTop = $(window).scrollTop();
    let scrollLeft = $(window).scrollLeft();
    console.log(scrollTop);
    this.refs.myMenu.open(parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
    return false;
    }
    }

    });

    this.refs.myMenu.on(‘itemclick’, (event) => {
    let args = event.args;
    let rowindex = this.refs.myGrid_a.getselectedrowindex();
    if ($.trim($(args).text()) == ‘View\/Edit’) {
    editrow = rowindex;
    console.log(editrow);
    // this.refs.myWindow.position({ x: 60, y: 60 });
    this.addMapTable();
    // get the clicked row’s data and initialize the input fields.
    // let dataRecord = this.refs.myGrid_a.getrowdata(editrow);
    // this.refs.firstName.val(dataRecord.firstname);
    // this.refs.lastName.val(dataRecord.lastname);
    // this.refs.product.val(dataRecord.productname);
    // this.refs.quantity.decimal(dataRecord.quantity);
    // this.refs.price.decimal(dataRecord.price);
    // // show the popup window.
    // this.refs.myWindow.open();
    }
    else {
    let rowid = this.refs.myGrid_a.getrowid(rowindex);
    console.log(rowid);
    this.refs.myGrid_a.deleterow(rowid);
    }
    });

    }

    tabValue=(value)=>{
    console.log(“inside tabValue”);
    console.log(value);
    this.setState({checkButtonValue:value});
    }

    searchData=(newValue)=>{
    console.log(newValue);
    }
    onErrorFunction = (e, fieldName) => {
    if (fieldName === “variationField”) {
    this.setState({variationFlag: e});
    }
    if (fieldName === “outputField”) {
    this.setState({outputFlag: e});
    }
    }
    addTable=()=>{
    console.log(“inside addTable”);
    this.setState({
    newEventModal:true,
    })
    // let datarow = 1;
    // this.refs.myGrid1.addrow(null, datarow);
    }

    _renderAddModal = (hideAddModal,dataAdapter,columns) =>{

    if(this.state.newEventModal === true)
    {
    let existing_rule_value = “New”;
    insideModal = true;
    return(
    <EventModal show={this.state.newEventModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
    );
    }
    else if(this.state.mapTableModal === true){
    let existing_rule_value = “Map”;
    insideModal = true;
    return(
    <MapModal show={this.state.mapTableModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
    );
    }
    else{
    if(insideModal === true){
    insideModal = false;
    location.reload();
    }
    return(
    <div>
    <div className=”container-source”>
    <div className=”first-tab-container-table”>
    <div className=”first-tab-serach”>
    <NormalInput
    placeholder=”Search”
    onChange={(val) => this.searchData(val)}
    onError={this.onErrorFunction}
    fieldName=”searchField”
    />

    </div>
    <ReactTooltip class=’extraClass’ delayHide={1000} effect=’solid’/>
    <div className=”page-icon add-button-new” data-tip=”Add ” onClick={() => this.addTable()} value={this.state.addNewTable} ></div>
    </div>
    <div className=”event-main-table-container” >
    <JqxGrid ref=’myGrid_a’
    width={‘100%’} pageable={true} source={dataAdapter}
    sortable={true} altrows={true} enabletooltips={true}
    autoheight={true} editable={false} columns={columns} selectionmode={‘singlecell’}

    />
    <div style={{ marginTop: 30 }}>
    <div id=’cellbegineditevent’ />
    <div style={{ marginTop: 10 }} id=’cellendeditevent’ />
    </div>
    <JqxMenu ref=’myMenu’
    width={200} height={58} mode={‘popup’} autoOpenPopup={false}
    >

    • View/Edit
    • Delete

    </JqxMenu>
    </div>
    </div>
    </div>

    );
    }
    }
    render(){
    let hideAddModal = () => this.setState({ newEventModal: false,mapTableModal:false ,existing_rule_value:””});
    let cellsrenderer = (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
    if (value < 20) {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
    }
    else {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
    }
    }
    // let TableSyncedClick = function($event, row, column, value) {
    // console.log(“click”);
    // }
    //
    // let cellsrendererTableSynced = (row, column, value, defaultHtml) => {
    // let str = ‘<div value={row} onClick= {()=> this.TableSyncedClick(row)}>’ + value + </div>
    // return str;
    //
    //
    //
    // }
    let imageMenuRenderer = (row, datafield, value,rowdata)=>{
    console.log(rowdata);

    return ‘<div style=”cursor: pointer;”></div>\
    \
    ‘;
    }

    let changePointer=(row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
    return ‘<div style=”cursor: pointer;”>’+value+'</div>’;
    }

    let data = [{“id”:’1′, “event_name”: ‘e1’, “category”: ‘P’, “time_period”:’tp1′, “table_mapped”:’1′, “count_high”:’ch1′, “count_medium”: ‘cm1’, “count_low”: ‘cl1’, “has_num_val”: ‘num1′},
    {“id”:’2’, “event_name”: ‘e2’, “category”: ‘X’, “time_period”:’tp2′, “table_mapped”:’5′, “count_high”:’ch2′, “count_medium”: ‘cm2’, “count_low”: ‘cl2’, “has_num_val”: ‘num2′},
    {“id”:’3’, “event_name”: ‘e3’, “category”: ‘B’, “time_period”:’tp3′, “table_mapped”:’6′, “count_high”:’ch3′, “count_medium”: ‘cm3’, “count_low”: ‘cl3’, “has_num_val”: ‘num3′},
    {“id”:’4’, “event_name”: ‘e4’, “category”: ‘M’, “time_period”:’tp4′, “table_mapped”:’2′, “count_high”:’ch4′, “count_medium”: ‘cm4’, “count_low”: ‘cl4’, “has_num_val”: ‘num4′},
    {“id”:’5’, “event_name”: ‘e5’, “category”: ‘A’, “time_period”:’tp5′, “table_mapped”:’3′, “count_high”:’ch5′, “count_medium”: ‘cm5’, “count_low”: ‘cl5’, “has_num_val”: ‘num5’}];
    console.log(data);
    let columns =
    [
    { text: ‘Action’, datafield:’Image’, width:’10%’,cellsrenderer:imageMenuRenderer},
    { 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%’, cellsrenderer:changePointer},
    { 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%’ }
    // { text: ‘Time Unit’, datafield: ‘time_unit’,width: 100 }
    ];
    let data1 = this.state.rows;
    console.log(data1);

    let source =
    {
    localdata:this.state.rows,
    //localdata: data,
    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’ },
    ],

    };
    let dataAdapter = new window.$.jqx.dataAdapter(source);
    console.log(dataAdapter);
    return(
    <div>
    <Header active={6}/>
    <div className=”main-window”>
    <div className=”stage”></div>
    <div className=”content”>
    <div className=”top-bar”>
    <ReactTabButton
    optionsName={[“Event”]}
    value={“Event”}
    onChange={this.tabValue}
    />
    </div>
    {this._renderAddModal(hideAddModal,dataAdapter,columns)}
    </div>
    </div>
    </div>
    );
    }
    }

    export default Event;

    This is my code.
    but In my jqxgrid table its shows me no data display.
    And as i am not getting any error.


    amitkmrchouhan
    Participant

    and in console I am not getting any error.

    and my dataadpater gives response like this.

    output
    ———–

    $.jqx.dataAdapter {_source: {…}, _options: {…}, records: Array(0), _downloadComplete: Array(0), _bindingUpdate: Array(0)}
    records
    :
    []
    _bindingUpdate
    :
    []
    _downloadComplete
    :
    []
    _options
    :
    {}
    _source
    :
    datafields
    :
    (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    datatype
    :
    “json”
    localdata
    :
    Array(2)
    0
    :
    category
    :
    “1”
    count_high
    :
    “1”
    count_low
    :
    “3”
    count_medium
    :
    “4”
    event_name
    :
    “abc”
    has_num_val
    :
    “1”
    id
    :
    “1”
    table_mapped
    :
    “+”
    time_period
    :
    “Days”
    __proto__
    :
    Object
    1
    :
    {id: “2”, event_name: “wsdf”, category: “2”, time_period: “Days”, table_mapped: “+”, …}
    length
    :
    2
    __proto__
    :
    Array(0)
    __proto__
    :
    Object
    __proto__
    :
    Object


    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.


    amitkmrchouhan
    Participant

    class Event extends Component
    {
    constructor()
    {
    super();
    this.state = {
    checkButtonValue:””,
    newEventModal:false,
    mapTableModal:false,
    rows:[],
    };
    }

    componentWillMount()
    {
    console.log(‘Inside componentWillMount’);
    let seesion_data = sessionStorage.getItem(‘checkLogin’);
    console.log(seesion_data);
    if(seesion_data.toString() !== “1”)
    {
    sessionStorage.removeItem(“checkLogin”);
    history.push({
    pathname: “/”
    });
    history.go();
    }

    else{
    console.log(“”);
    this.createRows();
    }
    }

    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”].toString(),
    event_name:responseJson.data[i][“event_type”].toString(),
    category:responseJson.data[i][“event_cat”].toString(),
    time_period:time_period.toString(),
    table_mapped:”+”.toString(),
    count_high:responseJson.data[i][“high_evnt_cnt”].toString(),
    count_medium:responseJson.data[i][“med_evnt_cnt”].toString(),
    count_low:responseJson.data[i][“low_evnt_cnt”].toString(),
    has_num_val:”1″.toString(),
    })
    }
    console.log(row);
    this.setState({rows:row});
    this.setState({loader:false});
    })

    .catch((error)=>{
    console.log(“error while getting rows”,error);
    });

    }

    componentDidMount(){
    console.log(“inside componentDidMount”);
    this.refs.myGrid_a.on(‘cellclick’,(event)=>{
    if(event.args.datafield === “table_mapped”){
    console.log(“inside table_mapped”);
    this.setState({mapTableModal:true});
    }
    });

    let editrow = -1;
    this.refs.myGrid_a.on(‘contextmenu’, () => {
    return false;
    });

    this.refs.myGrid_a.on(‘cellclick’, (event) => {
    console.log(“inside oncellclick”);
    console.log(event.args);
    if(event.args.datafield === “Image”){
    if (!event.args.rightclick) {
    this.refs.myGrid_a.selectrow(event.args.rowindex);
    let scrollTop = $(window).scrollTop();
    let scrollLeft = $(window).scrollLeft();
    console.log(scrollTop);
    this.refs.myMenu.open(parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
    return false;
    }
    }

    });

    this.refs.myMenu.on(‘itemclick’, (event) => {
    let args = event.args;
    let rowindex = this.refs.myGrid_a.getselectedrowindex();
    if ($.trim($(args).text()) == ‘View\/Edit’) {
    editrow = rowindex;
    console.log(editrow);
    // this.refs.myWindow.position({ x: 60, y: 60 });
    this.addMapTable();
    // get the clicked row’s data and initialize the input fields.
    // let dataRecord = this.refs.myGrid_a.getrowdata(editrow);
    // this.refs.firstName.val(dataRecord.firstname);
    // this.refs.lastName.val(dataRecord.lastname);
    // this.refs.product.val(dataRecord.productname);
    // this.refs.quantity.decimal(dataRecord.quantity);
    // this.refs.price.decimal(dataRecord.price);
    // // show the popup window.
    // this.refs.myWindow.open();
    }
    else {
    let rowid = this.refs.myGrid_a.getrowid(rowindex);
    console.log(rowid);
    this.refs.myGrid_a.deleterow(rowid);
    }
    });

    }

    tabValue=(value)=>{
    console.log(“inside tabValue”);
    console.log(value);
    this.setState({checkButtonValue:value});
    }

    searchData=(newValue)=>{
    console.log(newValue);
    }
    onErrorFunction = (e, fieldName) => {
    if (fieldName === “variationField”) {
    this.setState({variationFlag: e});
    }
    if (fieldName === “outputField”) {
    this.setState({outputFlag: e});
    }
    }
    addTable=()=>{
    console.log(“inside addTable”);
    this.setState({
    newEventModal:true,
    })
    // let datarow = 1;
    // this.refs.myGrid1.addrow(null, datarow);
    }

    _renderAddModal = (hideAddModal,dataAdapter,columns) =>{

    if(this.state.newEventModal === true)
    {
    let existing_rule_value = “New”;
    insideModal = true;
    return(
    <EventModal show={this.state.newEventModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
    );
    }
    else if(this.state.mapTableModal === true){
    let existing_rule_value = “Map”;
    insideModal = true;
    return(
    <MapModal show={this.state.mapTableModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
    );
    }
    else{
    if(insideModal === true){
    insideModal = false;
    location.reload();
    }
    return(
    <div>
    <div className=”container-source”>
    <div className=”first-tab-container-table”>
    <div className=”first-tab-serach”>
    <NormalInput
    placeholder=”Search”
    onChange={(val) => this.searchData(val)}
    onError={this.onErrorFunction}
    fieldName=”searchField”
    />

    </div>
    <ReactTooltip class=’extraClass’ delayHide={1000} effect=’solid’/>
    <div className=”page-icon add-button-new” data-tip=”Add ” onClick={() => this.addTable()} value={this.state.addNewTable} ></div>
    </div>
    <div className=”event-main-table-container” >
    <JqxGrid ref=’myGrid_a’
    width={‘100%’} pageable={true} source={dataAdapter}
    sortable={true} altrows={true} enabletooltips={true}
    autoheight={true} editable={false} columns={columns} selectionmode={‘singlecell’}

    />
    <div style={{ marginTop: 30 }}>
    <div id=’cellbegineditevent’ />
    <div style={{ marginTop: 10 }} id=’cellendeditevent’ />
    </div>
    <JqxMenu ref=’myMenu’
    width={200} height={58} mode={‘popup’} autoOpenPopup={false}
    >

    • View/Edit
    • Delete

    </JqxMenu>
    </div>
    </div>
    </div>

    );
    }
    }
    render(){
    let hideAddModal = () => this.setState({ newEventModal: false,mapTableModal:false ,existing_rule_value:””});
    let cellsrenderer = (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
    if (value < 20) {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
    }
    else {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
    }
    }
    // let TableSyncedClick = function($event, row, column, value) {
    // console.log(“click”);
    // }
    //
    // let cellsrendererTableSynced = (row, column, value, defaultHtml) => {
    // let str = ‘<div value={row} onClick= {()=> this.TableSyncedClick(row)}>’ + value + </div>
    // return str;
    //
    //
    //
    // }
    let imageMenuRenderer = (row, datafield, value,rowdata)=>{
    console.log(rowdata);

    return ‘<div style=”cursor: pointer;”></div>\
    \
    ‘;
    }

    let changePointer=(row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
    return ‘<div style=”cursor: pointer;”>’+value+'</div>’;
    }

    let data = [{“id”:’1′, “event_name”: ‘e1’, “category”: ‘P’, “time_period”:’tp1′, “table_mapped”:’1′, “count_high”:’ch1′, “count_medium”: ‘cm1’, “count_low”: ‘cl1’, “has_num_val”: ‘num1′},
    {“id”:’2’, “event_name”: ‘e2’, “category”: ‘X’, “time_period”:’tp2′, “table_mapped”:’5′, “count_high”:’ch2′, “count_medium”: ‘cm2’, “count_low”: ‘cl2’, “has_num_val”: ‘num2′},
    {“id”:’3’, “event_name”: ‘e3’, “category”: ‘B’, “time_period”:’tp3′, “table_mapped”:’6′, “count_high”:’ch3′, “count_medium”: ‘cm3’, “count_low”: ‘cl3’, “has_num_val”: ‘num3′},
    {“id”:’4’, “event_name”: ‘e4’, “category”: ‘M’, “time_period”:’tp4′, “table_mapped”:’2′, “count_high”:’ch4′, “count_medium”: ‘cm4’, “count_low”: ‘cl4’, “has_num_val”: ‘num4′},
    {“id”:’5’, “event_name”: ‘e5’, “category”: ‘A’, “time_period”:’tp5′, “table_mapped”:’3′, “count_high”:’ch5′, “count_medium”: ‘cm5’, “count_low”: ‘cl5’, “has_num_val”: ‘num5’}];
    console.log(data);
    let columns =
    [
    { text: ‘Action’, datafield:’Image’, width:’10%’,cellsrenderer:imageMenuRenderer},
    { 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%’, cellsrenderer:changePointer},
    { 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%’ }
    // { text: ‘Time Unit’, datafield: ‘time_unit’,width: 100 }
    ];
    let data1 = this.state.rows;
    console.log(data1);

    let source =
    {
    localdata:this.state.rows,
    //localdata: data,
    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’ },
    ],

    };
    let dataAdapter = new window.$.jqx.dataAdapter(source);
    console.log(dataAdapter);
    return(
    <div>
    <Header active={6}/>
    <div className=”main-window”>
    <div className=”stage”></div>
    <div className=”content”>
    <div className=”top-bar”>
    <ReactTabButton
    optionsName={[“Event”]}
    value={“Event”}
    onChange={this.tabValue}
    />
    </div>
    {this._renderAddModal(hideAddModal,dataAdapter,columns)}
    </div>
    </div>
    </div>
    );
    }
    }

    export default Event;


    amitkmrchouhan
    Participant

    In componentwillmount() I call the api when user go first time in my page. so this componentwillmount() call before render() function and and i want fetch rows data from database and I set these row data to dataadpater.


    Hristo
    Participant

    Hello amitkmrchouhan,

    I would like to suggest you think to change using the “componentWillMount” you could use constructor() instead of it.
    Also, please, take a look at this on the official site. (‘componentWillMount’ will stop working after version 17)
    Is there any error messages?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 6 years ago by  Hristo.

    amitkmrchouhan
    Participant

    Hi Hristo Hristov,
    I call my api in constructor and still i get the same result. In table its still shows me no data display.
    I am not getting any error in console.
    here is my changed code Please see it.

    `class Event extends Component
    {
    constructor()
    {
    super();
    this.state = {
    checkButtonValue:””,
    newEventModal:false,
    mapTableModal:false,
    rows:[],
    };
    //this.createRows();
    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”].toString(),
    event_name:responseJson.data[i][“event_type”].toString(),
    category:responseJson.data[i][“event_cat”].toString(),
    time_period:time_period.toString(),
    table_mapped:”+”.toString(),
    count_high:responseJson.data[i][“high_evnt_cnt”].toString(),
    count_medium:responseJson.data[i][“med_evnt_cnt”].toString(),
    count_low:responseJson.data[i][“low_evnt_cnt”].toString(),
    has_num_val:”1″.toString(),
    })
    }
    console.log(row);
    this.setState({rows:row});
    this.setState({loader:false});
    })

    .catch((error)=>{
    console.log(“error while getting rows”,error);
    });

    }

    componentWillMount()
    {
    console.log(‘Inside componentWillMount’);
    let seesion_data = sessionStorage.getItem(‘checkLogin’);
    console.log(seesion_data);
    if(seesion_data.toString() !== “1”)
    {
    sessionStorage.removeItem(“checkLogin”);
    history.push({
    pathname: “/”
    });
    history.go();
    }

    else{
    console.log(“”);

    }
    }

    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”].toString(),
    event_name:responseJson.data[i][“event_type”].toString(),
    category:responseJson.data[i][“event_cat”].toString(),
    time_period:time_period.toString(),
    table_mapped:”+”.toString(),
    count_high:responseJson.data[i][“high_evnt_cnt”].toString(),
    count_medium:responseJson.data[i][“med_evnt_cnt”].toString(),
    count_low:responseJson.data[i][“low_evnt_cnt”].toString(),
    has_num_val:”1″.toString(),
    })
    }
    console.log(row);
    this.setState({rows:row});
    this.setState({loader:false});
    })

    .catch((error)=>{
    console.log(“error while getting rows”,error);
    });

    }

    componentDidMount(){
    console.log(“inside componentDidMount”);
    this.refs.myGrid_a.on(‘cellclick’,(event)=>{
    if(event.args.datafield === “table_mapped”){
    console.log(“inside table_mapped”);
    this.setState({mapTableModal:true});
    }
    });

    let editrow = -1;
    this.refs.myGrid_a.on(‘contextmenu’, () => {
    return false;
    });

    this.refs.myGrid_a.on(‘cellclick’, (event) => {
    console.log(“inside oncellclick”);
    console.log(event.args);
    if(event.args.datafield === “Image”){
    if (!event.args.rightclick) {
    this.refs.myGrid_a.selectrow(event.args.rowindex);
    let scrollTop = $(window).scrollTop();
    let scrollLeft = $(window).scrollLeft();
    console.log(scrollTop);
    this.refs.myMenu.open(parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
    return false;
    }
    }

    });

    this.refs.myMenu.on(‘itemclick’, (event) => {
    let args = event.args;
    let rowindex = this.refs.myGrid_a.getselectedrowindex();
    if ($.trim($(args).text()) == ‘View\/Edit’) {
    editrow = rowindex;
    console.log(editrow);
    // this.refs.myWindow.position({ x: 60, y: 60 });
    this.addMapTable();
    // get the clicked row’s data and initialize the input fields.
    // let dataRecord = this.refs.myGrid_a.getrowdata(editrow);
    // this.refs.firstName.val(dataRecord.firstname);
    // this.refs.lastName.val(dataRecord.lastname);
    // this.refs.product.val(dataRecord.productname);
    // this.refs.quantity.decimal(dataRecord.quantity);
    // this.refs.price.decimal(dataRecord.price);
    // // show the popup window.
    // this.refs.myWindow.open();
    }
    else {
    let rowid = this.refs.myGrid_a.getrowid(rowindex);
    console.log(rowid);
    this.refs.myGrid_a.deleterow(rowid);
    }
    });

    }

    tabValue=(value)=>{
    console.log(“inside tabValue”);
    console.log(value);
    this.setState({checkButtonValue:value});
    }

    searchData=(newValue)=>{
    console.log(newValue);
    }
    onErrorFunction = (e, fieldName) => {
    if (fieldName === “variationField”) {
    this.setState({variationFlag: e});
    }
    if (fieldName === “outputField”) {
    this.setState({outputFlag: e});
    }
    }
    addTable=()=>{
    console.log(“inside addTable”);
    this.setState({
    newEventModal:true,
    })
    // let datarow = 1;
    // this.refs.myGrid1.addrow(null, datarow);
    }

    _renderAddModal = (hideAddModal,dataAdapter,columns) =>{

    if(this.state.newEventModal === true)
    {
    let existing_rule_value = “New”;
    insideModal = true;
    return(
    <EventModal show={this.state.newEventModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
    );
    }
    else if(this.state.mapTableModal === true){
    let existing_rule_value = “Map”;
    insideModal = true;
    return(
    <MapModal show={this.state.mapTableModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
    );
    }
    else{
    if(insideModal === true){
    insideModal = false;
    location.reload();
    }
    return(
    <div>
    <div className=”container-source”>
    <div className=”first-tab-container-table”>
    <div className=”first-tab-serach”>
    <NormalInput
    placeholder=”Search”
    onChange={(val) => this.searchData(val)}
    onError={this.onErrorFunction}
    fieldName=”searchField”
    />

    </div>
    <ReactTooltip class=’extraClass’ delayHide={1000} effect=’solid’/>
    <div className=”page-icon add-button-new” data-tip=”Add ” onClick={() => this.addTable()} value={this.state.addNewTable} ></div>
    </div>
    <div className=”event-main-table-container” >
    <JqxGrid ref=’myGrid_a’
    width={‘100%’} pageable={true} source={dataAdapter}
    sortable={true} altrows={true} enabletooltips={true}
    autoheight={true} editable={false} columns={columns} selectionmode={‘singlecell’}

    />
    <div style={{ marginTop: 30 }}>
    <div id=’cellbegineditevent’ />
    <div style={{ marginTop: 10 }} id=’cellendeditevent’ />
    </div>
    <JqxMenu ref=’myMenu’
    width={200} height={58} mode={‘popup’} autoOpenPopup={false}
    >

    • View/Edit
    • Delete

    </JqxMenu>
    </div>
    </div>
    </div>

    );
    }
    }
    render(){
    let hideAddModal = () => this.setState({ newEventModal: false,mapTableModal:false ,existing_rule_value:””});
    let cellsrenderer = (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
    if (value < 20) {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
    }
    else {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
    }
    }
    // let TableSyncedClick = function($event, row, column, value) {
    // console.log(“click”);
    // }
    //
    // let cellsrendererTableSynced = (row, column, value, defaultHtml) => {
    // let str = ‘<div value={row} onClick= {()=> this.TableSyncedClick(row)}>’ + value + </div>
    // return str;
    //
    //
    //
    // }
    let imageMenuRenderer = (row, datafield, value,rowdata)=>{
    console.log(rowdata);

    return ‘<div style=”cursor: pointer;”></div>\
    \
    ‘;
    }

    let changePointer=(row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
    return ‘<div style=”cursor: pointer;”>’+value+'</div>’;
    }

    let data = [{“id”:’1′, “event_name”: ‘e1’, “category”: ‘P’, “time_period”:’tp1′, “table_mapped”:’1′, “count_high”:’ch1′, “count_medium”: ‘cm1’, “count_low”: ‘cl1’, “has_num_val”: ‘num1′},
    {“id”:’2’, “event_name”: ‘e2’, “category”: ‘X’, “time_period”:’tp2′, “table_mapped”:’5′, “count_high”:’ch2′, “count_medium”: ‘cm2’, “count_low”: ‘cl2’, “has_num_val”: ‘num2′},
    {“id”:’3’, “event_name”: ‘e3’, “category”: ‘B’, “time_period”:’tp3′, “table_mapped”:’6′, “count_high”:’ch3′, “count_medium”: ‘cm3’, “count_low”: ‘cl3’, “has_num_val”: ‘num3′},
    {“id”:’4’, “event_name”: ‘e4’, “category”: ‘M’, “time_period”:’tp4′, “table_mapped”:’2′, “count_high”:’ch4′, “count_medium”: ‘cm4’, “count_low”: ‘cl4’, “has_num_val”: ‘num4′},
    {“id”:’5’, “event_name”: ‘e5’, “category”: ‘A’, “time_period”:’tp5′, “table_mapped”:’3′, “count_high”:’ch5′, “count_medium”: ‘cm5’, “count_low”: ‘cl5’, “has_num_val”: ‘num5’}];
    console.log(data);
    let columns =
    [
    { text: ‘Action’, datafield:’Image’, width:’10%’,cellsrenderer:imageMenuRenderer},
    { 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%’, cellsrenderer:changePointer},
    { 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%’ }
    // { text: ‘Time Unit’, datafield: ‘time_unit’,width: 100 }
    ];
    let data1 = this.state.rows;
    console.log(data1);

    let source =
    {
    localdata:this.state.rows,
    //localdata: data,
    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’ },
    ],

    };
    let dataAdapter = new window.$.jqx.dataAdapter(source);
    console.log(dataAdapter);
    return(
    <div>
    <Header active={6}/>
    <div className=”main-window”>
    <div className=”stage”></div>
    <div className=”content”>
    <div className=”top-bar”>
    <ReactTabButton
    optionsName={[“Event”]}
    value={“Event”}
    onChange={this.tabValue}
    />
    </div>
    {this._renderAddModal(hideAddModal,dataAdapter,columns)}
    </div>
    </div>
    </div>
    );
    }
    }

    export default Event;


    amitkmrchouhan
    Participant

    I did not get any error.
    and in dataadpater I am getting rows. but it did not display in the table this is my question.
    when I put some hardcoded data that i declared in render then its display data in table.


    Hristo
    Participant

    Hello amitkmrchouhan,

    The example that you provide has a lot of rows of source code and we do not have the practice to debug such kind of data.
    I ask you for a simple example that demonstrates this issue.
    I tested this example below and it seems to work fine.
    In the mentioned example the data is generated in the constructor and set in state and after that is set to the DataAdapter.

    import React from 'react';
    import ReactDOM from 'react-dom';
     
    import JqxGrid from '../../jqwidgets-react/react_jqxgrid.js';
    import JqxButton from '../../jqwidgets-react/react_jqxbuttons.js';
    
    class App extends React.Component {
    	constructor(props) {
    		let generateData = () => {
    			let data = new Array();
    
    			let firstNames =
    				[
    					'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
    				];
    
    			let lastNames =
    				[
    					'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
    				];
    
    			let productNames =
    				[
    					'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
    				];
    
    			let priceValues =
    				[
    					'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
    				];
    
    			for (let i = 0; i < 20; i++) {
    				let row = {};
    				let productindex = Math.floor(Math.random() * productNames.length);
    				let price = parseFloat(priceValues[productindex]);
    				let quantity = 1 + Math.round(Math.random() * 10);
    				row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
    				row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
    				row['productname'] = productNames[productindex];
    				row['price'] = price;
    				row['quantity'] = quantity;
    				row['total'] = price * quantity;
    				data[i] = row;
    			}
    			
    			return data;
    		};
    		
    		super(props);
    		this.state = { records: generateData() };
    	}	
      
    	componentDidMount() {
    		this.refs.refresh.on('click', (event) => {
                console.log('refresh');
    			this.myGrid.refresh();
            });
    	}
    		
    	render() {
            let source =
                {
                    localdata: this.state.records,
                    datatype: 'array',
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ]
                };
    
            let dataAdapter = new jqx.dataAdapter(source);
    
            let columns =
                [
                    { text: 'Name', datafield: 'firstname', width: 120 },
                    { text: 'Last Name', datafield: 'lastname', width: 120 },
                    { text: 'Product', datafield: 'productname', width: 180 },
                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ];
    
            return (
    			<div>
    				<JqxGrid ref={ref => this.myGrid = ref}
    					width={850} source={dataAdapter} columns={columns}
    				/>
    				
    				<br/>
    				<JqxButton ref='refresh' value='Refresh' width={150} height={40} />				
    			</div>
            )
        }
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));

    NB: When trying to post a source code that includes <tags> you should replace its symbols with & l t ; and/or & g t ;

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 5 years, 12 months ago by  Hristo.
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.