Failed to call the method when initializing the instance using pqgrid in Vue3

[cui]

Hi,

I followed the documentation to write the code, but calling the refresh method shows "undefined"(https://paramquery.com/pro/api#method-instance)

Code: [Select]

  <div id="grid_json3" ref="gridContainer"></div>

Code: [Select]

grid.value.refreshCM()

Code: [Select]

onMounted(() => { if (gridContainer.value) {
    const $gridContainer = $(gridContainer.value)
    if (pq && pq.grid) {
      pq.grid($gridContainer, options)
      nextTick(() => {
        grid.value = $gridContainer.pqGrid('instance')
      })}}})
Any advice or pointers would be greatly appreciated.
Thank you in advance for your help!

Best regards

[paramvir]

looks like you are getting grid instance in asynchronous call, calling refresh method before that would throw an error.

you can get the grid instance directly from pq.grid($gridContainer, options)

Code: [Select]

var gridInstance = pq.grid($gridContainer, options)


[cui]

Yes, I am obtaining the grid instance after an asynchronous call. Even after following your suggestions, I still cannot access the refresh method. This is the result printed in my console.

Code: [Select]

  let gridInstance = pq.grid($(gridContainer.value), options)
  console.error(gridInstance, gridInstance.refreshCM(), 'gridInstance.refreshCM()getccccc')
  gridInstance.refreshCM()
  gridInstance.refreshView()

Code: [Select]

$bottom: jQuery.fn.init {0: div.pq-grid-bottom, length: 1, prevObject: j?y.fn.init}
$cont: jQuery.fn.init {0: div.pq-body-outer, length: 1, prevObject: j?y.fn.init}
$focusMgr: jQuery.fn.init {0: div.pq-focus-mgr, 1: div.pq-focus-mgr, length: 2, prevObject: j?y.fn.init}
$focusMgrHead: jQuery.fn.init {0: div.pq-focus-mgr, 1: div.pq-focus-mgr, length: 2, prevObject: j?y.fn.init}
$footer: jQuery.fn.init {0: div.pq-grid-footer.pq-pager, length: 1, prevObject: j?y.fn.init}
$grid_center: jQuery.fn.init {0: div.pq-grid-center, length: 1, prevObject: j?y.fn.init}
$head_i: jQuery.fn.init {0: div.pq-grid-cont.ui-draggable.ui-draggable-handle, length: 1, prevObject: j?y.fn.init}
$header: jQuery.fn.init {0: div.pq-header-outer.ui-widget-header, length: 1, prevObject: j?y.fn.init}
$loading: jQuery.fn.init {0: div.pq-loading, length: 1, prevObject: j?y.fn.init}
$summary: jQuery.fn.init {0: div.pq-summary-outer, length: 1, prevObject: j?y.fn.init}
$tbl: null
$title: jQuery.fn.init {0: div.pq-grid-title, length: 1, prevObject: j?y.fn.init}
$toolPanel: jQuery.fn.init {0: div.pq-tool-panel, length: 1, prevObject: j?y.fn.init}
$top: jQuery.fn.init {0: div.pq-grid-top.ui-widget-header, length: 1, prevObject: j?y.fn.init}
BS_on: false
Context: ? ()
Formulas: ? ()
HeaderMenu: ? ()
Merge: ? ()
Pic: ? ()
RowResize: ? ()
Tab: ? ()
bindings: jQuery.fn.init {0: div#grid_json3.pq-grid.pq-theme.ui-widget.ui-widget-content.pq-disable-select, length: 1, prevObject: j?y.fn.init}
classesElementLookup: {}
colIndxs: {ColorCode: 0, ColorName: 1, ENGName: 2, RGB: 3, PantoneCode: 4, ?}
colModel: (14) [Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object)]
columns: {ColorCode: Proxy(Object), ColorName: Proxy(Object), ENGName: Proxy(Object), RGB: Proxy(Object), PantoneCode: Proxy(Object), ?}
depth: 1
dims: {htCenter: 739, htHead: 56, htSum: 0, htBody: 0, wdCenter: 871, ?}
document: jQuery.fn.init {0: document, length: 1}
element: jQuery.fn.init {0: div#grid_json3.pq-grid.pq-theme.ui-widget.ui-widget-content.pq-disable-select, length: 1}
eventNamespace: ".pqGrid0"
focusable: jQuery.fn.init {}
headerCells: [Array(14)]
hoverable: jQuery.fn.init {}
iAnim: t.cAnim {model: {?}, grid: $.<?>.<computed>, nodes: Array(0)}
iAnimH: t.cAnimH {model: {?}, grid: $.<?>.<computed>, rtl: 'left', nodes: Array(0)}
iCheckBox: {}
iCols: c.cColModel {that: $.<?>.<computed>, vciArr: Array(14), ciArr: Array(14)}
iContext: t.cContext {model: {?}, that: $.<?>.<computed>, ns: '.pq-cmenu', rtl: false}
iDrag: t.cDrag {rtl: false}
iDragColumns: t.<computed> {that: $.<?>.<computed>, rtl: false, status: 'stop', $arrowTop: j?y.fn.init, $arrowBottom: j?y.fn.init}
iDrop: t.cDrop {model: {?}}
iFillHandle: t.<computed> {that: $.<?>.<computed>, rtl: false}
iFilterData: v {that: $.<?>.<computed>}
iFormulas: e.cFormulas {that: $.<?>.<computed>, fn: {?}, tabNames: {?}, obj: {?}}
iGroup: t.cGroup {Model: {?}, cbId: 'pq_group_cb', childstr: 'children', id: 'pq_gid', parentId: 'parentId', ?}
iHeaderMenu: i {that: $.<?>.<computed>, rtl: false}
iHistory: t.cHistory {that: $.<?>.<computed>, options: {?}, records: Array(0), counter: 0, id: 0}
iImport: E.cImport {that: $.<?>.<computed>}
iKeyNav: N.paramquery.cKeyNav {that: $.<?>.<computed>}
iMerge: t {that: $.<?>.<computed>, mc: Array(0), mc2: Array(0)}
iMouseSelection: e {that: $.<?>.<computed>}
iPic: w.paramquery.cPic {rtl: false, id: 0, left: 'left', pics: Array(0), that: $.<?>.<computed>}
iProxy: e.cProxy {that: $.<?>.<computed>}
iRefresh: b.paramquery.cRefresh {vrows: Array(0), that: $.<?>.<computed>, _autoResizeTimeout: 64}
iRenderB: pq.<computed> {uuid: 0, $ele: j?y.fn.init, $sum: j?y.fn.init, $h: j?y.fn.init, that: $.<?>.<computed>, ?}
iRenderHead: pq.<computed> {uuid: 0, that: $.<?>.<computed>, iMerge: t, $ele: j?y.fn.init, height: 'flex', ?}
iRenderSum: pq.cRenderSum {uuid: 0, that: $.<?>.<computed>, rtl: 'left', rowStyle: Array(0), iMerge: {?}, ?}
iResizeColumns: t.<computed> {that: $.<?>.<computed>, rtl: 'left'}
iRowResize: h.paramquery.cRowResize {that: $.<?>.<computed>, ht: 8}
iRows: t {that: $.<?>.<computed>, options: {?}, selection: Array(0), hclass: ' pq-state-select ui-state-highlight'}
iSelection: pq.Selection {_areas: Array(0), that: $.<?>.<computed>, iCells: t, _type: 'range'}
iSort: t.cSort {that: $.<?>.<computed>, sorters: Array(0), tmpPrefix: 'pq_tmp_', cancel: false}
iTab: t.cTab {that: $.<?>.<computed>}
iToolPanel: n.cToolPanel {that: $.<?>.<computed>, panes: Array(0), clsSort: 'pq-sortable', $ele: j?y.fn.init}
iTree: t.cTree {Model: {?}, that: $.<?>.<computed>, fns: {?}, dataIndx: undefined, cbId: 'pq_tree_cb', ?}
iUCData: t.cUCData {that: $.<?>.<computed>, udata: Array(0), ddata: Array(0), adata: Array(0), options: {?}}
iValid: t.cValid {that: $.<?>.<computed>}
listeners: {keyDown: Array(2), dataAvailable: Array(5), CMInit: Array(3), dataReadyDone: Array(3), colMove: Array(2), ?}
options: {classes: {?}, disabled: false, create: null, cancel: 'input,textarea,button,select,option,.pq-no-capture,.ui-resizable-handle', distance: 1, ?}
origOptions: {colModel: Proxy(Array), locale: 'en', width: '100%', height: '100%', showTitle: false, ?}
pageI: $.<computed>.<computed> {element: j?y.fn.init, uuid: 7, eventNamespace: '.pqPager7', bindings: j?y.fn.init, hoverable: j?y.fn.init, ?}
pdata: (20) [{?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}]
riOffset: 0
started: false
tables: []
uuid: 0
validations: {}
window: jQuery.fn.init {0: Window, length: 1}
xhr: {readyState: 4, getResponseHeader: ?, getAllResponseHeaders: ?, setRequestHeader: ?, overrideMimeType: ?, ?}
_mergeCells: false
_parent2: section
_queueATriggers: {}
_super: undefined
_superApply: undefined
_toolbar: $.<computed>.<computed> {element: j?y.fn.init, uuid: 3, eventNamespace: '.pqToolbar3', bindings: j?y.fn.init, hoverable: j?y.fn.init, ?}
[[Prototype]]: $.<computed>.<computed>

[paramvir]

I'm not sure what you mean by cannot access the refresh method.

Could you share a stackblitz.