ASP.Net Example: Oct 2, 2011 asp.net Tutorials

Drag and Drop GridView Row with jQuery.
Save Display Order in DataBase with WebMethod.
nodrag and nodrop for row that you are not want to drag and drop

GridViewReOrderDragandDrop.aspx

<%@ Page Language="C#" CodeFile="GridViewReOrderDragandDrop.aspx.cs"
 AutoEventWireup="true" Inherits="GridViewReOrderDragandDrop" %>

<!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">
    <script src="jquery-1.6.1.js" type="text/javascript"></script>
    <script src="jquery.tablednd_0_5.js" type="text/javascript"></script>
    <style>
        .noselect
        {
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            cursor: move;
        }
        .tDnD_whileDrag
        {
            background-color: Lime;
        }
    </style>
    <title>ASPdotNET-Example.blogspot.com</title>

<script type="text/javascript">
var strorder;
$(document).ready(function() {
$('#GridViewReorder').tableDnD(
{
    onDrop: function(table, row) {
    reorder();
    $.ajax({
             type: "POST",
             url: "GridViewReOrderDragandDrop.aspx/GridViewReorders",
             data: '{"Reorder":"'+strorder+'"}',
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             async: true,
             cache: false,
             success: function (msg) {
             alert("Successfully Save ReOrder");
             }

           })
     }
}
);
});
function  reorder()
{ 
    strorder="";
    var totalid=$('#GridViewReorder tr td input').length;
    for(var i=0;i<totalid;i++)
    {
     strorder=strorder+$('#GridViewReorder tr td input')[i].getAttribute("value")+"|";
    }
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <center>
    <h1>GridView Reorder Drag And Drop</h1>
 <div>
 <asp:GridView ID="GridViewReorder" runat="server" HeaderStyle-CssClass="nodrag nodrop"
AutoGenerateColumns="False">
 <Columns>
    <asp:TemplateField ItemStyle-CssClass="noselect" HeaderText="ID">
      <ItemTemplate>
        <asp:Label ID="lblID" runat="server" Text='<%# Bind("id") %>'></asp:Label>
       <asp:HiddenField ID="hdnid" runat="server" Visible="true" Value='<%# Bind("id") %>' />
      </ItemTemplate>
     </asp:TemplateField>
        <asp:TemplateField ItemStyle-CssClass="noselect" HeaderText="Name">
       <ItemTemplate>
         <asp:Label ID="lblName" runat="server" Text='<%# Bind("name") %>'></asp:Label>
         </ItemTemplate>
        </asp:TemplateField>
     <asp:TemplateField HeaderText="Display Order" ItemStyle-CssClass="noselect">
        <ItemTemplate>
          <asp:Label ID="lblOrder" runat="server" Text='<%# Bind("displayorder") %>'>
</asp:Label>
          </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</div>
    <h1> ASPdotNet-Example.blogspot.com</h1>
    </center>
    </form>
</body>
</html>

GridViewReOrderDragandDrop.aspx.cs

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Web.Services;
public partial class GridViewReOrderDragandDrop : System.Web.UI.Page 
{
    SqlConnection strCon;
    string sql;
    SqlDataAdapter objAd;
    DataSet objDs;
    protected void Page_Load(object sender, EventArgs e)
    {
        GridViewReorder.DataSource = Con();
        GridViewReorder.DataBind();
    }
    protected DataSet Con()
    {
strCon = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
        objAd = new SqlDataAdapter("ListGrid", strCon);
        objDs = new DataSet();
        objAd.Fill(objDs);
        return objDs;
    }
    [WebMethod]

    public static void GridViewReorders(string Reorder)
    {
        string[] ListID = Reorder.Split('|');
        for (int i = 0; i < ListID.Length; i++)
        {
            if (ListID[i] != "" && ListID[i] !=null)
            {
                updateGridViewReorder(Convert.ToInt16(ListID[i]), i+1);
            }
        }

    }


    public static void updateGridViewReorder(int id, int DisplayOrder)
    {SqlConnection con ;
con= new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
        SqlCommand cmd = new SqlCommand("UpdateOrder");
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Connection = con;
        cmd.Parameters.AddWithValue("@id", id);
        cmd.Parameters.AddWithValue("@DisplayOrder",DisplayOrder);
        con.Open();
        cmd.ExecuteNonQuery();
        con.Close();
    
    }
}

Database Script

ASP.Net Example

Pages

Sunday, October 2, 2011

gridview reorder row drag and drop