jqxGrid error when cell value changed

[soojungParticipant]

Hello,
my jqxGrid’s editable property is ‘true’.
When I type text and remove focus of grid, then error is appear and text not changed.
Error is : Cannot read property ‘localdata’ of undefined
I think that’s because this.refs.myGrid is undefined… I want to use ref property as (ref) => {this.myGrid = ref;} What’s my problem?

render() {
    let source =
         {
           url: "/api/orderregi",
             localdata: this.props.orderRegiSource,
             datatype: 'json',
             datafields: [
                 { name: 'No', type: 'string' },
                 { name: 'PClassANm', type: 'string' },
                 { name: 'CodeName', type: 'string' },
                 { name: 'PartName', type: 'string' },
                 { name: 'PartCode', type: 'string' },
                 { name: 'VATFlag', type: 'string' },
                 { name: 'UnitQty', type: 'int' },
                 { name: 'ODan', type: 'int' },
                 { name: 'OBox', type: 'int' },
                 { name: 'OQTy', type: 'int' },
                 { name: 'Amount', type: 'int' }
             ]
         };

    let dataAdapter = new jqx.dataAdapter(source, {
      loadComplete: () => {
        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>
    );
  }

[soojungParticipant]

Plus, I test ‘setcellvalue’ in loadComplete callback, but the same error appear.

loadComplete: () => {
        var records = dataAdapter.records;
        this.myGrid.source({localdata: records});
        this.myGrid.setcellvalue(1,'OBox',2);    // Cannot read property 'localdata' of undefined
      }

Specific error content is this

jqxgrid.js:7 Uncaught TypeError: Cannot read property 'localdata' of undefined
    at b.(:4000/anonymous function).setcellvalue (http://localhost:4000/jqwidgets/jqxgrid.js:7:175085)
    at Object.a.jqx.invoke (jqxcore.js:15)
    at Object.a.jqx.jqxWidgetProxy (jqxcore.js:15)
    at HTMLDivElement.<anonymous> (jqxcore.js:15)
    at Function.each (jquery-2.1.1.min.js:2)
    at n.fn.init.each (jquery-2.1.1.min.js:2)
    at n.fn.init.a.fn.(:4000/anonymous function) [as jqxGrid] (http://localhost:4000/jqwidgets/jqxcore.js:15:67878)
    at JqxGrid.setcellvalue (bundle.js:41997)
    at Object.loadComplete (bundle.js:40405)
    at Object.success (jqxdata.js:7)

[HristoParticipant]

Hello soojung,

I do not understand what you try to achieve.
After the Grid is initialized you want to load the data again within.
You should use the source object that is used for the implementation of the DataAdapter not the property source of the Grid.
Please, take a look at this example, it demonstrates how to update the localdata:
http://jsfiddle.net/jqwidgets/dRbAE/
(you could use this approach)

Also, I would like to suggest you look at this article it could be helpful:
https://www.jqwidgets.com/jquery-widgets-documentation/
There you could find more details about the DataAdapter.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts