In this article, we will explore how to
implement paging in an ASP.NET GridView using an ASP.NET AJAX Slider Extender.
The Slider extender allows to upgrade an asp:TextBox to a
graphical slider that allows the user to choose a numeric value from a finite
range.
Below are some important
properties of the slider extender:
·
Minimum - Minimum value allowed, i.e. if range is from 0 to 100 then starting
value/minimum value is 0.
·
Maximum - Maximum value allowed, i.e. if range is from 0 to 100 then end
value/maximum value is 100.
·
Decimals - Number of decimal digits for the value.
·
Steps - Number of discrete values inside the slider's range, i.e. if minimum
value is 0 and maximum value is 100 and we want to show 0,25,50,75,100, then
steps will be 4. (0-25, 25-50, 50-75, 75-100)
·
Value - Current value of the slider.
·
Length - Width/height of a horizontal/vertical slider when the default layout
is used.
·
BoundControlID - ID of the TextBox or Label that dynamically displays the slider's value.
Now I am explaining it with the help of
an example.
This is my data table structure..
Image 1.
Image 2.
Image 3.
Below is my aspx code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
EnableEventValidation="false" Inherits="_Default"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Pagin Using Slider Extender</title>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<table border="0" cellpadding="0"
cellspacing="0"
width="100%">
<tr>
<td align="center"
style="color:Gray; font-family:Verdana;">
Paging in Grid View using Slide Extender
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center">
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1"
PageSize="2"
runat="server"
AllowPaging="True"
DataKeyNames="EmployeeNo"
BorderColor="Green"
BorderWidth="2px"
HeaderStyle-HorizontalAlign="Left" AutoGenerateColumns="False"
OnDataBound="GridView1_DataBound"
GridLines="None"
HeaderStyle-CssClass="GVHeader"
OnRowCommand="GridView1_RowCommand"
CellPadding="4"
ForeColor="#333333">
<Columns>
<asp:BoundField DataField="Name"
HeaderText="Name">
<ItemStyle Width="150px"
/>
</asp:BoundField>
<asp:BoundField DataField="EmployeeCode"
HeaderText="Employee
Code">
<ItemStyle Width="150px"
/>
</asp:BoundField>
<asp:BoundField DataField="Keywords"
HeaderText="Keywords">
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Mobile"
HeaderText="Mobile">
<ItemStyle Width="100px"
/>
</asp:BoundField>
<asp:BoundField DataField="Address"
HeaderText="Address">
<ItemStyle Width="100px"
/>
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<PagerTemplate>
<div>
<table border="0" cellpadding="0"
cellspacing="0"
width="100%">
<tr>
<td
align="left"
style="width: 25px;">
</td>
<td
align="center"
style="width: 200px;">
<asp:TextBox ID="txtSlider"
runat="server"
AutoPostBack="True"
Text='<%#
GridView1.PageIndex + 1 %>'
OnTextChanged="txtSlider_TextChanged"
Width="200px"></asp:TextBox>
<cc1:SliderExtender ID="SliderExtender1" runat="server" Orientation="Horizontal"
TargetControlID="txtSlider">
</cc1:SliderExtender>
</td>
<td
align="right"
style="padding-right: 25px"
class="PageNumber">
<asp:Label ID="lblPaging"
Text='<%# "Page "
+ (GridView1.PageIndex + 1) + " of " + GridView1.PageCount %>'
runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</PagerTemplate>
<PagerStyle BackColor="#284775"
ForeColor="White"
HorizontalAlign="Center"
/>
<SelectedRowStyle
BackColor="#E2DED6"
Font-Bold="True"
ForeColor="#333333"
/>
<HeaderStyle BackColor="#5D7B9D"
CssClass="GVHeader"
Font-Bold="True"
ForeColor="White"
HorizontalAlign="Left"
/>
<EditRowStyle BackColor="#999999"
/>
<AlternatingRowStyle
CssClass="GVItemStyle"
/>
<RowStyle CssClass="GVAltItemStyle" BackColor="#F7F6F3" ForeColor="#333333" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Now ay aspx.cs code.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
using System.Data.SqlClient;
using AjaxControlToolkit;
public partial class _Default :
System.Web.UI.Page
{
private SqlConnection
con = new SqlConnection(@"Data Source=.;Initial Catalog=Test;Integrated
Security=true");
protected void
Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false)
{
BindGrid();
}
}
private void
BindGrid()
{
con.Open();
SqlCommand cmd = new
SqlCommand("SELECT
* FROM Employee", con);
DataSet ds = new DataSet();
SqlDataAdapter da = new
SqlDataAdapter(cmd);
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
con.Close();
}
protected void
txtSlider_TextChanged(object sender, EventArgs e)
{
GridViewRow rowPager = GridView1.BottomPagerRow;
TextBox txtSliderExt = (TextBox)rowPager.Cells[0].FindControl("txtSlider");
GridView1.PageIndex = Int32.Parse(txtSliderExt.Text)
- 1;
BindGrid();
}
protected void
GridView1_DataBound(object sender, EventArgs e)
{
GridViewRow rowPager = GridView1.BottomPagerRow;
SliderExtender slide = (SliderExtender)rowPager.Cells[0].FindControl("SliderExtender1");
slide.Minimum =
1;
slide.Maximum =
GridView1.PageCount;
slide.Steps =
GridView1.PageCount;
}
protected void
GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "First")
{
GridView1.PageIndex = 0;
}
else if
(e.CommandName == "Prev")
{
if (GridView1.PageIndex > 0)
GridView1.PageIndex = GridView1.PageIndex - 1;
}
else if
(e.CommandName == "Next")
{
if (GridView1.PageIndex < GridView1.PageCount - 1)
GridView1.PageIndex = GridView1.PageIndex + 1;
}
else if
(e.CommandName == "Last")
{
GridView1.PageIndex = GridView1.PageCount - 1;
}
BindGrid();
}
}