Email: Password:       Forgot Password 
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.

Paging With AJAX Slider Extender in ASP.NET

Viewed:  3443 
Posted On:  26/02/2013 11:08:06 
In this article we will learn how we can achieve Grid View paging with the help of AJAX Slide Extender control. 

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-2525-5050-7575-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" "">
<html xmlns="">
<head id="Head1" runat="server">
    <title>Pagin Using Slider Extender</title>
    <form id="form1" runat="server">
    <div align="center">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <td align="center" style="color:Gray; font-family:Verdana;">
                    Paging in Grid View using Slide Extender
                <td align="center">
                    <asp:ScriptManager ID="ScriptManager1" runat="server">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <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">
                                    <asp:BoundField DataField="Name" HeaderText="Name">
                                        <ItemStyle Width="150px" />
                                    <asp:BoundField DataField="EmployeeCode" HeaderText="Employee Code">
                                        <ItemStyle Width="150px" />
                                    <asp:BoundField DataField="Keywords" HeaderText="Keywords">
                                        <ItemStyle Width="200px" />
                                    <asp:BoundField DataField="Mobile" HeaderText="Mobile">
                                        <ItemStyle Width="100px" />
                                    <asp:BoundField DataField="Address" HeaderText="Address">
                                        <ItemStyle Width="100px" />
                                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                <td align="left" style="width: 25px;">
                                                    &nbsp;                                                </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"
                                                <td align="right" style="padding-right: 25px" class="PageNumber">
                                                    <asp:Label ID="lblPaging" Text='<%# "Page " + (GridView1.PageIndex + 1) + " of " + GridView1.PageCount %>'
                                <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" />
Now ay aspx.cs code.

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)
    private void BindGrid()
        SqlCommand cmd = new SqlCommand("SELECT * FROM Employee", con);
        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        GridView1.DataSource = ds;
    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;

    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;

         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us