ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: unbinara on August 23, 2023, 09:23:33 pm

Title: react 18.2.0 set new data in pqgrid treeGrid
Post by: unbinara 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.

Title: Re: react 18.2.0 set new data in pqgrid treeGrid
Post by: paramvir 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

Title: Re: react 18.2.0 set new data in pqgrid treeGrid
Post by: unbinara 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.