Introduction:
This article shows how to move rows up and down in a GridView. Example in this uses a gridview with test records and two buttons in each row to move rows up and down.
Markup:
<html>
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" Font-Names="Verdana" Font-Size="9pt" runat="server"
AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None"
BorderColor="#507CD1" BorderStyle="Solid">
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:TextBox ID="txtFirstName" runat="server" Text='<%# Eval("FirstName") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox ID="txtLastName" runat="server" Text='<%# Eval("LastName") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnUp" Width="24px" ForeColor="White" Height="20px" Font-Bold="true"
OnClick="MoveGridViewRows" ToolTip="Move Up" Font-Size="Medium" BorderStyle="None"
BackColor="#507CD1" CommandName="Up" runat="server" Text="⇑" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnDown" Width="24px" ForeColor="White" Height="20px" Font-Bold="true"
OnClick="MoveGridViewRows" ToolTip="Move Down" Font-Size="Medium" BorderStyle="None"
BackColor="#507CD1" CommandName="Down" runat="server" Text="⇓" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</form>
</body>
</html>
CodeBehind:
using System;
using System.Linq;
using System.Web.UI.WebControls;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Test Records
GridView1.DataSource = Enumerable.Range(1, 5).Select(a => new
{
FirstName = String.Format("First Name {0}", a),
LastName = String.Format("Last Name {0}", a),
});
GridView1.DataBind();
}
}
protected void MoveGridViewRows(object sender, EventArgs e)
{
Button btnUp = (Button)sender;
GridViewRow row = (GridViewRow)btnUp.NamingContainer;
// Get all items except the one selected
var rows = GridView1.Rows.Cast<GridViewRow>().Where(a => a != row).ToList();
switch (btnUp.CommandName)
{
case "Up":
//If First Item, insert at end (rotating positions)
if (row.RowIndex.Equals(0))
rows.Add(row);
else
rows.Insert(row.RowIndex - 1, row);
break;
case "Down":
//If Last Item, insert at beginning (rotating positions)
if (row.RowIndex.Equals(GridView1.Rows.Count - 1))
rows.Insert(0, row);
else
rows.Insert(row.RowIndex + 1, row);
break;
}
GridView1.DataSource = rows.Select(a => new
{
FirstName = ((TextBox)a.FindControl("txtFirstName")).Text,
LastName = ((TextBox)a.FindControl("txtLastName")).Text,
}).ToList();
GridView1.DataBind();
}
Description:
Idea is retrieving existing rows into a temp collection except the one that's clicked. When Button Up is clicked, row clicked should be inserted into temp collection at position(index - 1) one up. When Button Down is clicked, row clicked should be inserted into temp collection at position(index + 1) one below.