Click here to Skip to main content
Click here to Skip to main content

Tagged as

Move Up or Move Down GridView Rows using jQuery & ASP.NET, C#

, 19 Feb 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Move up or Move down GridView rows using jQuery & ASP.NET, C#

Introduction

Today, I am going to discuss how to move up or move down GridView row using jQUERY in ASP.NET.

Background

The GridView is populated from code behind in Page_Load event and using jQuery we can re-order jQuery row. In every row of GridView, there will be UpArrow button and DownArrow button. Clicking UpArrow button, the associated row will be moved up and clicking DownArrow button, the associated row will be moved down.

Using the Code

Now, I am going to share step by step:

  1. Open Visual Studio. 
  2. Create one new Empty Web Project.
  3. Add a new file to your solution. Name it "Default.aspx".
  4. Add the following code in your "Default.aspx" (I have added necessary comments for understanding.)
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"  %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
       <script type ="text/javascript" 
       src ="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      
        <script type="text/javascript">
            var MoveRowUp = "table[id*=gvStudent] input[id*='btnUp']"; //Instance of MoveUp btn
            var MoveRowDown = "table[id*=gvStudent] input[id*='btnDown']";//Instance of MoveDown btn
    
            $(document).ready(function () {
                DisableRow(); //This function disables first and last row
                //This function Moves up the GridView row
                $(MoveRowUp).click(function () {               
                    $(this).parents("tr").insertBefore($(this).parents("tr").prev())            
                    DisableRow();
                });
    
                //This function Moves down the Gridview row
                $(MoveRowDown).click(function () {
                    $(this).parents("tr").insertAfter($(this).parents("tr").next());               
                    DisableRow();
                });
                //This function disables first and last row
                function DisableRow() {
                    $("#<%=gvStudent.ClientID%> 
                    tr:has(td) input[id*='btnUp']").attr("disabled", false);
                    $("#<%=gvStudent.ClientID%> 
                    tr:has(td):first input[id*='btnUp']").attr("disabled", true);
                    $("#<%=gvStudent.ClientID%> 
                    tr:has(td) input[id*='btnDown']").attr("disabled", false);
                    $("#<%=gvStudent.ClientID%> 
                    tr:last input[id*='btnDown']").attr("disabled", true);
                }
            });       
                     
        </script>    
    </head>
    <body>
    <form id="form1" runat="server">
         <asp:GridView ID="gvStudent" runat="server" 
         AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="SNAME" 
                HeaderText="Student Name" SortExpression="SNAME" />
                <asp:BoundField DataField="Class" 
                HeaderText="Student Class" SortExpression="Class" />
                <asp:TemplateField HeaderText="Move Row">
                    <ItemTemplate>
                       <input id="btnUp"  
                       type="button" value="&uArr;" 
                       style="color: Red;"/> &nbsp;
                        <input id="btnDown" 
                        type="button" value="&dArr;" 
                        style="color: Red;" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>        
    </form>
    </body></html>
  5. Add the following code in your code behind file - Default.aspx.cs (I have added necessary comments for understanding.)
    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data.SqlClient;
    using System.Data;
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {              
            if (!this.IsPostBack)
            {
                 LoadStudent(); //Populates GridView from Students table
            }
        }
        protected void LoadStudent()
        {
            SqlConnection conn = new SqlConnection("YOUR CONNECTION STRING");
            SqlCommand cmd = new SqlCommand
            ("Select * from Students", conn); //Use your DB table name instead of Students
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet(); da.Fill
            (ds,"Students"); 
            gvStudent.DataSource = ds;
            gvStudent.DataBind();       
        }
    }  
  6. Now your code is ready. Press F5 to run. Happy coding!!!

Points of Interest

For more information on jQuery, you can find online help at www.jquery.com.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Partha_sarathi_ghosh

Asia/Pacific Region Asia/Pacific Region
No Biography provided

Comments and Discussions

 
QuestionThis code is not working PinmemberAsutosha20-Feb-14 9:29 
AnswerRe: This code is not working PinmemberPartha_sarathi_ghosh20-Feb-14 22:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 20 Feb 2014
Article Copyright 2014 by Partha_sarathi_ghosh
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid