Drag-gable Gridview using JQuery
In this article I'm trying to explain how to drag and drop gridview control using JQuery in ASP.net. Using one simple line of code we can achieve this. This article will help you for freshers those who are new to JQuery.
Drag-gable Gridview using JQuery:
In this article I'm trying to explain how to drag and drop gridview control using JQuery in ASP.net. Using one simple line of code we can achieve this. This article will help you for freshers those who are new to JQuery.Source Code:
Use gridview id as a key field to find the control for dragging.
<script>
$("#gv").draggable();
</script>
I just design my Source code like below.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Draggable.aspx.cs" Inherits="Draggable" %>
<!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>
<title>Draggable Demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<form runat="server">
<asp:GridView ID="gv" runat="server">
</asp:GridView>
</form>
<script>
$("#gv").draggable();
</script>
</body>
</html>Code Behind:
I just binded some records into my gridview to perform dragging action into that.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class Draggable : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("Item");
dt.Columns.Add("Cost");
DataRow dr = dt.NewRow();
dr[0] = "Laptop";
dr[1] = "35000";
DataRow dr1 = dt.NewRow();
dr1[0] = "Mobile";
dr1[1] = "15000";
DataRow dr2 = dt.NewRow();
dr2[0] = "Mens Ware";
dr2[1] = "3000";
dt.Rows.Add(dr);
dt.Rows.Add(dr1);
dt.Rows.Add(dr2);
if (!IsPostBack)
{
gv.DataSource = dt;
gv.DataBind();
}
}
}Conclusion:
This article will help you, for those who are beginners to perform dragging action into the Gridview control.
Hope you are enjoyed with this article. If you have any doubts or feedback out of my resource please post your responses.
I Just refer from "https://jqueryui.com/".
Follow