DotNetOcean: Move rows Up and Down in gridview using JQuery

Tuesday, December 13

Move rows Up and Down in gridview using JQuery

Hi,
First of all, any client side manipulations like this will not b visible directly at the server side. You need to do some kind of ajax call to do so. Check one sample below-

<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 allIDs = $.map($(table).find("input[type=hidden][id*=hiddenID]"), function(item, index) {
                        return $(item).val();
                    });
                    PageMethods.Reorder(allIDs, onSucceeded, onFailed);
                },
                onDragStart: function(table, row) {
                    $("#debugArea").html("Started dragging row " + row.id);
                }

            });
        }
        function onSucceeded(result) {
            $("#debugArea").html("Reorder was a success!");
        }

        function onFailed(result) {
            $("#debugArea").html("Reorder failed!");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
    </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:HiddenField ID="hiddenID" runat="server" Value='<%# Eval("ID") %>' />
                                <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>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
    {
        var ShibashishObj = new {ID=0, A = "A 0", B = "B 0", C = "B 0" };
        var objList = (new[] { ShibashishObj }).ToList();
        objList.Add(new { ID = 1, A = "A 1", B = "B 1", C = "B 1" });
        objList.Add(new { ID = 2, A = "A 2", B = "B 2", C = "B 2" });
        objList.Add(new { ID = 3, A = "A 3", B = "B 3", C = "B 3" });
        objList.Add(new { ID = 4, A = "A 4", B = "B 4", C = "B 4" });
        objList.Add(new { ID = 5, A = "A 5", B = "B 5", C = "B 5" });
        objList.Add(new { ID = 6, A = "A 6", B = "B 6", C = "B 6" });
        objList.Add(new { ID = 7, A = "A 7", B = "B 7", C = "B 7" });
        GridViewSample.DataSource = objList;
        GridViewSample.DataBind();
    }
   
    protected void Button1_Click(object sender, EventArgs e)
    {

    }
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod()]
    public static void Reorder(string[] sortedIDs)
    {
        //sortedIDs contains all the hidden ids in new order
    }