tableDnD onDragClass not working on asp.net GRIDVIEW : The Official Microsoft ASP.NET Forums

Reply

skynyrd

Participant

926 Points

428 Posts

tableDnD onDragClass not working on asp.net GRIDVIEW

May 26, 2011 01:23 PM|LINK

Hi there

I got an amazing plug in from here:

http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

and I got it working with a grid view, instead of an HTML table like this:

<script src="_script/jquery-1.4.2.js" type="text/javascript"></script>
<script src="_script/jquery.tablednd_0_5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

var tablename1 = "#<%= GridViewSample.ClientID %>";

	$(tablename1).tableDnD({
	    onDragClass: "GbiHighlight",
	    onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was "+row.id+". New order: ";
            for (var i=0; i<rows.length; i++) {
                debugStr += rows[i].id+" ";
            }
	        $("#debugArea").html(debugStr);
	    },
		onDragStart: function(table, row) {
			$("#debugArea").html("Started dragging row "+row.id);
		}
	});
});
</script>

Here is the GRID VIEW code:

<asp:UpdatePanel ID="UpdatePanelSample" runat="server">
<ContentTemplate>

<div class="tableDemo">

<asp:GridView
ID="GridViewSample" 
runat="server"      
SkinID="GridViewNoPaging"                      
AllowSorting="true"
AutoGenerateSelectButton="false"
AutoGenerateColumns="false"
OnRowDataBound="GridViewSample_RowDataBound"   
OnSorting="GridViewSample_Sorting" 
OnRowCommand="GridViewSample_RowCommand"                 
Width="800px"    
>                        
<Columns>

<asp:TemplateField HeaderText="Action" SortExpression="A">
<ItemTemplate>
<asp:ImageButton runat="server" ID="ImageButtonDeleteA" commandname="DeleteSelected" ImageUrl="App_Themes/StandardTheme/Images/Toolbar/delete2.gif" commandArgument='<%# Eval("A")+ "|"+Eval("B") %>' />
&nbsp;&nbsp;&nbsp;&nbsp;
<asp:ImageButton runat="server" ID="ImageButtonUpdateA" commandname="UpdateSelected" ImageUrl="App_Themes/StandardTheme/Images/Img/ico-edit-blue.gif" commandArgument='<%# Eval("A")+ "|"+Eval("B") %>' />
</ItemTemplate>

<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Left" Width="10em" />
</asp:TemplateField>

<asp:TemplateField HeaderText="C" SortExpression="C">
<ItemTemplate>
<asp:TextBox ID="TextBoxC" runat="server" Text='<%# Eval("C") %>' Width="50px" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" Width="10em" />
</asp:TemplateField>

<asp:TemplateField HeaderText="A" SortExpression="A">
<ItemTemplate>
<asp:Label ID="LabelA" runat="server" Text='<%# Eval("A") %>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Left" Width="30em" />
</asp:TemplateField>

<asp:TemplateField HeaderText="B" SortExpression="B">                                
<ItemTemplate>
<asp:Label ID="LabelB" runat="server" Text='<%# Eval("B") %>'/>
<asp:Label ID="Label1" runat="server" Text="&nbsp;"/>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Left" Width="50em" />
</asp:TemplateField>

</Columns>     
</asp:GridView>
</div>

</ContentTemplate>

</asp:UpdatePanel>

The dragging works fine! Unfortunatelly the onDragClass is making no effect.

Note:

If I use a plain HTML table the onDragClass: "GbiHighlight", WORKS fine.

Thanks

José Luis Gonzalez Clua

Please, mark as answer when appropriate

Edited by skynyrd on May 26, 2011 06:18 PM
Edited by skynyrd on May 26, 2011 06:19 PM
Edited by skynyrd on May 26, 2011 06:20 PM
Edited by skynyrd on May 26, 2011 06:20 PM
Edited by skynyrd on May 26, 2011 06:22 PM

Reply

skynyrd

Participant

926 Points

428 Posts

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

May 26, 2011 06:22 PM|LINK

Another issue is that when a POSTBACK happens the dragging stops working.

Thanks,

José Luis Gonzalez Clua

Please, mark as answer when appropriate

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

May 27, 2011 07:38 AM|LINK

Hi,

Following is working for both of your issue-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>

    <script src="http://www.isocra.com/articles/jquery.tablednd.js" type="text/javascript"></script>

    <style>
        .GbiHighlight
        {
            background-color: Gray;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
            load_lazyload();
        });
        function load_lazyload() {
            var tablename1 = "#<%= GridViewSample.ClientID %>";
            $(tablename1).tableDnD({
                onDragClass: "GbiHighlight",
                onDrop: function(table, row) {
                    var rows = table.tBodies[0].rows;
                    var debugStr = "Row dropped was " + row.id + ". New order: ";
                    for (var i = 0; i < rows.length; i++) {
                        debugStr += rows[i].id + " ";
                    }
                    $("#debugArea").html(debugStr);
                },
                onDragStart: function(table, row) {
                    $("#debugArea").html("Started dragging row " + row.id);
                }
            });
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="debugArea">
    </div>
    <asp:UpdatePanel ID="UpdatePanelSample" runat="server">
        <ContentTemplate>
            <div class="tableDemo">
                <asp:GridView ID="GridViewSample" runat="server" AutoGenerateSelectButton="false"
                    AutoGenerateColumns="false" Width="800px"
                    >
                    <Columns>
                        <asp:TemplateField HeaderText="Action" SortExpression="A">
                            <ItemTemplate>
                                <asp:ImageButton runat="server" ID="ImageButtonDeleteA" CommandName="DeleteSelected"
                                    ImageUrl="App_Themes/StandardTheme/Images/Toolbar/delete2.gif" CommandArgument='<%# Eval("A")+ "|"+Eval("B") %>' />
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <asp:ImageButton runat="server" ID="ImageButtonUpdateA" CommandName="UpdateSelected"
                                    ImageUrl="App_Themes/StandardTheme/Images/Img/ico-edit-blue.gif" CommandArgument='<%# Eval("A")+ "|"+Eval("B") %>' />
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Left" Width="10em" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="C" SortExpression="C">
                            <ItemTemplate>
                                <asp:TextBox ID="TextBoxC" runat="server" Text='<%# Eval("C") %>' Width="50px" />
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" Width="10em" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="A" SortExpression="A">
                            <ItemTemplate>
                                <asp:Label ID="LabelA" runat="server" Text='<%# Eval("A") %>' />
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Left" Width="30em" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="B" SortExpression="B">
                            <ItemTemplate>
                                <asp:Label ID="LabelB" runat="server" Text='<%# Eval("B") %>' />
                                <asp:Label ID="Label1" runat="server" Text="&nbsp;" />
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Left" Width="50em" />
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Marked as answer by skynyrd on May 31, 2011 12:07 PM

Reply

skynyrd

Participant

926 Points

428 Posts

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

May 27, 2011 01:18 PM|LINK

Anup,

Thanks very much for your answer.

I tried but I STILL GET NO CSS class applied.

I tried these fixes:

- placing the CSS class GBIHIGHLIGHT in the same file instead of getting from .CSS

- I am using a MASTER PAGE so I created the page without it. (I had a lot of problems because the page is too binded to the master page and a base class... So I had to comment a lot of code.)

- putting the script manager in the content page.

- removing the UPDATE PANEL

but I am still getting nothing.

Something that I find strange is that the debug area is always empty:

Row dropped was . New order:

If I use the plain HTML version I see something like this:

<div id="debugArea">Row dropped was 2.3. New order: 2.1 2.2 2.4 2.5 2.6 2.7 2.8 2.3 2.9 2.10 2.11 2.12 2.13 2.14</div> <div> </div> <div>Thanks,</div> <div>

</div>

José Luis Gonzalez Clua

Please, mark as answer when appropriate

Edited by skynyrd on May 27, 2011 01:18 PM
Edited by skynyrd on May 27, 2011 01:20 PM
Edited by skynyrd on May 27, 2011 01:20 PM
Edited by skynyrd on May 27, 2011 01:20 PM
Edited by skynyrd on May 27, 2011 01:21 PM
Edited by skynyrd on May 27, 2011 01:21 PM
Edited by skynyrd on May 27, 2011 01:21 PM
Edited by skynyrd on May 27, 2011 04:13 PM
Edited by skynyrd on May 27, 2011 04:13 PM

Reply

skynyrd

Participant

926 Points

428 Posts

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

May 27, 2011 04:12 PM|LINK

Anup,

Here is the latest status:

I changed a little bit and now it is working, WITHOUT the CSS class but, at least the POSTBACK problem is gone:

<style>
        .GbiHighlight
        {
            background-color: Gray;
        }
    </style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
 
    <script src="http://www.isocra.com/articles/jquery.tablednd.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
        load_lazyload();
    });
    function load_lazyload() {
        $("#<%= GridViewSample.ClientID %>").tableDnD({
	    onDragClass: "GbiHighlight",
	    onDrop: function(table, row) {
                var rows = table.tBodies[0].rows;
                var debugStr = "Row dropped was "+row.id+". New order: ";
                for (var i=0; i<rows.length; i++) {
                    debugStr += rows[i].id+" ";
                }
	            $("#debugArea").html(debugStr);
	        },
		    onDragStart: function(table, row) {
			    $("#debugArea").html("Started dragging row "+row.id);
		    }
	    });
	}

</script>

The debug area is still blank:

Row dropped was . New order

Thanks!

José Luis Gonzalez Clua

Please, mark as answer when appropriate

Edited by skynyrd on May 27, 2011 04:15 PM
Edited by skynyrd on May 27, 2011 04:16 PM

Reply

Bannurusamiu...

Member

20 Points

11 Posts

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

May 31, 2011 09:19 AM|LINK

Hi,

i am trying to drag and drop gridview items using jquery , but it still shows errors.Plz send me the code for reorder() page methods...

Thanks

Reply

skynyrd

Participant

926 Points

428 Posts

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

May 31, 2011 12:18 PM|LINK

Anup,

It is working perfectly now, including the CSS.

I realized the problem was not the Theme or the Skin thirselves.

The problem was the BackColor being applied to the rows.

If you add this code to the Grid View, the CSS stops working:

<RowStyle BackColor="#FFFFFF" ForeColor="#000000" />
<AlternatingRowStyle BackColor="#F3F3F3" />

I wanted to keep the stripes effect in the grid, but I guess it has to be done differently. I've tried this code:

// Make a nice striped effect on the table
$(tablename1 + " tr:even').addClass('alt')");

It didn't work But nevermind that is just a very small detail. I am keeping my DND grids without stripes for now.

Thanks I own you one!

José Luis Gonzalez Clua

Please, mark as answer when appropriate

Edited by skynyrd on May 31, 2011 12:19 PM

tableDnD onDragClass not working on asp.net GRIDVIEW RSS

6 replies

skynyrd

tableDnD onDragClass not working on asp.net GRIDVIEW

skynyrd

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

asteranup

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

skynyrd

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

skynyrd

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

Bannurusamiu...

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

skynyrd

Re: tableDnD onDragClass not working on asp.net GRIDVIEW

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft