<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="⇑"
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="⇓"
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>
|
No comments:
Post a Comment