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

Pages: [1]
1
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>

2
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

3
      {
        type: 'select',
        options: listViewMode.value,
        valueIndx: 'id',
        labelIndx: 'title',
        listener(val) {
          console.error('sselect', val)
        },
      }
The method you provided is effective. Thank you for your help!

4
Code: [Select]
    filterFn(ui) {
      if (ui.condition == 'range') {
        ui.column.pq_title = '全部'
        return {
          attr: "placeholder='请选择' readonly",
        }
      }
    },
I have already completed it using this method, but I didn't lock in the topic in time. Thank you for your response!

5
Hi everyone,

I want to add a dropdown menu in the toolbar where each option is represented by an object containing id, type, and title. Upon selection, I need to get both the id and type associated with that option. However, my current configuration does not work as expected.

Current Configuration
Here's how I've configured the dropdown:
Code: [Select]
{
  type: 'select',
  options: [
    {
      id: -1,
      type: 1,
      title: '默认视图', // This should be displayed in the dropdown
    },
  ],
  value: -1,
  listener: function () {
    console.error('select');
  },
}
However, this setup results in an error or does not correctly display the title nor returns the id and type upon selection.

Could anyone please guide me on how to achieve this? Specifically, how can I ensure that the dropdown displays the title and allows me to retrieve both id and type upon selection?
Any advice or pointers would be greatly appreciated.

Thank you in advance for your help!
Best regards

6
There is no need to write custom css as this feature is already present in the grid.

Please get yourself familiar with the wrap property in addition to autoRow property.

Kindly check this example:

https://paramquery.com/pro/demos/wrap
Thank you so much for your suggestion!
I have tried the method you provided, and I'm happy to report that it works perfectly for my use case.

7
Hi,

Problem Description
When autoRow is set to false, I expect the grid cells that exceed the cell width to display an ellipsis (...) to indicate truncated text. However, the current behavior does not show the ellipsis as expected.

Additionally, I would like to dynamically toggle between automatic row height adjustment and fixed row height. Specifically:

When autoRow is false, I want any text that exceeds the cell width to be truncated with an ellipsis.
When autoRow is true, I want the text to wrap into multiple lines within the cell.

What I've Tried
To achieve the desired ellipsis effect when autoRow is false, I attempted using the following CSS styles:
Code: [Select]
  overflow: hidden;
  text-overflow: ellipsis;
However, this did not produce the intended result. After further experimentation, I found that adding the following styles does work for showing ellipsis when autoRow is false:
Code: [Select]
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
But when autoRow is true, the text no longer wraps into multiple lines as expected, which breaks the desired functionality.

Any advice or pointers would be greatly appreciated. Thank you in advance for your help!
Best regards

8
Please ignore my request. After further consideration, I no longer require the implementation of this feature/content. Thank you for your understanding.

9
ParamQuery Pro Evaluation Support / Re: Adding Custom Dropdown to Toolbar
« on: December 30, 2024, 07:55:49 am »
Hi,
I encountered the same issue and would like to ask how you resolved it.

10
Hi everyone,

I would like to enhance the functionality of my dropdown filter. Specifically, I want to add Confirm and Cancel buttons within the dropdown menu. The goal is to allow users to make their selections and then either confirm these changes or cancel them without applying any filters.

What I Need Help With:
Adding Buttons: How can I add Confirm and Cancel buttons inside the dropdown filter?
Retrieving Button States: Once added, how do I capture the state (which button was clicked) when a user interacts with these buttons?
Closing the Dropdown: After a button is clicked, how can I ensure that the dropdown closes automatically?
Code: [Select]
{
    title: '颜色编码',
    dataIndx: 'ColorCode',
    align: 'center',
    filter: {
      crules: [{ condition: 'range' }],
      selectGridObj: createSelectGridObj('ColorCode'),
    },
    filterFn(ui) {
      if (ui.condition == 'range') {
        return {
          attr: "placeholder='请选择' readonly",
        }
      }
    },
  },
Any guidance on how to implement this feature or links to relevant documentation/examples would be greatly appreciated. If there's already a built-in method or configuration option for this, please let me know as well.

Thank you in advance for your help!
Best regards

11
Hi everyone,

I would like to know how to change the ?selectallText? in the dropdown. I want to customize this text to show a specific message (e.g., "All Items Selected").
Could anyone provide guidance on how to achieve this? Any code examples or documentation links would be greatly appreciated!

Thank you in advance for your help.
Best regards

Pages: [1]