Click here to Skip to main content
11,481,404 members (60,975 online)
Click here to Skip to main content

Paging in Grid View using Slider Extender

, 15 Jan 2009 CPOL 58.1K 2.8K 80
Rate this:
Please Sign up or sign in to vote.
This article demonstrates how to implement paging in GridView using Ajax Slider Extender.

Introduction

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 asp:Label.

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 TextBox or Label that dynamically displays the slider's value.

Slider.gif

Using the Code

To make the slider extender work as a paging control, I have used an <asp:TextBox> and a SliderExtender.

<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" Minimum="1" Steps='<%# 
    GridView1.PageCount %>' 
    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 TargetControlId of SliderExtender so that it will persist the value of the SliderExtender. I have set the AutoPostBack property of the txtSlider to 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[0].FindControl("txtSlider");
        GridView1.PageIndex = Int32.Parse(txtSliderExt.Text) - 1;

        BindGrid();
    }  
private void BindGrid()
    {
        string Path = HttpContext.Current.ApplicationInstance.Server.MapPath(
            "~/App_Data/Product.xml");
        DataSet ds = new DataSet();
        ds.ReadXml(Path);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }

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;
        }
        BindGrid();
    }

Here you will see by clicking on these buttons the slider automatically moves right and left according to the PageIndex of the GridView.

A label lblPaging is used to show the current and total page in the GridView.

<asp:Label ID="lblPaging" Text='<%# "Page " + (GridView1.PageIndex + 1) +
    " of " + GridView1.PageCount %>' runat="server"></asp:Label>

History

  • 15th January, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Najmul Hoda
Software Developer (Senior) Birla Soft
India India
Najmul Hoda is a Master of Computer Application.
He has worked with .Net technologies in web development and has been programming since 2007.
He is very comfortable in various languages,RDBMS & platforms from C# to VB.NET with Access & MS SQLServer
from Javascript,AJAX to ASP.NET.

Besides programming he loves playing mouth organ, guitar, listening to music,singing, bike riding & cricket.


Najmul's Articles

You can get my all article at
www.dotnetlogix.com


Comments and Discussions

 
QuestionI am getting this kind of error Pin
Member 798528521-Aug-13 22:02
memberMember 798528521-Aug-13 22:02 
QuestionSlider is not displaying Pin
Ganapathy A20-Jun-13 1:51
memberGanapathy A20-Jun-13 1:51 
QuestionChrome Problem [modified] Pin
rbala0061-Feb-12 21:26
memberrbala0061-Feb-12 21:26 
GeneralMy vote of 5 Pin
Robby Tendean27-Dec-11 15:52
memberRobby Tendean27-Dec-11 15:52 
QuestionExcellent Pin
Sunasara Imdadhusen21-Aug-11 22:51
memberSunasara Imdadhusen21-Aug-11 22:51 
Generalplaying videos Pin
manesh1116-Mar-10 10:37
membermanesh1116-Mar-10 10:37 
GeneralThat's really great article Pin
sameer_s10-Feb-10 23:50
membersameer_s10-Feb-10 23:50 
GeneralVry nice article Pin
amansaroya13-Apr-09 2:08
memberamansaroya13-Apr-09 2:08 
GeneralRe: Vry nice article Pin
Najmul Hoda3-Apr-09 3:11
memberNajmul Hoda3-Apr-09 3:11 
GeneralNice Pin
Vuyiswa Maseko13-Feb-09 3:29
memberVuyiswa Maseko13-Feb-09 3:29 
Generalnice Article Pin
Vuyiswa Maseko12-Feb-09 21:43
memberVuyiswa Maseko12-Feb-09 21:43 
GeneralWonderful Idea Pin
Venkat Eswaran11-Feb-09 19:21
memberVenkat Eswaran11-Feb-09 19:21 
GeneralMy vote of 1 Pin
codeguruj22-Jan-09 9:16
membercodeguruj22-Jan-09 9:16 
GeneralRe: My vote of 1 Pin
Ajit Shekhawat29-Jan-09 4:15
memberAjit Shekhawat29-Jan-09 4:15 
GeneralRe: My vote of 1 Pin
nirman b doshi10-Feb-09 23:52
membernirman b doshi10-Feb-09 23:52 
GeneralRe: My vote of 1 Pin
Vuyiswa Maseko12-Feb-09 20:54
memberVuyiswa Maseko12-Feb-09 20:54 
GeneralRe: My vote of 1 Pin
Najmul Hoda13-Feb-09 2:06
memberNajmul Hoda13-Feb-09 2:06 
GeneralRe: My vote of 1 Pin
Vuyiswa Maseko13-Feb-09 3:25
memberVuyiswa Maseko13-Feb-09 3:25 
GeneralGood article.......I will be using it in my project [modified] Pin
shahid@braintechnosys.com16-Jan-09 8:15
membershahid@braintechnosys.com16-Jan-09 8:15 
GeneralIdeea Pin
tamash_ionut16-Jan-09 5:19
membertamash_ionut16-Jan-09 5:19 
GeneralRe: Ideea Pin
Nazmul Hoda16-Jan-09 8:09
memberNazmul Hoda16-Jan-09 8:09 
GeneralLooks exactly like this control from Matt Berseth Pin
binarycheese16-Jan-09 1:57
memberbinarycheese16-Jan-09 1:57 
GeneralRe: Looks exactly like this control from Matt Berseth Pin
Nazmul Hoda16-Jan-09 7:58
memberNazmul Hoda16-Jan-09 7:58 
GeneralExcellent Pin
Farrru15-Jan-09 20:42
memberFarrru15-Jan-09 20:42 
GeneralRe: Excellent Pin
Nazmul Hoda15-Jan-09 23:14
memberNazmul Hoda15-Jan-09 23:14 
GeneralDamn that looks nice. And is a creative outside-the-square idea. I predict a big future for you in Software Development Pin
OberGruppenFuhrer15-Jan-09 15:05
memberOberGruppenFuhrer15-Jan-09 15:05 
GeneralRe: Damn that looks nice. And is a creative outside-the-square idea. I predict a big future for you in Software Development Pin
Nazmul Hoda15-Jan-09 20:39
memberNazmul Hoda15-Jan-09 20:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 15 Jan 2009
Article Copyright 2009 by Najmul Hoda
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid