ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: jplevene on July 31, 2025, 01:25:58 am

Title: Drag & drop rows without the diDrag icon
Post by: jplevene on July 31, 2025, 01:25:58 am

Is there a way to drag and drop the entire row without using the drag helper?

I did below but this means there is a drag-handler icon:

Code: [Select]

dragModel: {
on: true,
diDrag: "QTY",
tmplDrag: '<span class="ui-icon ui-icon-grip-dotted-vertical pq-drag-handle" style="cursor:move; vertical-align:text-bottom; touch-action:none; float:left;">&nbsp;</span>',
diHelper: ["QTY", "NAME"]
},
dropModel: {
on: true
},
moveNode: function(e, uiDrop){ console.log(uiDrop); }
I don't want the diDrag drag-handler icon and just want to drag anywhere on the row to initiate the drag (I am already using row selection).  I thought of trapping a mouse down event and after a move of a certain amount of pixels, manually trigger a drag start, but not sure how?

Title: Re: Drag & drop rows without the diDrag icon
Post by: jplevene on July 31, 2025, 02:57:03 pm

Should have mentioned, to work how jQueryUI Sortable works, or even use Sortable would be great

Title: Re: Drag & drop rows without the diDrag icon
Post by: jplevene on July 31, 2025, 05:49:35 pm

Sorry, one more thing.  The drag and drop in a normal grid and a tree grid is very different.  The tree you drag and drop the entire row, the grid only a handle icon.

The tree grid is really strange and hard to understand and is not similar to the normal tree that uses a horizontal line. All other trees use a line or an indicator arrow to show if the drop is inside, above, below, or at the parent (the arrows indent).  A really good example is https://preview.keenthemes.com/html/keen/docs/general/jstree/dragdrop.

Title: Re: Drag & drop rows without the diDrag icon
Post by: paramvir on August 01, 2025, 08:15:36 pm

jQueryUI sortable doesn't work with virtualized DOM so the whole rows need to be rendered in view.

The selectionModel.type needs to be turned off to give the mouse control to sortable.

The following is a quick sample of sortable with pqgrid.

https://jsfiddle.net/us7kmz21/

Title: Re: Drag & drop rows without the diDrag icon
Post by: jplevene on August 04, 2025, 04:12:01 pm

Is there a way to do it without using sortable, and just pqGrid native as I still need to select row?

Title: Re: Drag & drop rows without the diDrag icon
Post by: paramvir on August 04, 2025, 04:27:13 pm

sortable + pqgrid also works with selectionModel: {type: 'row'}

however in pqgrid native DnD, a row can't be dragged without a drag helper / icon.