Saturday 29 December 2012

Move Gridview Rows Up and Down by using JQuery in ASP.NET using C#.NET/VB.NET

Move Gridview Rows Up and Down by using JQuery in ASP.NET
ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Move Gridview Rows Up and Down by using JQuery in ASP.NET</title>
    <style type="text/css">

        .up
        {
            color: Red;
        }
        .down
        {
            color: Blue;
        }
        .tableHeading
        {
            background-color:#999994;
            font-weight: bold;
            font-size: 12pt;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(".up, .down").click(function () {
                var count = $('table tr').length;    // count gridview rows length  
                var $row = $(this).parents('tr:first');
                var $link = $(this);
                if ($row.index() !== 0) { //Check gridview first row or not
                    if ($link.hasClass('up') && $row.index() > 1) { // check for class 'up' and not the first row
                        $row.insertBefore($row.prev());
                    }
                    else if ($link.hasClass('down') && $row.index() < count - 1) { // check for class 'down' and not the last row
                        $row.insertAfter($row.next());
                    }
                    var inputs = $("#Grd_MoveRow").find("tr").find("input"); 
                    var ids = [];
                    inputs.each(function () {
                        ids.push($(this).val()); //push ids
                    });
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="Grd_MoveRow" runat="server" AllowPaging="true" AllowSorting="true"
            DataKeyNames="StudentID" AutoGenerateColumns="False" BorderColor="Black" BorderStyle="Solid">
            <HeaderStyle CssClass="tableHeading" />
            <Columns>
                <asp:TemplateField HeaderText="Student ID">
                    <HeaderStyle CssClass="tableHeading" ForeColor="Black"></HeaderStyle>
                    <ItemTemplate>
                        <asp:Label ID="lblStudentID" Text='<%#Eval("StudentID") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student Name">
                    <HeaderStyle CssClass="tableHeading" ForeColor="Black"></HeaderStyle>
                    <ItemTemplate>
                        <asp:Label ID="lblStudentName" Text='<%#Eval("StudentName") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField Visible="true" HeaderText="Move Up">
                    <HeaderStyle CssClass="tableHeading" ForeColor="Black"></HeaderStyle>
                    <ItemTemplate>
                        <input id="btnUp" type="button" value="&uArr;" class="up" />
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="center" />
                </asp:TemplateField>
                <asp:TemplateField Visible="true" HeaderText="Move Down">
                    <HeaderStyle CssClass="tableHeading" ForeColor="Black"></HeaderStyle>
                    <ItemTemplate>
                        <input id="btnDown" type="button" value="&dArr;" class="down" />
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="center" />
                </asp:TemplateField>
            </Columns>
            <PagerStyle Font-Bold="True" CssClass="tableHeading"></PagerStyle>
            <PagerSettings Mode="Numeric" Position="bottom" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>
Output


No comments:

Post a Comment

© 2012-2018 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.