jQuery Grid Plugin - jqGrid

Hi, I am using JQuery 3.6.

To drag rows, i have tried both tableDnD and jqGrid('sortableRows').

However, I still have the same problem. WHen i select a row to drag, and moves the mouse diagonally up or simple drag it up until the table header is reached, the column widths change. On drop of the row, the widths goes back to it's normal width.

Anyone who has encountered the same problem?

Here's my code using tableDnD :

jQuery(document).ready(
function()
{
jQuery("#WFList").tableDnD({scrollAmount:0});
jQuery('#WFList').jqGrid
({
url : 'documentWorkflowListJSON.htm?q=2',
mtype: "POST",
datatype: "json",
colNames:['ID','1','2','3','status','title'],
colModel : [
{index: 'Id', name : 'Id', sortable : false, align: 'center'},
{index: 'number', name : 'number', sortable : false, align: 'center'},
{index: 'numberDummy', name : 'numberDummy', width : 50, sortable : false, align: 'center'},
{index: 'status', name : 'status', sortable : false, align: 'center'},
{index: 'statusDisplay', name : 'statusDisplay', width : 240, sortable : false, align: 'center'},
{index: 'title', name : 'title', width : 240, sortable : false, align: 'left'},
],
width: 560,
height: 130,
hoverrows:false,
viewrecords: true,
loadui : 'block',
imgpath: 'css/themes/redmond/images',
emptyrecords: 'empty',
shrinkToFit :false,
beforeSelectRow: function(rowid, e) { return true; },
multiselect:true,
gridComplete: function(){
$("#_empty","#WFList").addClass("nodrag nodrop");
jQuery("#WFList").tableDnDUpdate();
}
}
);
jQuery("#WFList").jqGrid('hideCol',["Id","number","status"]);
}
);