Ghost image showing up in kendo grid drag and drop - kendo-ui

Question

A kendo grid has been having a problem with the drag-and-drop functionality, where it has a copy of all the data essentially stuck to the left side of the grid, in-line with the cursor.
The grid that I attach it to is set to editable, however, that appears to have no impact on this. Disabling editing does not fix the problem. It is also worth noting that the grid is bound to the dynamic type, which may have some impact, but I didn't find anything looking into that.
Sortable block is below
#(Html.Kendo().Sortable()
.For("#QuestionGridEditable")
.Filter("table > tbody > tr")
.Cursor("move")
.Axis(SortableAxis.Y)
.PlaceholderHandler("placeholder")
.ContainerSelector("#QuestionGridEditable tbody")
.Events(e => {
e.Change("onDrag");
e.Move("startDrag");
})
Image of the problem
Generated javascript
<script>
kendo.syncReady(function() {
jQuery("#QuestionGridEditable").kendoGrid({
"dataBound": onNewRow,
"columns": [{
"title": "#",
"attributes": {
"style": "width: 2em"
},
"headerAttributes": {
"data-field": "number",
"data-title": "#"
},
"field": "number",
"encoded": true,
"editor": "\u003cinput id=\"number\" max=\"2147483647\" min=\"-2147483648\" name=\"number\" style=\"width:100%\" type=\"text\" /\u003e\u003cscript\u003e\r\n\tkendo.syncReady(function(){jQuery(\"#number\").kendoNumericTextBox({\"format\":\"n0\",\"decimals\":0});});\r\n\u003c/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcFalse
}, {
"title": "Visibility",
"attributes": {
"style": "width: 30%"
},
"headerAttributes": {
"data-field": "viewableby",
"data-title": "Visibility"
},
"template": "#=ArrayToString(viewableby)#",
"field": "viewableby",
"encoded": true,
"editor": "\u003cselect id=\"viewableby\" multiple=\"multiple\" name=\"viewableby\"\u003e\u003c/select\u003e\u003cscript\u003e\r\n\tkendo.syncReady(function(){jQuery(\"#viewableby\").kendoMultiSelect({\"dataSource\":[\"Everyone\",\"Faculty\",\"Students\",\"Self\"],\"value\":\"#=ViewersCompactToList(data)#\"});});\r\n\u003c/script\u003e\r\n\r\n\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"viewableby\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"
}, {
"title": "Radio button",
"headerAttributes": {
"data-field": "cells[0].Text.text",
"data-title": "Radio button"
},
"field": "cells[0].Text.text",
"encoded": true,
"editor": "\u003cbutton id=\"buttonAddRadio\" class=\"k-button k-button-icontext\" onclick=\"addRB\"\u003e+\u003c/button\u003e\r\n\u003cinput class=\"k-textbox\" id=\"cells_0__Text_text\" name=\"cells[0].Text.text\" /\u003e\r\n \r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"cells[0].Text.text\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcTrue
}, {
"title": "Basic text entry static",
"headerAttributes": {
"data-field": "cells[1].Text.text",
"data-title": "Basic text entry static"
},
"field": "cells[1].Text.text",
"encoded": true,
"editor": "\u003cinput class=\"k-textbox\" id=\"cells_1__Text_text\" name=\"cells[1].Text.text\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"cells[1].Text.text\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcTrue
}, {
"attributes": {
"style": "width: 2em"
},
"command": [{
"name": "destroy",
"buttonType": "ImageAndText",
"text": "Delete"
}]
}],
"scrollable": false,
"editable": {
"confirmation": "Are you sure you want to delete this record?",
"confirmDelete": "Delete",
"cancelDelete": "Cancel",
"mode": "incell",
"template": null,
"createAt": "bottom",
"create": true,
"update": true,
"destroy": true
},
"toolbar": {
"command": [{
"name": null,
"buttonType": "ImageAndText",
"text": "Add new record"
}, {
"name": null,
"buttonType": "ImageAndText"
}]
},
"messages": {
"noRecords": "No records available."
},
"dataSource": {
"type": (function() {
if (kendo.data.transports['aspnetmvc-ajax']) {
return 'aspnetmvc-ajax';
} else {
throw new Error('The kendo.aspnetmvc.min.js script is not included.');
}
}
)(),
"transport": {
"read": {
"url": "/FeedbackForm/ReadQuestionGrid/57"
},
"prefix": "",
"update": {
"url": "/FeedbackForm/UpdateQuestionGrid"
},
"create": {
"url": "/FeedbackForm/CreateQuestionGrid/57"
},
"destroy": {
"url": "/FeedbackForm/DestroyQuestionGrid"
}
},
"serverPaging": true,
"serverSorting": true,
"serverFiltering": true,
"serverGrouping": true,
"serverAggregates": true,
"filter": [],
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "id",
"fields": {
"id": {
"editable": false,
"type": "number",
"defaultValue": -1
},
"number": {
"type": "number"
},
"viewableby": {
"type": "object",
"defaultValue": []
},
"cells": {
"type": "object",
"defaultValue": [{
"Location": {
"id": 0,
"question_id": 0,
"column_id": 14
},
"Text": {
"id": 0,
"location_id": 0,
"viewableby": null,
"text": null
}
}, {
"Location": {
"id": 0,
"question_id": 0,
"column_id": 9
},
"Text": {
"id": 0,
"location_id": 0,
"viewableby": null,
"text": null
}
}]
}
}
}
},
"batch": true
},
"navigatable": true
});
});
<script>
kendo.syncReady(function() {
jQuery("#QuestionGridEditable").kendoSortable({
"change": onDrag,
"filter": "table \u003e tbody \u003e tr",
"container": "#QuestionGridEditable tbody",
"axis": "y",
"cursor": "move",
"placeholder": placeholder
});
});

Answer 1

The problem came down to the HintHandler. Setting the sortable item's HintHandler to a JavaScript function that returned false fixed the issue with the ghost image.