Drag and Drop GridView Row to DetailsView using jQuery
In my previous post I explained about how to search and highlight results in GridView. There are many other interesting and useful fe...
https://www.programming-free.com/2012/12/aspnet-drag-and-drop-gridview-row-to.html
In my previous post I explained about how to search and highlight results in GridView. There are many other interesting and useful features that can be added to the default ASP.NET GridView. "Drag & Drop" is one such feature that adds more interaction to the UI. When there are too many columns in the GridView, it is essential to provide a DetailsView for the end user to interpret individual rows effectively. This is done often on clicking GridView select button. To give a different and interactive user experience, we can enable end users with options to drag any row from GridView and drop it on DetailsView for detailed display. In this post, I am going to explain with a simple example on how to drag a GridView row and drop it in a DetailsView using jQuery UI's 'Draggable' and 'Droppable' mouse interactions.
Before we start implementing this, it is better to have a knowledge on what jQuery UI's draggable and droppable interaction feature provide. You can see live demonstrations in the links provided in the previous sentence. Draggable feature enables dragging functionality on any DOM element and Droppable feature make the element accept the dragged element to be dropped in it. This is very simple and you need not be a jQuery scholar to understand this example.
Steps to Reproduce
1. Create a MySql table with the following structure and populate it with dummy data. This data will be used to populate the gridview. You can also use other databases but make sure to correct the connection strings in the code below while populating gridview.
+-------------+-------------+
| Field | Type |
+-------------+-------------+
| id | int(11) |
| name | varchar(20) |
| designation | varchar(20) |
| salary | varchar(20) |
+-------------+-------------+
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.grd1-header
{
background-color:Maroon;
border: 3px solid #ffba00;
color:White;
}
.grd2-header
{
background-color:Green;
border: 3px solid #ffba00;
color:White;
}
.sel-row
{
background-color:Yellow;
border: 3px solid #ffba00;
color:Black;
}
.sel-row td
{
cursor:move;
font-weight:bold;
}
</style>
<title>Drag & Drop GridView</title>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var droppedItemIndex = -1;
$('.block').draggable({
helper: "clone",
cursor: "move"
});
$('#<%=DetailsView1.ClientID %>').droppable({
drop: function (ev, ui) {
accept: '.block',
droppedItemIndex = $(ui.draggable).index();
var droppedItem = $(".grd-source tr").eq(droppedItemIndex);
index = -1;
$("[id*=DetailsView1] .name").html(droppedItem.find(".name").html());
$("[id*=DetailsView1] .designation").html(droppedItem.find(".designation").html());
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Drag and Drop GridView Row to another GridView using jQuery</h1>
<div>
<table class="ui-corner-top" border="1">
<tr>
<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
onrowcreated="GridView1_RowCreated" CssClass="grd-source" >
<SelectedRowStyle CssClass="block sel-row" />
<RowStyle CssClass="block" />
<HeaderStyle CssClass="grd1-header" />
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" ItemStyle-CssClass="id" />
<asp:BoundField DataField="name" HeaderText="NAME" ItemStyle-CssClass="name" />
<asp:BoundField DataField="designation" HeaderText="DESIGNATION" ItemStyle-CssClass="designation" />
<asp:BoundField DataField="salary" HeaderText="SALARY" ItemStyle-CssClass="salary" />
</Columns>
</asp:GridView>
</td>
<td valign="middle">
<asp:DetailsView CssClass="ui-widget" ID="DetailsView1" runat="server"
Height="50px" Width="125px" AutoGenerateRows="false">
<Fields>
<asp:BoundField DataField="name" HeaderText="Name" ItemStyle-CssClass="name" />
<asp:BoundField DataField="designation" HeaderText="Designation" ItemStyle-CssClass="designation" />
</Fields>
<HeaderStyle BackColor="Green" ForeColor="White" HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="Label1" runat="server" Text="Details" Font-Size="Large"></asp:Label>
</HeaderTemplate>
</asp:DetailsView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
3. In the code-behind page add the following code.
protected void Page_Load(object sender, EventArgs e)
{
//Fetch data from mysql database
MySqlConnection conn = new MySqlConnection("server=localhost;uid=root;password=priya123;database=test; pooling=false;");
conn.Open();
string cmd = "select * from employee";
MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd, conn);
DataSet objDs = new DataSet();
dAdapter.Fill(objDs);
GridView1.DataSource= objDs.Tables[0];
GridView1.DataBind();
DataTable dt = new DataTable();
objDs.Tables[0].Clear();
dt = objDs.Tables[0];
dt.Rows.Add();
DetailsView1.DataSource = dt;
DetailsView1.DataBind();
}
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='block sel-row'");
e.Row.Attributes.Add("onmouseout", "this.className='block'");
}
}
4. Now build the project and run it. You will now be able to drag a row from gridview and drop it in the details view as shown below.
Code Explanation
As I mentioned earlier, draggable feature can be enabled on any DOM element. In the above code, each gridview row (typically an HTML table row tr) is assigned a css class named ".block" and using this css class we are enabling draggable option on each grid view row.
$('.block').draggable({
helper: "clone",
cursor: "move"
});
The helper option with value 'clone' makes a copy of gridview and does not move the gridview row itself to the detailsview. Same way droppable option is enabled on the DetailsView with the below code.
$('#<%=DetailsView1.ClientID %>').droppable({
drop: function (ev, ui) {
accept: '.block',
droppedItemIndex = $(ui.draggable).index();
var droppedItem = $(".grd-source tr").eq(droppedItemIndex);
index = -1;
$("[id*=DetailsView1] .name").html(droppedItem.find(".name").html());
$("[id*=DetailsView1] .designation").html(droppedItem.find(".designation").html());
}
});
Here, we define what should be done whenever an object is dropped on to the detailsview inside the drop method. The first option, accept:'.block' restricts the detailsview to accept elements with .block css class alone. Then we identify the index of the dropped element, in this case the index of the gridview row that is being dropped, using the index() method. Finally we get the corresponding row values and place it in the appropriate fields of detailsview.
Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts.Thanks for reading!!
thank you alot..it's useful for me..
ReplyDeleteMost Welcome!
DeleteIt's nice blog for me. Thanks....
Deleteit's nice but how we can drag more than one row into second gridview
ReplyDeleteReally great... !!!
ReplyDeletehi friend
ReplyDeletecan you give me code for searching on gridview column wise with colour change using jquery only (not write .net code and not connect with database also when searching)
Hi Priya,
ReplyDeleteThis has just proved to be a very useful pointer for me in a project I'm working on using ASP and JQueryUI Touch Punch for Android/iOS drag/drag in HTML. Just wanted to say thanks for making the effort to document it.
Thank you very much for the feedback :)
Deleteayam laga bangkok
ReplyDeleteGreat info! I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have 먹튀검증 Hi. I think I have found you just the right time 먹튀검증
ReplyDeleteĐặt vé tại phòng vé Aivivu, tham khảo
ReplyDeletegiá vé máy bay từ hàn quốc về việt nam
giá vé máy bay vinh hồ chí minh
vé máy bay saigon- hà nội
giá vé máy bay đi đà lạt khứ hồi
vé máy bay bmt đi quy nhơn
Hello, I read the post well. 안전놀이터추천 It's a really interesting topic and it has helped me a lot. In fact, I also run a website with similar content to your posting. Please visit once
ReplyDeleteOf course, your article is good enough, 먹튀검증 but I thought it would be much better to see professional photos and videos together. There are articles and photos on these topics on my homepage, so please visit and share your opinions.
ReplyDeleteI'm writing on this topic these days, , but I have stopped writing because there is no reference material. Then I accidentally found your article. I can refer to a variety of materials, so I think the work I was preparing will work! Thank you for your efforts. Bong do
ReplyDeleteWhat a nice post! I'm so happy to read this. 안전놀이터모음 What you wrote was very helpful to me. Thank you. Actually, I run a site similar to you. If you have time, could you visit my site? Please leave your comments after reading what I wrote. If you do so, I will actively reflect your opinion. I think it will be a great help to run my site. Have a good day.
ReplyDeleteWhat a post I've been looking for! I'm very happy to finally read this post. 안전놀이터 Thank you very much. Can I refer to your post on my website? Your post touched me a lot and helped me a lot. If you have any questions, please visit my site and read what kind of posts I am posting. I am sure it will be interesting.
ReplyDeleteThat's a really impressive new idea! 메이저토토사이트추천 It touched me a lot. I would love to hear your opinion on my site. Please come to the site I run once and leave a comment. Thank you.
ReplyDeleteI accidentally searched and visited your site. I still saw several posts during my visit, but the text was neat and readable. I will quote this post and post it on my blog. Would you like to visit my blog later? 토토사이트순위
ReplyDelete