In this example two things are covered.
1. List View Drag and Drop Control using Jquery
2. How to read data from XML ?
dragNdrop.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dragNdrop.aspx.cs"
Inherits="DragItemInListViewASPNET.dragNdrop" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="JQuery/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="JQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="JQuery/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
#DragableTable1, #DragableTable2
{
list-style-type: none;
border-right: #669999 2px solid;
padding-right: 5px;
border-top: #669999 2px solid;
padding-left: 5px;
float: left;
padding-bottom: 0px;
margin: 3px;
border-left: #669999 2px solid;
width: 160px;
padding-top: 5px;
border-bottom: #669999 2px solid;
}
#DragableTable1 li, #DragableTable2 li
{
border-right: #000 1px solid;
padding-right: 2px;
border-top: #000 1px solid;
padding-left: 2px;
font-size: 15px;
margin-bottom: 5px;
padding-bottom: 2px;
border-left: #000 1px solid;
width: 156px;
cursor: pointer;
padding-top: 2px;
border-bottom: #000 1px solid;
background-color: #eee;
}
</style>
<script type="text/javascript">
$(function () {
$("#DragableTable1, #DragableTable2").sortable({
connectWith: ".connectedDragableTable"
}).disableSelection();
});
$(document).ready(function () {
$("li").dblclick(function () {
$(this).closest('li').remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>
<b>List view Drag and Drop Example</b></h1>
<br />
<div>
<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<ul id="DragableTable1" class="connectedDragableTable">
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="ui-state-default">
<%# Eval("Dragvalue1") %></li>
</ItemTemplate>
</asp:ListView>
<asp:ListView ID="ListView2" runat="server">
<LayoutTemplate>
<ul id="DragableTable2" class="connectedDragableTable">
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="ui-state-highlight">
<%# Eval("Dragvalue2") %></li>
</ItemTemplate>
</asp:ListView>
</div>
</form>
</body>
</html>dragNdrop.aspx.cs
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
using System.Data;
namespace DragItemInListViewASPNET
{
public partial class dragNdrop : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
XmlDocument xmlDocument = new XmlDocument();
using (DataTable objListView1 = new DataTable())
{
objListView1.Columns.Add("Dragvalue1", Type.GetType("System.String"));
xmlDocument.Load(AppDomain.CurrentDomain.BaseDirectory + "/XmlFile/ListViewData1.xml");
XmlNodeList xmlNodeList = xmlDocument.SelectNodes("root/data[@open='1']");
foreach (XmlNode xmlNode in xmlNodeList)
{
DataRow dr = objListView1.NewRow();
dr["Dragvalue1"] = xmlNode.InnerText;
objListView1.Rows.Add(dr);
}
ListView1.DataSource = objListView1;
ListView1.DataBind();
}
XmlDocument xmlDocument2 = new XmlDocument();
using (DataTable objListView2 = new DataTable())
{
objListView2.Columns.Add("Dragvalue2", Type.GetType("System.String"));xmlDocument2.Load(AppDomain.CurrentDomain.BaseDirectory + "/XmlFile/ListViewData2.xml");
XmlNodeList xmlNodeList2 = xmlDocument2.SelectNodes("root/data[@open='1']");
foreach (XmlNode xmlNode in xmlNodeList2)
{
DataRow dr = objListView2.NewRow();
dr["Dragvalue2"] = xmlNode.InnerText;
objListView2.Rows.Add(dr);
}
ListView2.DataSource = objListView2;
ListView2.DataBind();
}
}
}
}ListViewData1.xml
<?xml version="1.0" encoding="utf-8" ?>
<root>
<data open="1">drag and drop element 1</data>
<data open="1">drag and drop element 2</data>
<data open="1">drag and drop element 3</data>
<data open="1">drag and drop element 4</data>
<data open="1">drag and drop element 5</data>
<data open="1">drag and drop element 6</data>
<data open="1">drag and drop element 7</data>
</root>
