ui-grid-draggable-rows - row doesn't move

Question

I'm trying to implement ui-grid-draggable-rows so I can move rows in my ui-grid. I'm using the JavaScript from the demo. I can successfully drag the row, and drop it in its new location, however the dragged row doesn't stay in its new location. After dragging, the grid contents are the same as before.

As you can see in the console, the from and to index (created by dragging the row) are correct.

Has anyone else encountered this? Is there a fix?

My HTML:

<div id="container" class="PageContainer">
    <h2 class="mainHeader">Variables</h2>
    <div class="OneOfTwo">
        <div class="gridHalf" ui-grid="gridVariableGroups" ui-grid-selection ui-grid-draggable-rows ng-hide="loading"></div>
    </div>
    <h2 class="footer">
        <button ng-click="editTask();" ng-disabled="loading">Edit</button>
    </h2>
</div>

This is the code in my angular controller:

function variableGroupsController($scope, $http, $routeParams, uiGridConstants) {
    $scope.loading = 1;

    $scope.myData = [{ 'Name': 'Name1', 'Snuh': 'Snuh1' },
                  { 'Name': 'Name2', 'Snuh': 'Snuh2' },
                  { 'Name': 'Name3', 'Snuh': 'Snuh3' }];

    $scope.gridVariableGroups = {
        multiSelect: false,
        enableRowHeaderSelection: false, // We don't want to have to click a row header to select a row. We want to just click the row itself.
        // Got the row template from https://github.com/cdwv/ui-grid-draggable-rows:
        rowTemplate: '<div grid="grid" class="ui-grid-draggable-row" draggable="true"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader, \'custom\': true }" ui-grid-cell></div></div>',
        columnDefs: [{ field: 'Name', displayName: 'Name', width: "90%", resizable: true, sort: { direction: uiGridConstants.ASC, priority: 1 } },
                     { field: 'Snuh', displayName: 'Snuh', width: "8%" }]
    };

    $scope.gridVariableGroups.data = $scope.myData;

    $scope.loading = 0;

    $scope.gridVariableGroups.onRegisterApi = function (gridApi) {
        gridApi.draggableRows.on.rowDropped($scope, function (info, dropTarget) {
            console.log("Dropped", info);
        });
    };
}

You should try to reproduce this in a plunker, it would make it easier for others to find out what's happening. — imbalind

Zheng Wang Zheng Wang · Accepted Answer · 2018-01-08T07:45:20

Not sure whether you have already resolved the issue, but it looks like you have sorting on the column. Sorting keeps in force (guess ui-grid is using AngularJS two-way data binding to achieve this) but move is a one time action. So even if your move works, it is immediately 'rectified' by sorting and you won't be able to notice it.

ui-grid-draggable-rows - row doesn't move

1 Answers