使用 AngularJs 在 Kendo UI Grid 中拖放行

Question

如何使用 AngularJs 使 KendoUI 网格中的一行可拖动？

文档说您必须使用过滤器初始化可拖动组件，即 "tbody > tr"，但我不明白如何仅在行上应用 kendo-draggable 指令。

这就是我初始化 kendo-grid 的方式：

<div 
    kendo-grid
    k-options="activityGridOptions"
    k-rebind="activityGridOptions"
></div>

Answer 1

解决方案是在配置对象上定义一个 rowTemplate 和 altRowTemplate 并在 html 中添加一个模板，如下所示：

<!-- Grid row template -->
<script type="text/x-kendo-template" id="grid-row-template">
    <tr data-uid="#= uid #" draggable draggable-data="dataItem" draggable-type="'planner.activity'" ng-class="{'current-item': currentActivityId == dataItem.SyncTableUniqueId}" ng-click="setCurrentActivity(dataItem)">
        <td>{{dataItem.AvtaleNr}}.{{dataItem.VareLøpenummer}}</td>
        <td>
            {{dataItem.Date| moment:'ll'}} {{dataItem.Time| moment:'HH:mm':'HH:mm:ss'}}
        </td>
        <td>{{dataItem.FirstName}}</td>
    </tr>
</script>

您可能会注意到，我使用的是非kendo 可拖动指令。 rowTemplate 和 altRowTemplate 在我的控制器中分配：

$scope.activityGridOptions = {
    dataSource: $scope.gridDataSource,
    // ...
    rowTemplate: kendo.template($("#grid-row-template").html()),
    altRowTemplate: kendo.template($("#grid-row-template").html())
};

Answer 2

除了上面的答案，你可以尝试使用这个angular指令：

https://github.com/neoziro/angular-draganddrop

使用 AngularJs 在 Kendo UI Grid 中拖放行

Drag and drop row on KendoUI Grid with AngularJs

kendo-ui

angularjs

kendo-grid

kendo-draggable