This article demonstrates how to implement paging in
GridView using Ajax Slider Extender. The Slider Extender has wide range of use. It allows users to choose a finite range of values by upgrading an
asp:TextBox to a graphical slider. In this article, I will show how Slider Extender helps the
GridView to show its data page wise by passing input to Pager Template. I will explain to you how the slider extender works.
When a value is chosen using the Slider by sliding the sliding bar, it is automatically persisted during full or partial postbacks. We can use an
asp:TextBox to get and set the Slider's value.
The Slider's value can be dynamically displayed in another
asp:TextBox or an
Now here the question is how the slider extender can help Grid View to display its data, page wise. The answer is.... when we slide the slider extender, a value is obtained from the slider that we can set as new page index of the
GridView and then bind the
GridView with the data source that will show the data of that particular page.
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
Label that dynamically displays the slider's value.
Using the Code
To make the slider extender work as a paging control, I have used an
<asp:TextBox> and a
<asp:TextBox ID="txtSlider" runat="server" AutoPostBack="True"
Text='<%# GridView1.PageIndex + 1 %>' OnTextChanged="txtSlider_TextChanged"
<cc1:SliderExtender ID="SliderExtender1" runat="server" Orientation="Horizontal"
TargetControlID="txtSlider" Minimum="1" Steps='<%#
Maximum='<%# GridView1.PageCount %>'> </cc1:SliderExtender>
See above that I have taken a
textbox txtSlider and a Ajax
SliderExtender SliderExtender1. I have associated the
txtSlider to the
SliderExtender so that it will persist the value of the
SliderExtender. I have set the
AutoPostBack property of the
true because when a value is chosen from the slider, the Page of the
GridView must be changed. So when a value is chosen from slider, an event
OnTextChanged is fired and in that event, we handle the paging of the grid view.
protected void txtSlider_TextChanged(object sender, EventArgs e)
GridViewRow rowPager = GridView1.BottomPagerRow;
TextBox txtSliderExt = (TextBox)rowPager.Cells.FindControl("txtSlider");
GridView1.PageIndex = Int32.Parse(txtSliderExt.Text) - 1;
private void BindGrid()
string Path = HttpContext.Current.ApplicationInstance.Server.MapPath(
DataSet ds = new DataSet();
GridView1.DataSource = ds;
In the above function
txtSlider_TextChanged you will see, I have tried to find the
txtSlider from the
GridView PagerRow and assigned it to
txtSliderExt. Now since the
txtSliderExt has the value from the
SliderExtender, it is then assigned to
GridView.PageIndex to show new page data. After setting the
PageIndex of the
GridView, I bind the
Grid with datasource. Here I have used
DataSet as a datasource. The data into the
DataSet comes from XML file Product.xml which is stored in the App_Data folder.
At the pager section, you will find four images showing First, Prev, Next and Last. On clicking these images, an
ItemCommand is fired and relevant code is executed. The code is given below:
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;
Here you will see by clicking on these buttons the slider automatically moves right and left according to the
PageIndex of the
label lblPaging is used to show the current and total page in the
<asp:Label ID="lblPaging" Text='<%# "Page " + (GridView1.PageIndex + 1) +
" of " + GridView1.PageCount %>' runat="server"></asp:Label>
- 15th January, 2009: Initial post