Question

我想使用kendo的拖放功能重新排序我的行，使用Kendo生成行，我能够拖动，意味着我能够抓住一行，但是当我把它放在桌子的某个地方，行位置不会改变它仍然是生成行的same.code

@(Html.Kendo().Grid < WorkItemsGrid > ().Name("workItemsGrid").Events(e => e.DataBound("onDataBound"))
    .Columns(c => {

        c.Bound(i => i.Priority).ClientTemplate("#= GetArrow(Priority)#");
        c.Bound(i => i.Order);
        c.Bound(i => i.EpicTitle).Title("Epic");
        c.Bound(i => i.Type).ClientTemplate("#= GetType(Type)#");
        c.Bound(i => i.Code).ClientTemplate("#= SetEdit(ItemsId, Code)#");

        c.Bound(i => i.Title).ClientTemplate("#= length(Title)#");;
        c.Bound(i => i.State);
        c.Bound(i => i.Estimation).ClientTemplate("#= sum(Estimation)#");
        c.Bound(i => i.ItemsId).HtmlAttributes(new {
            @class = "rowId"
        }).Hidden();
    }).Scrollable().Reorderable(x => x.Columns(true))
    .DataSource(d => d
        .Ajax()
        .Read(r => r.Action("Get", "Items", new {
            projectId = ViewBag.projectId, selectedSprintId = ViewBag.selectedSprint
        }))
    )
);

Databound Javascrip：

function onDataBound(e) {

    var grid = this;
    var currentRecords = grid.dataSource.view();
    for (var i = 0; i < currentRecords.length; i++) {

        if (!currentRecords[i].activeInd) {
            var row = grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']");
            row.addClass("item-row");

            row.draggable({
                cursorAt: {
                    left: 75
                },
                containment: ".grid-view",
                cursor: "-webkit-grabbing",
                start: function() {
                    $(this).hide();
                },
                stop: function() {
                    $(this).show();
                },
                helper: function() {
                    return $('<div id="' + $(this).find(".rowId").html() + '" class="holder k-grid"><table></table></div>').find('table').append($(this).clone()).end().appendTo('body');
                }
            });
        }
    }
}

如何通过拖放行来更改订单？我是剑道新手，它是由其他一些今天无法使用的开发人员生成的

Answer 1

查看此demo并参阅API documentation。您可以将Kendo UI Sortable小部件与Kendo UI Grid集成。

Answer 2

当网格处于单元格内编辑模式时，上面提到的kendo演示会出现问题 - 单击另一行时单元格的更改会丢失。

这个小提琴http://jsfiddle.net/UsCFK/273/有效。

它使用带有上述拖动句柄的列来防止单元格编辑丢失 - 其他单元格在设置中被忽略：

dynamic d = Model.GetColModel("customer", 17, " { formatoptions : { formatter : \"number\", editable :true }, stam :2}");

它还会更新数据源中的位置字段，而不是删除，然后像在其他一些示例中一样重新插入行 - 因为这会导致对服务器的每一行移动的删除请求请求 - 这可能导致单击批量编辑取消按钮时出现问题。位置字段仅用于演示目的 - 不应公开进行手动编辑。

如何通过拖放重新排序剑道行

2 个答案: