ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: jplevene on May 15, 2024, 01:21:42 am

Title: In a tree grid, make the drag handle the row or a cell
Post by: jplevene on May 15, 2024, 01:21:42 am

I don't want to use the handle in the number column as I don't want a number column and it's not as user friendly

In the tree model or even column model I have tried adding:

Code: [Select]

render: function(ui){
return {
cls : "pq-drag-handle"
}
}
This works but the font is all over the place.

Ideally I would like it to act like this https://www.jstree.com/demo/ (see first example).  You just click and hold a row, drag it and drop it.  Notice the drop arrow is a very neat way of showing if it before, after or within the node.

How can I do a drag and drop just by clicking on the row and dragging like the above example or similar.

Title: Re: In a tree grid, make the drag handle the row or a cell
Post by: paramvir on May 15, 2024, 03:30:12 pm

The dragModel.diDrag property, as outlined in the API documentation and illustrated in the examples, designates the cell that displays the drag handle

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

Title: Re: In a tree grid, make the drag handle the row or a cell
Post by: jplevene on May 15, 2024, 04:20:12 pm

Thanks, but that isn't what I asked.

START DRAG ENTIRE ROW CLICK

I want the drag to be triggered by clicking and dragging on the whole row, similar or like the jsTree examples I linked to.  Drag handles are very old fashioned and therefore today are not intuitive.  My solution I found, after I posted the question, for clicking the whole row to drag I added:

Code: [Select]

treeModel>render: function(ui){ return { cls : "pq-drag-handle", style:"transform:none; transform-origin:0; opacity:1;" } }
I set numberCell.show=false and didn't set diDrag.

DROP INDICATOR

The drop is very confusing with the divider line, something I have never seen before so it is far from intuitive or standard.  The examples in jsTree just show a small arrow marker either within, after or before the node which changes the closer to the top or bottom the cursor gets, which is intuitive and a common standard.  Will you be implementing this or something similar?