jqxGrid columnheader is not changed when I get data from server

[soojungParticipant]

Hello,
I get data from server and change grid source and columns.
But column header is not changed.
What’s my problem?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { orderRegiRequest } from '../actions/grid';
import JqxGrid from '../jqwidgets-react/react_jqxgrid.js';

class jqxGrid extends Component {
  constructor(props) {
    super(props);

    this.state = {
      empInfo: [],
      source: {},
      columns: []
    }

    this.orderRegi = this.orderRegi.bind(this);
    this.myGridRefBuilder = this.myGridRefBuilder.bind(this);
  }

  orderRegi() {
    this.props.orderRegiRequest().then(
      () => {
        var source2 =
          {
            datatype: 'json',
            datafields: [
                { name: 'No', type: 'string' },
                { name: 'CodeName', type: 'string' },
                { name: 'PartCode', type: 'string' }
            ],
            localdata: this.props.orderRegiSource
          };

        var columns2 =
          [
            { text: 'No', datafield: 'No', width: 50, editable: false },
            { text: 'Maker', datafield: 'CodeName', width: 100, editable: false },
            { text: 'ProdCode', datafield: 'PartCode', width: 100, editable: false }
          ];

        this.setState({
          source: source2,
          columns: columns2
        });
      }
    )
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.source !== this.state.source) {
      this.myGrid.source(this.state.source);
    }

    if (prevState.columns !== this.state.columns) {
      this.myGrid.columns(this.state.columns);
    }
  }

  myGridRefBuilder(ref) {
    this.myGrid = ref;
  }

  componentDidMount() {
    if (this.props.gubun === "orderRegi") {
      this.orderRegi();
    }
  }

  render() {
    let dataAdapter = new jqx.dataAdapter(this.state.source);

    return (
      <JqxGrid width={850} ref={this.myGridRefBuilder} editable={true}
                source={dataAdapter} columns={this.state.columns} />
    );
  }
}

const mapStateToProps = (state) => {
  return {
    orderRegiSource: state.orderRegi.search.source
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    orderRegiRequest: () => {
      return dispatch(orderRegiRequest());
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(jqxGrid);

[HristoParticipant]

Hello soojung,

It looks like you try to re-initialize the whole Grid. When you want to make update of the data you could update the DataAdapter.
You could update the source property of the Grid with new DataAdapter or update the old one.
I would like to mention this topic, too:
https://www.jqwidgets.com/community/topic/update-grid-source/

I would like to mention that if you update your data correctly you could set an ‘if statement’ in the “rendered” callback depends on the values to update the column’s header.
Also, it is possible to update the whole columns property.
Could you clarify it? Is there any error message?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[soojungParticipant]

Hello Hristo,
Sorry, I can’t understand your solution. In that link, Peter wrote DataAdapter code like this, so it updated.

$("#button").click(function () {           
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").jqxGrid({ source: dataAdapter });
            });

Didn’t I write same way? I used setState method and set source at componentDidUpdate() method. Data is successfully reloaded but still column header is not changed.
I wrote columns in constructor method, then it shows correctly… But is this solution right?

class jqxGrid extends Component {
  constructor(props) {
    super(props);
    var columns = [];

    if (this.props.gubun == "orderRegi") {
      columns =
        [
            { text: 'No', datafield: 'No', width: 50, editable: false },
            { text: 'Maker', datafield: 'CodeName', width: 100, editable: false },
            { text: 'ProdCode', datafield: 'PartCode', width: 100, editable: false }
        ];
    }

    this.state = {
      empInfo: [],
      source: {},
      columns: columns
    }

    this.orderRegi = this.orderRegi.bind(this);
  }

[soojungParticipant]

Plus, when I scroll inside of grid horizontally, columnheader fixed and don’t move. But if I give display:nonestyle to ‘columntablejqxGridjqx4193a5cee8fa’, there is moving column header inside.

[HristoParticipant]

Hello soojung,

If you do not have implemented variable with the structure of the columns property then it will act on appearing on the Grid.
This solution with the creation of the structure of the columns in the constructor is ok.
I would like to mention the correct place to change the style of the widgets is classes or internal methods of the widgets.
Please, take a look available classes in the “Styling and Appearance” page:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-styling-and-appearance.htm?search=grid

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[soojungParticipant]

Hello Hristo,
I am new at React.js so it was hard to understand. So I tried to study dataAdapter plugins and styling columns as you mentioned. Finally I found solution without using any lifecycle method in React. (Column header error gone too!)

  render() {
    let source =
         {
           url: "/api/orderregi",
             localdata: this.props.orderRegiSource,
             datatype: 'json',
             datafields: [
                 { name: 'CodeName', type: 'string' },
                 { name: 'PartName', type: 'string' },
                 { name: 'PartCode', type: 'string' }
             ]
         };

    let dataAdapter = new jqx.dataAdapter(source, {
      loadComplete: () => {
        // get data records.
        var records = dataAdapter.records;
        this.myGrid.source({localdata: records});
      }
    });

    return (
      <div>
        <JqxGrid width={850} ref={(ref) => {this.myGrid = ref;}}
          editable={true} source={dataAdapter} columns={this.props.orderRegiColumns} />
      </div>

    );
  }

Thank you for guide me.

[Author]

Posts