出现在剑道网格拖放的鬼图像

时间:2018-03-09 21:15:05

标签: kendo-ui drag-and-drop grid kendo-asp.net-mvc

剑道网格一直存在拖放功能的问题,它具有与光标一致的所有数据的副本,这些数据基本上粘在网格的左侧。

我将其附加到的网格设置为可编辑,但是,这似乎对此没有影响。禁用编辑不能解决问题。值得注意的是,网格绑定到动态类型,这可能会产生一些影响,但我没有找到任何调查。

可排序区块位于

之下
@(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

生成的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
    });
});

1 个答案:

答案 0 :(得分:0)

问题归结为HintHandler。将可排序项的HintHandler设置为返回false的JavaScript函数,修复了ghost图像的问题。