Getting Started with Adobe After Effects - Part 6: Motion Blur


Upload Image Close it
Select File

Browse by Tags · View All
BRH 48
#DOTNET 34
#ASP.NET 29
jQuery 22
ASP.NET 20
.NET 20
WPF 9
jquery interview questions 9
jquery faq 8
ASP.NET4 8

Archive · View All
February 2011 10
September 2011 4
August 2011 4
July 2011 4
May 2011 4
April 2011 4
March 2011 4
October 2011 4
June 2011 4
January 2011 4

Implementing Drag in ASP.NET Grid using JQuery

Jan 19 2011 6:40PM by Hima   

Problem

We have two Grid Views namely Patients and Messages side by side that contains records. When the record gets selected, we need to make the grid records drag able. We need to give provision to drag and place (not Drag & Drop) the record in another grid view record and vice versa.

As a result we need to assign Patients to the respective Messages using Drag. One Patient may have different Messages. Same Message can be assigned to any Patients as many times as possible. Relationship between Messages and Patients is One to Many.

Step by Step Solution for the problem

1. Refer the JQuery Files

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
2.CSS Style Sheet
<style>
    div.drag-row
    {
        width: 350px;
        height: 45px;
        background:#ffefc4;
        color:Black;
    }
    .dragrow
    {
        width:100%;
        height:100%;
        background-color:#ffefc4;
    }
.sel-row
{	background:#ffefc4;
    border: 3px solid #ffba00;
    color:Black;
   
}
.sel-row td
{
	cursor:pointer;
	
	font-weight:bold;
	
}
</style>
3.Here are the Grids
<asp:GridView ID="grdPatientDetails" Width="99%" AutoGenerateColumns="false" GridLines="None"
                                runat="server" BorderColor="White"  OnRowDataBound="grdPatientDetails_RowDataBound" CssClass="grdPatientDetails"
                                OnSelectedIndexChanged="grdPatientDetails_SelectedIndexChanged" RowStyle-Font-Size="10px" RowStyle-ForeColor="#404040">
                                <SelectedRowStyle CssClass="sel-row" />
     </asp:GridView>

Remember that the CSS class for the Grid is very important as we identify this Grid in jQuery using CSS only. 
<asp:GridView ID="grdMessageDetails" Width="100%" AutoGenerateColumns="false" GridLines="None"
                                runat="server" OnRowCommand="grdMessageDetails_RowCommand" OnRowDataBound="grdMessageDetails_RowDataBound"
                                RowStyle-Font-Size="10px" RowStyle-ForeColor="#404040" CssClass="grdMessageDetails"                                OnSelectedIndexChanged="grdMessageDetails_SelectedIndexChanged">
<SelectedRowStyle CssClass="sel-row" />                             
</asp:GridView>
4. JQuery to be called in Code Behind – Page_Load
 
string dragdrop = @"$(document).ready(function(){
                                                            setupDragDrop($('.grdMessageDetails tr'), $('.grdPatientDetails tr'), 'pat');
                                                            setupDragDrop($('.grdPatientDetails tr'), $('.grdMessageDetails tr'), 'msg');
                                                 }
                                              );

                function setupDragDrop(source, target, identity) 
                {
                    var droppable = 'false';
                    source.draggable(
                       {
                            helper: function(event) 
                            {
                                $('#" + hdnMsgValue.ClientID + @"').val(identity);                        
                                if($(this).hasClass('sel-row'))
                                {
                                    droppable = 'true';
                                    return $('<div class=""drag-row""><table class=""dragrow""></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
                                }
                                else
                                {
                                    droppable = 'false';
                                    return $('<div></div>');
                                }
                            },
                            appendTo: 'body'
                        });
                    target.droppable(
                        {
                            drop: function(event, ui) {
                            if(droppable == 'true')
                            {
                                var index = $(this)[0].rowIndex;
                                $('#" + hdnIndexValue.ClientID + @"').val(index);
                                 alert(‘dropped’ + hdnIndexValue.ClientID);
                            }
                        },
                        accept: source.selector
                        });
                }";

ScriptManager.RegisterStartupScript(this, GetType(), "DragDrop", dragdrop, true);

Note : accept: source.selector prevents grid(html table) from accepting its own rows.

And thats it now we can easily drag the grid records and place in another Grid and play with it

Tags: BRH, .NET, #DOTNET, ASP.NET4, #ASP.NET, jQuery, Drag and drop, drag and drop grids side by side,


Hima
31 · 6% · 1776
2
 
0
Lifesaver
 
0
Refreshed
 
0
Learned
 
0
Incorrect



Submit

1  Comments  

  • Can you please post the code for the entire solution?

    commented on Mar 11 2012 11:54PM
    napstar
    2380 · 0% · 5

Your Comment


Sign Up or Login to post a comment.

"Implementing Drag in ASP.NET Grid using JQuery" rated 5 out of 5 by 2 readers
Implementing Drag in ASP.NET Grid using JQuery , 5.0 out of 5 based on 2 ratings
    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]