Issues while Applying Grouping with DnD column

[vijay]

Hello Paramvir,

I am using ParamQuery Grid Version 11 in my project.

In the given example, I am working with PQGrid using the Grouping functionality.

Whenever the grid loads, I am grouping the data by the Month–Year column. After that, the user performs additional grouping by dragging and dropping columns.
However, during the drag-and-drop grouping process, I am encountering issues.

Kindly refer to the attached video link for your reference:
https://drive.google.com/file/d/10f6c7NsnOH5pRGLeHmmYYstEZ4TlfRqd/view

Note: This functionality works properly in Version 9, but the issue occurs in Version 11.

[paramvir]

I see the error in the video, however it's not clear why?

Could you please share a jsfiddle / stackblitz with a small reproducible test case.

[vijay]

 The same functionality was working properly with version previous version i.e 10 now after upgradation it has stopped working. kindly look at to the issue as its show stopper for us.

[paramvir]

I tried reproducing the issue using the drag-and-drop columns:
https://paramquery.com/pro/demos/group_rows

but I couldn’t trigger the error on my end. If you discover the steps to reproduce it, please let me know and I’ll investigate further.

Alternatively a jsfiddle would be quite helpful.

[vijay]

We have found the issue.
Please check with the below stackblitz link
Our observations are whenever we do group by with the column header having space it creates the error.
Example: Employee Name, Employee Code columns are creating issue. kindly resolve the issue.

https://stackblitz.com/edit/paramquery-demo-9r2nn5kx?file=index.js

[paramvir]

Thank you for sharing stackblitz, I'm looking into it.

[paramvir]

Please use this patch to fix the error caused due to space in dataIndx

Code: [Select]

let originalConstructor = $.paramquery.cDragColumns;

$.paramquery.cDragColumns=function(e){var o,r,t=this,n=e.options,a=n.dragColumns||{},d=function(o,r){return $("<div class='pq-arrow-"+o+" ui-icon "+r+"'></div>").appendTo(e.$grid_center)};t.that=e,t.rtl=n.rtl,t.status="stop",t.$arrowTop=d("down",a.topIcon),t.$arrowBottom=d("up",a.bottomIcon),t.hideArrows(),a.enabled&&e.$head_i.draggable({distance:5,cursorAt:{top:-10,left:-10},cancel:".pq-grid-header-search-row,input,textarea,button,select,option,.pq-grid-number-cell",zIndex:"1000",appendTo:"body",revert:t.revert.bind(t),helper:function(r,n){var a=r.target.closest(".pq-grid-col");if(a){var d,i=t.colIndicesDrag=e.getHeadIndices(a),c=t.columnDrag=i.column,l=c.parent,s=e.options.dragColumns.rejectIcon,p=e.getScale();return o=pq.getScale(document.body),!c||c.nodrag||c._nodrag||l&&1==l.colSpan||c.empty||!1===e._trigger("columnDrag",r,{column:c})?"<span/>":(e.$head_i.find(".pq-grid-col-resize-handle").hide(),(d=t.$helper=$("<div class='pq-col-drag-helper pq-theme pq-grid-cell' ><div><span class='pq-drag-icon ui-icon "+s+"'></span>"+c.pq_title+"</div></div>")).data("di",c.dataIndx).css({scale:p[0]/o[0]+" "+p[1]/o[1]}),d[0])}return $("<div></div>")},start:function(){},drag:function(n,a){if(t.$helper){t.status="drag";var d,i=a.position,c=n.originalEvent,l=(c&&c.target!=document?c.target:n.target).closest(".pq-grid-col"),s=t.colIndicesDrag,p=s.ri,g=s.column,u=g.leftPos,h=u+g.o_colspan;if(i.left=i.left/o[0],i.top=i.top/o[1],console.log("cDragColumn.js td = ",l),l&&!l.closest(".pq-grid-header-search-row")&&e.evtBelongs(c)){var v=e.getHeadIndices(l),m=v.column,f=v.ri,q=v.colIndx;if(!(m.empty||m==g||m.nodrop||m._nodrop||p<f&&q>=u&&q<h))return r=l,t.colIndicesDrop=v,void t.onDrag(n,l);r!=l&&t.updateDragHelper(!1),r=l}else t.hideArrows(),d=$(".ui-droppable-hover",e.$top),console.log("cGroup.js $group = ",d[0]),t.updateDragHelper(!!d[0]);t.colIndicesDrop=null}},stop:function(o){if(t.status="stop",t.$helper){t.hideArrows();var r=t.colIndicesDrop;e.$head_i.find(".pq-grid-col-resize-handle").show(),r&&t.onDrop(t.colIndicesDrag,r,o)}}})};

$.paramquery.cDragColumns.prototype = originalConstructor.prototype;


Stackblitz with fix: https://stackblitz.com/edit/paramquery-demo-rzysmf5h?file=index.js

[vijay]

Thank You.

The provided solution is working now.