Drag Drop and Reorder Rows using AngularJS in ASP.Net

Last Reply 7 months ago By dharmendr

Posted 8 months ago

How to reorder list using angularjs in asp.net

You are viewing reply posted by: dharmendr 7 months ago.
Posted 7 months 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