[soojungParticipant]

Hello Hristo,

Thank you for your response.
I set DataAdapter on “change” of “DropSaup” in the ‘document’.
Because this dropdownlist is connected each other.
I saw formatData document and tried this method but still don’t know how to make it.
How can I call formatData without using dataAdapter initialize when click first Dropdownlist?
Could you give me simple example?

Best Regards,
Soo

[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)

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

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

[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]

OMG! Thank you, assembler. You save me. Now I set new data on jqxDropDownList successfully. Below is my final code.

import JqxDropDownList from '../jqwidgets-react/react_jqxdropdownlist.js';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.handleGetEmpName = this.handleGetEmpName.bind(this);
        this.myDropDownListRefBuilder = this.myDropDownListRefBuilder.bind(this);

        this.state = {
          records: ["123", "456"]
        }
    }

    myDropDownListRefBuilder(ref) {
     this.myDropDownList = ref;
    }

    handleGetEmpName() {
      this.setState({
        records: ["444", "555"]
      });
    }

    componentDidUpdate(prevProps, prevState) {
      if (prevState.records !== this.state.records) {
        let dataAdapter = new jqx.dataAdapter(this.state.records);
        this.myDropDownList.source(dataAdapter);
      }
    }

    render(){
        var dataAdapter = new jqx.dataAdapter(this.state.records);

        return (
            <div>
              <p>{this.state.records}</p>
              <JqxDropDownList id="123" ref={this.myDropDownListRefBuilder}
                width={200} height={50} source={dataAdapter} />
              <button type="button" onClick={this.handleGetEmpName}>Load Data</button>
            </div>
        );
    }
}

[soojungParticipant]

Oh! Thank you. Does myDropDownListRefBuilder make dropdownlist to react component? And I’v got an error like below. myDropDownListRefBuilder = (ref) has syntaxError.

myDropDownListRefBuilder = (ref) => {
      this.myDropDownList = ref;
    }

[soojungParticipant]

Hey Coni, You should delete or modify user information.

개인정보는 지우셔야 합니다..

[soojungParticipant]

Hi Ivo!
yes, df means variable in my code.

My original question was this.
I wanted to make one function that make property dynamically.
For example, if I want to set value to property, I need to write this.

var j = 0;
for (var i = 0; i < len; i++) {
	gridRows[i].tQty1 = resultArr[j]; j++;
	gridRows[i].tQty2 = resultArr[j]; j++;
	gridRows[i].tQty3 = resultArr[j]; j++;
	gridRows[i].tQty4 = resultArr[j]; j++;
	gridRows[i].tQty5 = resultArr[j]; j++;
	gridRows[i].tQty6 = resultArr[j]; j++;
	gridRows[i].tQty7 = resultArr[j]; j++;
	gridRows[i].tQty8 = resultArr[j]; j++;
	gridRows[i].tQty9 = resultArr[j]; j++;
	gridRows[i].tQty10 = resultArr[j]; j++;
	gridRows[i].tQty11 = resultArr[j]; j++;
	...
	gridRows[i].tQty30 = resultArr[j]; j++;
	gridRows[i].tQty31 = resultArr[j]; j++;
}

I thought this is possible. hhh

for (var i = 0; i < len; i++) {
    for (var j = 0; j < 31; j++) {
        var tqty = "tQty" + j; 
	gridRows[i].tqty = resultArr[j]; j++;
    }
}

[soojungParticipant]

Hi Peter,
Thank you for response. 🙂

[soojungParticipant]

How can I edit my before question………..?
I got a problem. That is different.
How can I change tQty1 value to “2222” using df?

var df = "tQty" + 1;

gridRows[0].tQty1 = "1111";
gridRows[0].df = "2222";

console.log(gridRows[0].tQty1); // "1111";
console.log(gridRows[0].df);    // "2222"

[soojungParticipant]

Ah, my code was not right.
Sorry I found “tQty” + 1 is working 🙂

[soojungParticipant]

Ah now I understand your intend. I solve problem like this.
I test on your ‘getrows’ jsfiddle source.
Change javascript code.

var data = generatedata(5);
var source = {
  localdata: data,
  datafields: [{
    name: 'firstname',
    type: 'string'
  }, {
    name: 'lastname',
    type: 'string'
  }, {
    name: 'productname',
    type: 'string'
  }, {
    name: 'date',
    type: 'date'
  }, {
    name: 'quantity',
    type: 'number'
  }, {
    name: 'price',
    type: 'number'
  }],
  datatype: "array"
};

var cellsrenderer_MS = function(row, column, value, defaulthtml, columnproperties) {
  var rowData = $("#jqxgrid").jqxGrid('getrowdata', row);
  return '<div class="cellren_height">' + rowData.firstname + ' / ' + rowData.lastname + '</div>';
}

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
  width: 500,
  height: 100,
  theme: 'energyblue',
  source: adapter,
  sortable: true,
  selectionmode: 'singlecell',
  columns: [{
    text: 'First Name',
    datafield: 'firstname',
    columngroup: 'Name',
    width: 90,
    cellsrenderer: cellsrenderer_MS
  }, {
    text: 'Last Name',
    columngroup: 'Name',
    datafield: 'lastname',
    width: 90
  }, {
    text: 'Product',
    datafield: 'productname',
    width: 170
  }, {
    text: 'Order Date',
    datafield: 'date',
    width: 160,
    cellsformat: 'dd-MMMM-yyyy'
  }, {
    text: 'Quantity',
    datafield: 'quantity',
    width: 80,
    cellsalign: 'right'
  }, {
    text: 'Unit Price',
    datafield: 'price',
    cellsalign: 'right',
    cellsformat: 'c2'
  }]
});

$("#jqxbutton").jqxButton({
  theme: 'energyblue',
  width: 200,
  height: 30
});

$('#jqxbutton').click(function() {
  var rows = $('#jqxgrid').jqxGrid('getrows');
  rows[0].firstname = rows[0].firstname + ' / ' + rows[0].lastname;
  $('#jqxgrid').jqxGrid('exportdata', 'xls', '마감', true, rows, false, null, "euc-kr");
});

Then you can export rendered data.

[soojungParticipant]

Hi Christopher,
Thank you for your response. 🙂

Yes, I want to document charset to “utf-8”.
What is wrong in my code?
Could you give me sample code?

I used ‘utf-8’ at the last parameter of jqxGrid ‘exportdata’.
Because I want to make file name in Korean.

For example,
When I click ‘export excel’ button,
one alarm is appear at the down side of the browser. And say,

“Do you want to open or save this ???.xls file of jqeurygrid.net?”

But I want to show that name ???(strange file name) —-> to right word.

[soojungParticipant]

Hi Peter,
I write this code as you mentioned. But the result is same. Column value is different that I want.
What part did I mistake?

$btnExcel.click(function () {
    var gridRows = $jqxGrid.jqxGrid('getrows');
    $jqxGrid.jqxGrid('exportdata', 'xls', 'Magam', true, gridRows, false, null, 'utf-8');
});

[Author]

Posts