This is a migrated thread and some comments may be shown as answers.

Sortable does not work with AngularJS ng-repeat

3 Answers 444 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 04 Sep 2014, 10:51 PM
I am confused why there is an AngularJS integration for Sortable Widget, when it doesn't support using ng-repeat.  In the demo here (http://demos.telerik.com/kendo-ui/sortable/index) - there is a hardcoded list of Li items that are being sorted.  However, no one using AngularJS is going to use a hard-coded list, they will use an ng-repeat from a data model.

The visual sort functionality of course works using an ng-repeat.  But once you move a list item, it does not update the data model source, rendering this widget pretty much useless for someone using Angular.  This widget needs a datasource integration.  

Please don't pretend to do these half-ass integrations any more.  They just waste people's time.

Do you have a solution to get it working with ng-repeat for me?  I would like to sort items, have my model updated with that new order, and then be able to use that new data model and send it back to the server, etc.

Thanks!

3 Answers, 1 is accepted

Sort by
0
Mike
Top achievements
Rank 1
answered on 04 Sep 2014, 11:20 PM
I got it working with Angular ng-repeats with the following code:

end: function (e) {
            e.preventDefault();
            $('.dropHint').remove();
            var itemMoved = angular.copy($scope.content[e.oldIndex]);
            $scope.content.splice(e.oldIndex, 1);
            $scope.content.splice(e.newIndex, 0, itemMoved);
            $scope.$apply();
        }

You guys should be able to work something like that into your Angular integration so we can use a datasource attribute.
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 25 May 2016, 07:16 PM
I just encountered this today as well... this should just work, common...
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 25 May 2016, 07:50 PM

For others, I found this works best

<ul class="preferences list-group" kendo-sortable k-placeholder="sortPlaceholder" k-hint="sortHint" k-change="onSortChanged">

//Kendo Drag\Drop
$scope.sortingOptions = {
    axis: "y"
}
 
$scope.sortPlaceholder = function (element) {
    return element.clone().addClass("placeholder").text("Drop Here...");
};
 
$scope.sortHint = function (element) {
    return element.clone().css("width", element.width()).addClass("moving hint");
};
 
$scope.onSortChanged = function (e) {
    arraymove($scope.selectedBlock.locations, e.oldIndex, e.newIndex);
    $scope.dirty = true;
    $scope.$apply();
}

 

function arraymove(arr, fromIndex, toIndex) {
    var element = arr[fromIndex];
    arr.splice(fromIndex, 1);
    arr.splice(toIndex, 0, element);
}

Tags
Sortable
Asked by
Mike
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Share this question
or