在 MVVM table 上使用 Kendo UI sortable 小部件

Question

我正在使用 kendo UI MVVM 来填充此 table。

<div class="col-md-12">
    <table id="table" class="table table-bordered col-md-12 col-xs-12 inspection-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Image</th>
                <th>Description</th>
                <th">Actions</th>
            </tr>
        </thead>
        <tbody data-template="rowTemplate" data-bind="source: photos"> </tbody>
    </table>
</div>

<script type="text/x-kendo-template" id="rowTemplate">
    <tr>
        <td data-bind="text: number"></td>
        <td>
            <img class="" width="100" height="80" data-bind="attr:{ src:src }, events: { click: showPhoto }" />
        </td>
        <td data-bind="text: desc"></td>
        <td>
            <i class="kendo-sortable-move"></i>
        </td>
    </tr>
</script>

我希望能够通过单击用户帐户移动 UI 中的 table 行。如果我将 data-role="sortable" 添加到 table，则没有任何效果。参考：https://www.telerik.com/forums/sortable-handler-inside-kendo-template

如何让 kendo sortable 及其处理程序在 MVVM 可观察对象中工作？

Answer 1

尝试使用 jQuery 等效的 kendoSortable 小部件。在 MVVM 模板中使用 sortable 似乎会导致编译不一致。这可能会导致处理程序无法在可排序小部件内正常工作。参见：kendo sortable widget mvvm UI glitch.

将 id 分配给包含 <table> 的父 <div> 并在其上创建可排序对象。

然后您可以将 observable 方法作为代理绑定到 jQuery 小部件处理程序：

kendo.jQuery("#" + id).kendoSortable({
    filter: ">div.container",
    cursor: "move",
    placeholder: function (element) {
        return element.clone().css("opacity", 0.1);
    },
    hint: function (element) {
        return element.clone().removeClass("k-state-selected");
    },
    change: viewModel.updatePositions.bind(viewModel, e)
});

在 MVVM table 上使用 Kendo UI sortable 小部件

Use Kendo UI sortable widget on MVVM table

jquery

kendo-ui