In this article, i will demonstrates how to use jQuery UI sortable (drag & drop) with ASP.NET Repeater Control. Through Jquery UI Sortable plugin, we can drag and drop the selected items with the mouse.
Using jQuery UI with ASP.NET Repeater control, you will able to drag and drop selected row with the mouse.
I have added jQuery UI CDN reference as given below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"
type="text/javascript"></script>
Drag and drop operation will be perform by using jQuery UI sortable plugin as given below.
<script>
$(function () {
$("#table1 tbody.rep-drag").sortable({
revert: true
});
$("#table1 tbody.rep-drag").disableSelection();
});
</script>
Note:If you will not add jQuery libarary and the jQuery UI plugin you will not get the output.
Let’s start
Open your Visual Studio. Create Web Site, create a page called “Repeater-jQuery-UI-Sortable.aspx”.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI sortable (drag & drop) with ASP.NET Repeater Control | aspxtutorial.com
</title>
<style>
#table1
{
width: 500px;
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #666;
}
#table1 th
{
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
height: 29px;
text-align: left;
padding-left: 10px;
background-color: #fafafa;
}
#table1 td
{
border-bottom: 1px solid #eee;
padding-left: 10px;
}
tr{ cursor:pointer;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"
type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<style>
.demo ul
{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
.demo li
{
margin: 5px;
padding: 5px;
width: 150px;
}
</style>
<script>
$(function () {
$("#table1 tbody.rep-drag").sortable({
revert: true
});
$("#table1 tbody.rep-drag").disableSelection();
});
</script>
<div>
<p>
<h1>
jQuery UI sortable (drag & drop) with ASP.NET Repeater Control
</h1>
</p>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="table1">
<thead>
<tr>
<th>
Sr.#
</th>
<th>
Title
</th>
<th>
Author
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody class="rep-drag">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# ((Book)Container.DataItem).Id %>
</td>
<td>
<%# ((Book)Container.DataItem).Title %>
</td>
<td>
<%# ((Book)Container.DataItem).Author %>
</td>
<td>
<%# ((Book)Container.DataItem).Price %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
<tfoot>
<tr>
<th colspan="2">
 
</th>
<th>
<div id="total">
</div>
</th>
</tr>
</tfoot>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<a href="http://aspxtutorial.com" title=".NET Articles">.NET Articles </a>
<p>
Author:Aamir Hasan</p>
</form>
</body>
</html>
Following is the “Repeater-jQuery-UI-Sortable.aspx.cs” code given below.
public partial class Repeater_jQuery_UI_Sortable : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Repeater1.DataSource = Display();
Repeater1.DataBind();
}
public List<Book> Display()
{
List<Book> Obj = new List<Book>()
{
new Book{ Id=1, Title="ASP.NET C#", Author="Aamir Hasan", Price= 101.1F},
new Book{ Id=2,Title="ASP.NET Control", Author="Aamir Hasan", Price= 120.1F},
new Book{ Id=3,Title="ASP.NET Development", Author="Aamir Hasan", Price= 140.1F},
new Book{ Id=4,Title="ASP.NET Desing Pattern", Author="Aamir Hasan", Price= 50.1F},
new Book{ Id=5,Title="Sharepoint 2010 Administration", Author="Aamir Hasan", Price= 70.1F},
new Book{ Id=6,Title="Sharepoint 2010 Development", Author="Aamir Hasan", Price= 80.1F},
new Book{ Id=7,Title="jQuery", Author="Aamir Hasan", Price= 90.1F},
new Book{ Id=8,Title="HTML 5", Author="Aamir Hasan", Price= 20.1F},
new Book{ Id=9,Title="Javascript", Author="Aamir Hasan", Price= 40.1F},
new Book{ Id=10,Title="ASP.NET C#", Author="Aamir Hasan", Price= 70.1F}
};
return Obj;
}
public class Book
{
public int Id { get; set; }
public string Title { get; set; }
public string Author { get; set; }
public float Price { get; set; }
}
}
Output
Download
Repeater-jQuery-UI-Sortable.rar (1.84 kb)
See live demo