Перетащите строку в KendoUI Grid с помощью AngularJs

Question

Как сделать строку в сетке KendoUI, перетаскиваемой с помощью AngularJ?

В документации сказано, что вам нужно инициализировать перетаскиваемый компонент с помощью фильтра, т.е. "tbody > tr", но я не понимаю, как применить директиву kendo-draggable только к строкам.

Вот как я инициализирую кендо-сетку:

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

Answer 1

Решение состоит в том, чтобы определить rowTemplate и altRowTemplate для объекта config и добавить шаблон в 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>

Как вы могли заметить, я использую перетаскиваемую директиву без кендо. RowTemplate и altRowTemplate назначены внутри моего контроллера:

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

Answer 2

В дополнение к ответу выше, вы можете попробовать использовать эту угловую директиву:

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