Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - unbinara

Pages: [1] 2
1
1. firstly, I am not request server ,  i just call https://paramquery.com/pro/Olympics
2. i find out the reason about this

dataModel: {location: 'lazy'}, //declare upfront.

if does not use url in initGrid function,
pqgrid call ajax like
http://localhost/sample03.html?pq_curpage=1&pq_rpp=1000&_=1710905950673s

so, as you say, response not json and response sample03.html

but, work well except this.





2
it works greatly..thanks a lot!

but there is one error in chrome browser(f12)
will be problem?..

<error detail>
pqgrid.min.js:9 Uncaught Error : SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

error @ pqgrid.min.js:9
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
A @ jquery.min.js:4
(anonymous) @ jquery.min.js:4
load (async)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
A.callXHR @ pqgrid.min.js:9
request @ pqgrid.min.js:9
init @ pqgrid.min.js:9
A.refreshDataAndView @ pqgrid.min.js:9
_create @ pqgrid.min.js:9
(anonymous) @ jquery-ui.min.js:6
_createWidget @ jquery-ui.min.js:6
e._createWidget @ pqgrid.min.js:9
(anonymous) @ jquery-ui.min.js:6
t.<computed>.<computed> @ jquery-ui.min.js:6
(anonymous) @ jquery-ui.min.js:6
each @ jquery.min.js:2
each @ jquery.min.js:2
t.fn.<computed> @ jquery-ui.min.js:6
ComPqGrid.setGrid @ pqGrid.eagle.js:137
initGrid @ sample03.js:44
(anonymous) @ sample03.js:4
j @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
S @ jquery.min.js:3

3
is there any way to set lazy loading like below code

<below code : occur error>
Uncaught TypeError: Cannot read properties of undefined (reading 'init')
    at A.refreshDataAndView (pqgrid.min.js:9:66261)
    at doSearch (sample03.js:83:10)
    at HTMLDocument.<anonymous> (sample03.js:5:5)
    at j (jquery.min.js:2:29999)
    at k (jquery.min.js:2:30313)

############################################

var grid;
$(document).ready(function() {
    initGrid();
    doSearch();

});

function initGrid() {
    var obj = {           
        numberCell: { width: 60 },
        title: "Background loading of data",
        resizable: true,     
        pageModel: { rPP: 150 },   
        colModel: [
            { dataIndx: 'athlete', title: 'Athlete' },
            { dataIndx: 'age', dataType: 'integer', title: 'Age'  },
            { dataIndx: 'country', title: 'Country' },
            { dataIndx: 'year', dataType: 'integer', title: 'Year'  },
            { dataIndx: 'date', dataType: 'date', title: 'Date' },
            { dataIndx: 'sport', title: 'Sport' },
            { dataIndx: 'gold', dataType: 'integer', title: 'Gold' },
            { dataIndx: 'silver', dataType: 'integer', title: 'Silver'  },
            { dataIndx: 'bronze', dataType: 'integer', title: 'Bronze'  },
            { dataIndx: 'total', dataType: 'integer', title: 'Total'  }
        ]
    };

    grid = pq.grid("#pqgrid", obj);
}

function doSearch() {
   
    grid.option( {dataModel : {location:"lazy", data:[], url:"https://paramquery.com/pro/Olympics"}} );
    grid.option( {pageModel : { rPP: 150 }} );
    grid.refreshDataAndView();

}

4
Help for ParamQuery Grid (free version) / Re: [QA] TreeGrid - Drag & Drop
« on: September 12, 2023, 09:56:35 pm »
thanks for your reply.
However, i can not understand still
1) Is it possible for you to complete the stackblitz implementation as per the screenshot.

I tried addnodes, addrow or refresh after addnodes(addrow), even use this.data(..) after addnodes
In dropmodel ...but, i can not make to show the data on grid..
How to show data?

5
i can not explain above question..so, i create stackbiliz and capture..
https://stackblitz.com/edit/stackblitz-starters-u5bzil?file=src%2FApp.js

(1) i drag and drop from right to left => (picture 2 : move 3 rows but data is not show..)
(2) i drag and drop in only right (from up to down and changes parent) ==> but there is no updatelist.... (picture 3)

<picture 1>
1.png
<picture 2>
2.png
<picture 3>
3.png

6
Help for ParamQuery Grid (free version) / [QA] TreeGrid - Drag & Drop
« on: September 08, 2023, 06:49:01 am »
1. react 18 & pqgrid 9.0.1
2. Q&A
- https://paramquery.com/pro/demos/dnd_trees

(2-1) how to apply flat (only level 1) to right treegrid when nodes(exists parent) drag and drop to right treegrid
        - i don't know this, so i tried to change the right tree grid to nomal grid(there is drag and drop also)
          however, when i move(drag and dropt) to rigth nomal grid, nodes moved but data is now show...ㅠㅠ...

(2-2) when only use drag and drop, if i drag and drop to right grid, i can get changes data (add or delete)
        however, i can not get updated data from getchanges method when just drag and drop in left treegrid only (up and down drag)
       
        is that possible get updated data from getchanges , when just moved the same grid (up and down drag -> change level in same tree grid)
        if it is possible , how ?

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

8
Help for ParamQuery Pro / 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.



9
Help for ParamQuery Pro / Re: [pqgrid 9.0.1] treeGrid Problem
« on: August 22, 2023, 04:25:16 pm »
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)..




 



10
Help for ParamQuery Pro / Re: [pqgrid 9.0.1] treeGrid Problem
« on: August 22, 2023, 12:55:39 pm »
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?

11
Help for ParamQuery Pro / Re: [pqgrid 9.0.1] treeGrid Problem
« on: August 21, 2023, 10:19:20 pm »
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)
   

12
Help for ParamQuery Pro / react 18.2.0 with pqgrid treeGrid Problem
« on: August 21, 2023, 07:36:59 pm »
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)

13
Bug Report / [pqgrid 9.0.1] check box column width problem
« on: August 11, 2023, 06:57:39 am »
Hi ~ Everyone!
firstly, I am not good at english. so, please, understand it.

<question>
1. the column's width that is applied with checkbox does not work
    I applied column's width is 37 as <code> , the column is still 50

would anyone any advise?


<self try>
I try to solve this with css style like
[id$="0-right"] {width:37px !important; padding:0 0 !important;}

the width is solved however,
more trouble abut selected backgound color fisrt row and tenth row...

<pqgrid>
1. version : 9.0.1
2. use react and installed npm

<code>
this is first column

{ title:"",   width: 37,  dataType: 'bool',  dataIndx: "state",      align: "center",
   resizable: false, menuIcon: false, sortable: false, editor: false,
   type: 'checkBoxSelection', cls: 'ui-state-default',
   
   cb: {all: false, header: true}
},






14
I really thanks for your quick advice!.
but, it is not the way that i want still...
i understand the no way to solve it. but, as your mention, there is the only way to look like it.
so, i find out the another way to be shown like it as below.

anyway, thanks your advice and i find out my own solution after your advice.

div#pq-head-cell-u0-1-11-right {
    border-top: unset;
}

{ colModel : [ {   title: "User Result",      align: "center",
               colModel:[
                       {title: "Status",width: 60, align: "center",  dataType: "string"},
                       {title: "User",   width: 60, align: "center",  dataType: "string"},
                       {title: "Time",   width: 60, align: "center",  dataType: "string"},
               ]
            }]
}

15
firstly, thanks your reply..
but, this is not the result that i want..
your reply : 20200727_pqgrid_multiheader2.png (attached)
my expectation : 20200727_pqgrid_multiheader3.png (attached)

please, how to solve like this (20200727_pqgrid_multiheader3.png)


Pages: [1] 2