Drag Drop and Reorder Rows using AngularJS in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

How to reorder list using angularjs in asp.net

You are viewing reply posted by: dharmendr one year ago.
Posted one year ago

Hi rani,

Check this example. Now please take its reference and correct your code.

For this example i have used angular-drag-and-drop-lists.js file.

You can can be downloaded from GitHub using the following link.

Download angular-drag-and-drop-lists


I have made use of the following table HolidayLocations with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', ['dndLists']);
    app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
        $scope.Locations = [];
        $scope.PopulateLocations = function () {
            $http.post('Default.aspx/GetLocations', { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Locations = response.data.d;
        $scope.Sorting = function (index) {
            $scope.Locations.splice(index, 1);
            var newOrders = [];
            angular.forEach($scope.Locations, function (val, index) {
                val.Preference = index + 1;
            $http.post('Default.aspx/UpdateLocations', { reorderLocations: newOrders }, { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Locations = response.data.d;
    } ]);
<div ng-app="MyApp" ng-controller="MyController">
    <table dnd-list="Locations" class="table table-striped table-bordered table-hover table-condensed">
        <tr class="danger">
        <tbody ng-repeat="item in Locations" dnd-list-id="{{item.Id}}" dnd-draggable="item"
            dnd-moved="Sorting($index)" dnd-effect-allowed="move" dnd-selected="models.selected = item"
            ng-class="{'selected': models.selected === item}" style="cursor: move">



public static List<HolidayLocation> GetLocations()
    TestEntities entities = new TestEntities();
    List<HolidayLocation> locations = entities.HolidayLocations.OrderBy(x => x.Preference).ToList();
    return locations;

public static List<HolidayLocation> UpdateLocations(List<HolidayLocation> reorderLocations)
    TestEntities entities = new TestEntities();
    foreach (HolidayLocation newLocations in reorderLocations)
        HolidayLocation oldLocation = entities.HolidayLocations.Where(x => x.Id == newLocations.Id).FirstOrDefault();
        // Updating new Preference.
        oldLocation.Preference = newLocations.Preference;
    return entities.HolidayLocations.OrderBy(x => x.Preference).ToList();


Public Shared Function GetLocations() As List(Of HolidayLocation)
    Dim entities As TestEntities = New TestEntities()
    Dim locations As List(Of HolidayLocation) = entities.HolidayLocations.OrderBy(Function(x) x.Preference).ToList()
    Return locations
End Function

Public Shared Function SaveLocations(ByVal reorderLocations As List(Of HolidayLocation)) As List(Of HolidayLocation)
    Dim entities As TestEntities = New TestEntities()
    For Each newHolidayLocation As HolidayLocation In reorderLocations
        Dim oldHolidayLocation As HolidayLocation = entities.HolidayLocations.Where(Function(x) x.Id = newHolidayLocation.Id).FirstOrDefault()
        ' Updating new Preference.
        oldHolidayLocation.Preference = newHolidayLocation.Preference
    Return entities.HolidayLocations.OrderBy(Function(x) x.Preference).ToList()
End Function


Updated Database Preference