Implementing Drag in ASP.NET Grid using JQuery


Information
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
view sourceprint?
1.<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>
2.<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
3.<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
2.CSS Style Sheet
view sourceprint?
01.<style>
02.    div.drag-row
03.    {
04.        width: 350px;
05.        height: 45px;
06.        background:#ffefc4;
07.        color:Black;
08.    }
09.    .dragrow
10.    {
11.        width:100%;
12.        height:100%;
13.        background-color:#ffefc4;
14.    }
15..sel-row
16.{   background:#ffefc4;
17.    border: 3px solid #ffba00;
18.    color:Black;
19.    
20.}
21..sel-row td
22.{
23.    cursor:pointer;
24.     
25.    font-weight:bold;
26.     
27.}
28.</style>
3.Here are the Grids
view sourceprint?
01.<asp:GridView ID="grdPatientDetails" Width="99%" AutoGenerateColumns="false" GridLines="None"
02.                                runat="server" BorderColor="White"  OnRowDataBound="grdPatientDetails_RowDataBound" CssClass="grdPatientDetails"
03.                                OnSelectedIndexChanged="grdPatientDetails_SelectedIndexChanged" RowStyle-Font-Size="10px" RowStyle-ForeColor="#404040">
04.                                <SelectedRowStyle CssClass="sel-row" />
05.     </asp:GridView>
06. 
07.Remember that the CSS class for the Grid is very important as we identify this Grid in jQuery using CSS only.
08.<asp:GridView ID="grdMessageDetails" Width="100%" AutoGenerateColumns="false" GridLines="None"
09.                                runat="server" OnRowCommand="grdMessageDetails_RowCommand" OnRowDataBound="grdMessageDetails_RowDataBound"
10.                                RowStyle-Font-Size="10px" RowStyle-ForeColor="#404040" CssClass="grdMessageDetails"                                OnSelectedIndexChanged="grdMessageDetails_SelectedIndexChanged">
11.<SelectedRowStyle CssClass="sel-row" />                            
12.</asp:GridView>
4. JQuery to be called in Code Behind – Page_Load
view sourceprint?
01.string dragdrop = @"$(document).ready(function(){
02.                                                            setupDragDrop($('.grdMessageDetails tr'), $('.grdPatientDetails tr'), 'pat');
03.                                                            setupDragDrop($('.grdPatientDetails tr'), $('.grdMessageDetails tr'), 'msg');
04.                                                 }
05.                                              );
06. 
07.                function setupDragDrop(source, target, identity)
08.                {
09.                    var droppable = 'false';
10.                    source.draggable(
11.                       {
12.                            helper: function(event)
13.                            {
14.                                $('#" + hdnMsgValue.ClientID + @"').val(identity);                       
15.                                if($(this).hasClass('sel-row'))
16.                                {
17.                                    droppable = 'true';
18.                                    return $('<div class=""drag-row""><table class=""dragrow""></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
19.                                }
20.                                else
21.                                {
22.                                    droppable = 'false';
23.                                    return $('<div></div>');
24.                                }
25.                            },
26.                            appendTo: 'body'
27.                        });
28.                    target.droppable(
29.                        {
30.                            drop: function(event, ui) {
31.                            if(droppable == 'true')
32.                            {
33.                                var index = $(this)[0].rowIndex;
34.                                $('#" + hdnIndexValue.ClientID + @"').val(index);
35.                                 alert(‘dropped’ + hdnIndexValue.ClientID);
36.                            }
37.                        },
38.                        accept: source.selector
39.                        });
40.                }";
41. 
42.ScriptManager.RegisterStartupScript(this, GetType(), "DragDrop", dragdrop, true);
Note : accept: source.selector prevents grid(html table) from accepting its own rows.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)