react 18.2.0 with pqgrid treeGrid Problem

[unbinara]

I tested and confirm the treeGrid demo with react 17.0.1 and pqgrid 8.7.0 (<- https://paramquery.com/pro/demos/react_npm_treegrid)
I tried to test treeGrid options with above example  ( react 18.2.0 and pqgrid free version 9.0.1)
however, i got a below error

would anyone give me an advice to solve this?

<error>
use treeOption() to set treeModel options.
at handleError (http://localhost:3000/static/js/bundle.js:103892:58)
at http://localhost:3000/static/js/bundle.js:103911:7
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:67724:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:67781:35)
at reportUncaughtErrorInDEV (http://localhost:3000/static/js/bundle.js:83722:9)
at captureCommitPhaseError (http://localhost:3000/static/js/bundle.js:87386:9)
at invokeLayoutEffectMountInDEV (http://localhost:3000/static/js/bundle.js:85656:17)
at invokeEffectsInDev (http://localhost:3000/static/js/bundle.js:87572:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3000/static/js/bundle.js:87553:9)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:87328:9)

[paramvir]

can you share code where it shows how you are trying to set treeModel options.

[unbinara]

this is my source..

when i debugged,

pq.grid(this.gridRef.current, this.options);
==> <breakpoint>
==> render first : show the ui with the data nomally
==> render second ==> occur error


<package>
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jquery": "^3.5.16",
    "@types/jqueryui": "^1.12.16",
    "jquery": "^3.7.0",
    "jquery-ui-pack": "^1.13.3",
    "jszip": "2.5.0",
    "pqgrid": "^9.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-pro-sidebar": "^1.1.0-alpha.1",
    "react-router-dom": "^6.14.2",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },


<Option>
        this.rGridCol = [
          {dataIndx: 'pq_tree_cb',width:100,hidden: true},
          {dataIndx: 'name',width:200,title: 'Name'},
          {dataIndx: 'size',title: 'Size',width:100,dataType: 'float'},
          {dataIndx: 'date', title: 'Modified Date',width:100, dataType: 'date' }
        ];

        this.rGridOption = {
          showTitle:false,
          reactive:true,
          locale:'en',
          animModel:{on:true},
          collapsible: { toggled: true },
          rowHt:24,
          height:'400',
          columnTemplate:{ width:100 },
           
          treeModel: {
            dataIndx: 'name',
            cascade: true
          },
          colModel: this.rGridCol,
          dataModel: { data: data}
         
        };

<error detail>
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
Uncaught Error use treeOption() to set treeModel options.
    at <anonymous> (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:22839:1)
    at callCallback (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:4164:1)
    at invokeGuardedCallbackDev (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:4213:1)
    at invokeGuardedCallback (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:4277:1)
    at reportUncaughtErrorInDEV (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:22838:1)
    at captureCommitPhaseError (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:27126:1)
    at invokeLayoutEffectMountInDEV (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25135:1)
    at invokeEffectsInDev (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:27351:1)
    at commitDoubleInvokeEffectsInDEV (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:27327:1)
    at commitRootImpl (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:26883:1)
    at commitRoot (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:26682:1)
    at finishConcurrentRender (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25981:1)
    at performConcurrentWorkOnRoot (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25809:1)
    at workLoop (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:266:1)
    at flushWork (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:239:1)
    at performWorkUntilDeadline (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:533:1)
    --- postMessage ---
    at schedulePerformWorkUntilDeadline (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:574:1)
    at requestHostCallback (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:588:1)
    at unstable_scheduleCallback (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:441:1)
    at scheduleCallback$1 (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:27537:1)
    at ensureRootIsScheduled (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25683:1)
    at scheduleUpdateOnFiber (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25531:1)
    at updateContainer (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:28858:1)
    at ReactDOMHydrationRoot.render.ReactDOMRoot.render (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:29314:1)
    at ./src/index.js (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\src\index.js:8:1)
    at options.factory (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\webpack\runtime\react refresh:6:1)
    at __webpack_require__ (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\webpack\bootstrap:24:1)
    at <anonymous> (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\webpack\startup:7:1)
    at <anonymous> (localhost��3000/static/js/bundle.js:97448:12)
The above error occurred in the <PqGrid> component:

    at PqGrid (http://localhost:3000/static/js/bundle.js:101:5)
    at div
    at App (http://localhost:3000/static/js/bundle.js:123:5)
   

[paramvir]

The error occurs if you try to set treeModel options after initialization using grid option() method.

treeModel options must be set using Tree().option() method after initialization.

https://paramquery.com/pro/api#method-Tree

If you are nowhere setting the treeModel options after initialization in your code, then kindly share a stackblitz or share your project as attachment with reproducible issue.

[unbinara]

firstly, thanks your advice.
i am newbe for react with pqgrid tree.

i put the my test source in stackblitz
( https://stackblitz.com/edit/stackblitz-starters-j1iuv1?file=src%2FApp.js )

i can not follow your advice. (treeModel options must be set using Tree().option() method after initialization )

would you give detail advice? (i can not understand )
1) Tree().option() => Tree() is return TreeGrid, so Tree().option is TreeModel?
2) where "Tree().option()" is located in my code?

[paramvir]

This example shows usage of Tree().option() to set treeModel options dynamically.

https://paramquery.com/pro/demos/treegrid

Code: [Select]

listener: function(evt){
var chk = evt.target.checked;
$(".pq-chk").prop("disabled", !chk);
    this.Tree().option({checkbox: chk}); //sets treeModel.checkbox option dynamically.
}


Code: [Select]

listener: function(evt){
    this.Tree().unCheckAll();//first clear all.
    this.Tree().option({select: evt.target.checked}); //sets treeModel.select option dynamically.
}


I don't see the error mentioned in your post in the stackblitz shared by you. Can you pleae specify the exact steps required to reproduce the error.

[unbinara]

I am sorry about the my mis-question.
it means the your answer is little bit different view about my expectation
but i understand finally your key point (Tree().option....)
I am very appriciate to your continuing answer. really thanks...

<stackblitz>
https://stackblitz.com/edit/stackblitz-starters-j1iuv1?file=src%2Findex.js

(1) App.js ==> error
(2) App_my.js ==> resolve with own way (modify index.js)


<Original Question>
1. when initial load, occur error
==> i re-write the my code to occur error
==> your advice : treeModel options must be set using Tree().option() method after initialization
==> my understand : do not use treeModel, must use Tree().option()

2. my concern and resolve way ==> App_my.js
(1) how to load tree-data with treegrid when load
※ accually, i do not know my resolve way correct or not..

(1-1)  custom onTree method and call this method external
so, i use the custom onTree method, React.CreateRef() and componentDidMount

this.callRef.current.onTree({ dataIndx: 'name', cascade: true }); // <- in componentDidMount

(2) how to use search button to change data
use button event and change date with state

finally, work it.
at the first time, i confuse to use  Tree().option() ...why i use this way...how to use...after initialize?...
so, i research and study the react initialize way etc....so many concept....

<Question>
1. my resolve way is correct way? ...because i am newbe react and tree grid usage...

<My opinion>
I think to need the react pqgrid and tree grid usages more in paramquery site..
because, the usage site includes  very important and basic usages only..(event, call inner method, tree grid...)
however, i think it is not enough ...to newbe(include me)..




 

[paramvir]

Thanks for the stackblitz.

Addition of following in "class PqGrid extends React.Component"

Code: [Select]

  componentWillUnmount(){
    this.grid.destroy();
  }

resolves the error, please check this https://stackblitz.com/edit/stackblitz-starters-dvfutw?file=src%2FApp.js

Note that there is nothing wrong in defining treeModel during initialization.

Code: [Select]

treeModel: { dataIndx: 'name', cascade: true },

It's only if you want to update the treeModel options after initialization, then you have to use grid.Tree().option() API

Please let me know if you have any other questions related to this error.

[paramvir]

Continued here: https://paramquery.com/forum/index.php?topic=4693