List View Drag and Drop Control using Jquery

 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>

 ListViewData2.xml

<?xml version="1.0" encoding="utf-8" ?>
<root>
  <data open="1">drag and drop element 8</data>
  <data open="1">drag and drop element 9</data>
  <data open="1">drag and drop element 10</data>
  <data open="1">drag and drop element 11</data>
  <data open="1">drag and drop element 12</data>
  <data open="1">drag and drop element 13</data>
  <data open="1">drag and drop element 14</data>
</root>

ASP.Net Example

Pages

Monday, February 6, 2012

List View Drag and Drop Control using Jquery

1 comment: