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
    } 
 try this your own .you have to change only the image url. Thank you very much for visiting my blog
Shibashish mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

.

ShibashishMnty
shibashish mohanty