angularjskendo-uikendo-gridkendo-draggable

Drag and drop row on KendoUI Grid with AngularJs


How can I make a row in a KendoUI Grid draggable with AngularJs?

The documentation says you have to initialize the draggable component with a filter ie "tbody > tr", but I don't understand how to apply the kendo-draggable directive on just the rows.

This is how I initialize kendo-grid:

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

Solution

  • The solution is to define a rowTemplate and altRowTemplate on the config object and adding a template inside the html like so:

    <!-- 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>
    

    As you might notice, I am using a non-kendo draggable directive. The rowTemplate and altRowTemplate is assigned inside my controller:

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