Sortable does not work with AngularJS ng-repeat

4 posts, 0 answers
  1. Mike
    Mike avatar
    2 posts
    Member since:
    Apr 2014

    Posted 04 Sep 2014 Link to this post

    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!
  2.
  3. Mike
    Mike avatar
    2 posts
    Member since:
    Apr 2014

    Posted 04 Sep 2014 in reply to Mike Link to this post

    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.
  5. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 25 May 2016 in reply to Mike Link to this post

    I just encountered this today as well... this should just work, common...
  7. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 25 May 2016 in reply to Steve Link to this post

    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);
    }

  8.
Back to Top