GridView DropDownList Pager

This post shows you how to add a custom DropDownlist pager and pager buttons to the GridView as shown below:

gridview_dropdown_pager

Unlike the behavior of the default pager buttons,  these buttons get disabled instead of being hidden (depending on the state of the GridView).

IMHO, buttons that remain at the same position while paging through a resultset makes a better UI (spatial memory).

The code is pretty straightforward.

Add the following pager template to your GridView.

<PagerTemplate>Goto Page

    <asp:DropDownList ID="ddlPageSelector" runat="server" AutoPostBack="true">

    </asp:DropDownList>

    <asp:Button Text="First" CommandName="Page" CommandArgument="First" runat="server"

        ID="btnFirst" />

    <asp:Button Text="Previous" CommandName="Page" CommandArgument="Prev" runat="server"

        ID="btnPrevious" />

    <asp:Button Text="Next" CommandName="Page" CommandArgument="Next" runat="server"

        ID="btnNext" />

    <asp:Button Text="Last" CommandName="Page" CommandArgument="Last" runat="server"

        ID="btnLast" />

</PagerTemplate>


Add a RowCreated event handler to your GridView and add the following code:
 

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {

    if (e.Row.RowType == DataControlRowType.Pager) {

        PresentationUtils.SetPagerButtonStates(GridView1, e.Row, this);

    }

}

 

Finally, add the following code to your common class (PresentationUtils in my case)

 

public static void SetPagerButtonStates(GridView gridView, GridViewRow gvPagerRow, Page page) {

 

    int pageIndex = gridView.PageIndex;

    int pageCount = gridView.PageCount;

 

    Button btnFirst = (Button)gvPagerRow.FindControl("btnFirst");

    Button btnPrevious = (Button)gvPagerRow.FindControl("btnPrevious");

    Button btnNext = (Button)gvPagerRow.FindControl("btnNext");

    Button btnLast = (Button)gvPagerRow.FindControl("btnLast");

 

    btnFirst.Enabled = btnPrevious.Enabled = (pageIndex != 0);

    btnNext.Enabled = btnLast.Enabled = (pageIndex < (pageCount - 1));

 

    DropDownList ddlPageSelector = (DropDownList)gvPagerRow.FindControl("ddlPageSelector");

    ddlPageSelector.Items.Clear();

    for (int i = 1; i <= gridView.PageCount; i++) {

        ddlPageSelector.Items.Add(i.ToString());

    }

 

    ddlPageSelector.SelectedIndex = pageIndex;

 

    //Anonymous method (see another way to do this at the bottom)

    ddlPageSelector.SelectedIndexChanged += delegate {

        gridView.PageIndex = ddlPageSelector.SelectedIndex;

        gridView.DataBind();

    };

 

}


AFAIK, VB.net 2.0 does not support anonymous methods. Therefore, for those of you converting this code to VB.net, you will need to add the handler manually. Go to the GridView Tasks and select "Edit templates", select the PagerTemplate and double click on the DropDownList to add a index changed event handler. In the event handler, write the VB.net equivalent of this:

protected void ddlPageSelector_SelectedIndexChanged(object sender, EventArgs e) {

    GridView1.PageIndex = ((DropDownList)sender).SelectedIndex;

    GridView1.DataBind();

}

Related : Clickable GridView Headers .

48 Comments

  • Raj,

    Real good solution, i dont know how this simple skipped my View ! Thx pointing..
    Also, do u have any pointers for implementing
    static headers in gridview ! As soon as we put the gridview under div panel, [we have 20+ columns] any static header solutions screws up.
    Also the same case for Atlas update panel ?

    Thx,

    Gopi

  • This is the best solution anyone can think of. Great work. Thanks a lot

  • i got an error 'PresentationUtils doesn't exist in context'. Any idea? Thanks a lot.

  • What is the PresentationUtils class? I cannot get my project to build with that in there. I love the concept though!

  • PresentationUtils is a class you create which contains the method SetPagerStates.

  • hello
    it's nice and useful code.
    but as i'm not very good in delegates and events right now i have a problem and i need to solve it quickly.
    that's it :
    what if i need to handle for example the sorting of a gridview in a separate class like u did
    i can't put += delegate{...} because i need the information provided by the "GridViewSortEventArgs" so my question is how to pass this information because until i tried lots of things and the sorting is not handled until i use the delegate{....} to simplify the thing what would you do if for your dropdownlist u need to use the args of its eventhandler ?
    it's very urgent i will be grateful for an answer
    sorry for my english
    thx in advance

  • unbelivably easy - thanks :o)

  • Great bit of code, cheers for sharing.

  • Any solution for no postbacks and use ajax callbacks with PagerTemplate?

  • thanks for your code. it help me complete my homework. I hope i can give you another codes

  • Awesome and yet simple code! it really helped me out with my YourCollegePapers.com site! &nbsp;Thanks a million!
    Dave

  • useful, simple code
    cheers!

  • Pls send this code in C#. PageIndex always gives 0.
    Thanks in advance

  • Ashish,
    The code *is* in C#.

  • tnx for this code!!

    exist a method to render pagertemplate if page number is 1??

  • Thought people would enjoy seeing the .net vbscript version of this.

    Row Created Event Handler:

    &nbsp; &nbsp;Protected Sub SearchResultsGrid_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)

    &nbsp; &nbsp; &nbsp; &nbsp;If e.Row.RowType = DataControlRowType.Pager Then

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;utils.SetPagerButtonStates(SearchResultsGrid, e.Row)

    &nbsp; &nbsp; &nbsp; &nbsp;End If

    &nbsp; &nbsp;End Sub

    Reset the Index of your grid if the user uses the Drop-down (set to the OnSelectedIndexChange property of the dropdown):

    &nbsp; &nbsp;Protected Sub setIndex(ByVal sender As Object, ByVal e As EventArgs)

    &nbsp; &nbsp; &nbsp; &nbsp;SearchResultsGrid.PageIndex = sender.SelectedIndex

    &nbsp; &nbsp;End Sub

    And finally I tweaked the code a bit for SetPagerButtonStates. &nbsp;I prefer to use Link buttons for style reasons, so I've changed all the dim statements to LinkButton rather than Button.

    Public Shared Sub SetPagerButtonStates(ByVal gridView As GridView, ByVal gvPagerRow As GridViewRow)

    &nbsp; &nbsp; &nbsp; &nbsp;Dim pageIndex As Integer = gridView.PageIndex

    &nbsp; &nbsp; &nbsp; &nbsp;Dim pageCount As Integer = gridView.PageCount

    &nbsp; &nbsp; &nbsp; &nbsp;Dim i As Integer

    &nbsp; &nbsp; &nbsp; &nbsp;Dim btnFirst As LinkButton = gvPagerRow.FindControl("btnFirst")

    &nbsp; &nbsp; &nbsp; &nbsp;Dim btnPrevious As LinkButton = gvPagerRow.FindControl("btnPrev")

    &nbsp; &nbsp; &nbsp; &nbsp;Dim btnNext As LinkButton = gvPagerRow.FindControl("btnNext")

    &nbsp; &nbsp; &nbsp; &nbsp;Dim btnLast As LinkButton = gvPagerRow.FindControl("btnLast")

    &nbsp; &nbsp; &nbsp; &nbsp;Dim lbltotal As Label = gvPagerRow.FindControl("pagetotal")

    &nbsp; &nbsp; &nbsp; &nbsp;If gridView.PageIndex &lt;&gt; 0 Then

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btnFirst.Enabled = True

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btnPrevious.Enabled = True

    &nbsp; &nbsp; &nbsp; &nbsp;Else

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btnFirst.Enabled = False

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btnPrevious.Enabled = False

    &nbsp; &nbsp; &nbsp; &nbsp;End If

    &nbsp; &nbsp; &nbsp; &nbsp;If gridView.PageIndex &lt; (gridView.PageCount) - 1 Then

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btnLast.Enabled = True

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btnNext.Enabled = True

    &nbsp; &nbsp; &nbsp; &nbsp;Else

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btnLast.Enabled = False

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btnNext.Enabled = False

    &nbsp; &nbsp; &nbsp; &nbsp;End If

    &nbsp; &nbsp; &nbsp; &nbsp;lbltotal.Text = gridView.PageCount

    &nbsp; &nbsp; &nbsp; &nbsp;Dim ddlPageSelector As DropDownList = gvPagerRow.FindControl("ddlPageSelector")

    &nbsp; &nbsp; &nbsp; &nbsp;ddlPageSelector.Items.Clear()

    &nbsp; &nbsp; &nbsp; &nbsp;For i = 1 To gridView.PageCount

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ddlPageSelector.Items.Add(i.ToString())

    &nbsp; &nbsp; &nbsp; &nbsp;Next

    &nbsp; &nbsp; &nbsp; &nbsp;ddlPageSelector.SelectedIndex = pageIndex

    &nbsp; &nbsp; &nbsp; &nbsp;gridView.SelectedIndex = pageIndex

    &nbsp; &nbsp;End Sub

  • Thanks. &nbsp;A great solution.

  • Excellent and a very simplistic and to the point. Wish I had developers like you around. Not only the drop down list but touching upon the delegate stuff was excellent.

  • hi there...
    how would i do if i want to have paging something like this:
    1 2 3 4 5 6 7 .. instead of dropdownlist?
    thanks

  • Excellent &nbsp;and Thanks for give us this kind of code .
    could &nbsp;you give me file scrabing code .

  • excellent job...anyways thanx for a such nice help...

  • Steve,

    Thanks for your help.

    where do you add placeholderPageSelector?

  • does not work as expected

    if i have a 5 rows its displaying me
    11111

    if i have 385 rows its displaying something like this:

    111, 2, 3, 4, 5, 6, 7, 8, 9, 10 ...1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ...1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ...1, 2, 3, 4, 5, 6, 7, 8, 9, 10

    i have added

  • Hi,
    This was a very helpful article for me.
    And it helped me a lot in my function.

  • Hi
    I need to find out the current row of gridview while the items in the dropdownlist in that row get changed.Now work fine until if the above row's dropdown empty.If already above row DDL have value and I try to select the below row DDL the row values which is above selected

    I used ASP.Net2.0 I include everthying,but if user came back aggain the back button problem happened

  • Instead of raising an event on every row, you can just add an event OnPreRender. This way you only catch the event once rather than once per row. The only change you need to make is in finding the controls just reference:
    GridView1.TopPagerRow.FindControl()

  • Great code.

    Small problem. I turns out that with large number of pages ( I have 1300) the sequence below introduces a huge delay while navigating through pages. Apparently it takes more time to fill the combo than it takes to get the data from the DB. (I suppose the rendering takes very long)

    for (int i = 1; i <= gridView.PageCount; i++)
    {
    ddlPageSelector.Items.Add(i);
    }

    Regards

  • when i use the vb code i got a syntax error saying that Name 'Utils' not decalred eventhough i hv imports system.web.utils...
    can guide me

  • How would you add a total recrods count to this? My ulitimate goal is to display something like this:

    Displaying records X of Y of Z total records.

    I've been able to get the X and Y, but can't get the Z.. the total records in the GridView.

    Tried GridView.Rows.Count, but it doesn't work.

  • hi
    Can i know how to declare utils for the following code:
    Protected Sub SearchResultsGrid_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.Pager Then
    utils.SetPagerButtonStates(SearchResultsGrid, e.Row)
    End If
    &nbsp; End Sub
    Thanx

  • Works great and very simple to add in. Thanks!

  • many thansk it was so helpfull for me

  • Very Useful code thanks very much

  • hi ..nice code am getting your code wen am using the same one if i change that as of my requirement then wen am attempting to select a value from drop down list then the gridview1.pagecount becoming zero ..am trying a lot but am not getting plz help me...

    dharma

  • excellent done good work

  • please eplain in brief where pagertemplate should be placed .it taken a lot of time to found .by in total ur program was very good;

  • super its working fine

  • Thanks also for the vb.net code it really helped me a lot

  • Hi, i use this gridview dropdownlist pager in gridview1. then i use again in gridview2 in same page. after i click next button in gridview2, it will not show gridview2 d. gridview2 disappear? how to solve?

  • thanks for code ;-)

  • I must be stupid because I cant get the buttons to work in VB.net. The dropdown works like a charm though.

  • I couldn't get my Next, Previous buttons to work.
    Later found out that I had:
    EnableViewState="false" defined. Take this away and they now work...



  • hi guys ,i have to implement pre/next with numeric mode

    like 1 2 3 4 5 next
    pre 6 7 8 9 10 next

    please tel me how to implemt this with complete discriptin ,as i am very new to custom paging

  • hey!!!
    can someone tell me how to use numeric and next/prev mode together

  • arg, I can't get the dropdownlist to populate with the page numbers.

  • I utilized your code but I'm having problems with postback. My datasource is a datatable in session. I insert a value and when I go to page 2 the value inserted from the textbox on page 1 is lost. kindly assist. Thanks.

  • after postback dropdownlist reset!! any solution for it?? thankss

  • after postback dropdownlist reset!! any solution for it ? tkhankss

  • @asmcad your dropdown list contains duplicate values..this error occures when ddl contains dulplicate item values..please see it..

Comments have been disabled for this content.