Author Topic: react 18.2.0 set new data in pqgrid treeGrid  (Read 492 times)

unbinara

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 16
    • View Profile
react 18.2.0 set new data in pqgrid treeGrid
« on: August 23, 2023, 09:23:33 pm »
Thanks for your code.

1. initial load : work properly with your code advice.
2. when i change the data with search button, not work.
(1) datamodel update properly but, ui data is not changed
==> please, check this code..(App_disp.js)
https://stackblitz.com/edit/stackblitz-starters-wac2eg?file=src%2Findex.js

(1-1)
I changed the data with setState and find the changed data in componentDidUpdate
however ui is not changed

please, give an advice about this.



paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: react 18.2.0 set new data in pqgrid treeGrid
« Reply #1 on: August 24, 2023, 10:33:03 pm »
reactive option is not working with treegrid, hence it's not refreshing its UI when its state changes.

Please check this alternative way:

Code: [Select]
bthSearch_Click(event) { 
    this.callRef.current.setData(rGridColData2);
}

Code: [Select]
setData(data) {
    //either use this.
    /*this.grid.option('dataModel.data', data);
    this.grid.refreshDataAndView();*/

    //OR
    this.grid.setData(data);
}

https://stackblitz.com/edit/stackblitz-starters-ng8zwo?file=src%2FApp_disp.js

unbinara

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: react 18.2.0 set new data in pqgrid treeGrid
« Reply #2 on: August 26, 2023, 03:21:11 pm »
I am very thanks to you. Finally, i am totally understand this.
Reacted option is controlled component and updated state.
However, tree is uncontrolled component so, reacted option is false and not mananged stat
So, we should use ref and update data like jquery pqgrid..

Thanks for the advice and example code.
I am very impressed for your support.