Creating a Pageable Gridview with Customized Pager Buttons

Matt Berseth put together a great post on creating a pageable GridView. It is basically a custom control that inherits from GridView and implements the DataPageable interface. The coolest part is how the GridView CSS is tailored to a specific looking type of Gridview.

I think it is worth going one step further and tailoring the DataPager with custom images to indicate both enabled and disabled. You will notice that there is a FirstPageImageUrl in the NextPreviousPagerField but no available FirstPage_DisabledImageUrl. To overcome this, we need to examine the DataPager controls dynamically and switch the images according to whether we are already at the start index or last index. This code is placed in the GridView's DataBound event:

        protected void gvProducts_DataBound(object sender, EventArgs e)
        {
            ImageButton ibtn;
            int pgEnd = gvProducts.PageCount;
            int curPg = gvProducts.PageIndex;
            foreach (Control ct in pager.Controls[0].Controls)
            {
                if(ct.GetType().Equals(typeof(ImageButton)))
                {
                    ibtn = ct as ImageButton;
                    if (0 == curPg)
                    {
                        ibtn.ImageUrl = "~/images/PageFirst_Disabled.jpg";
                    }
                    else { ibtn.ImageUrl = "~/images/PageFirst.jpg"; }
                }
            }
            foreach (Control ct in pager.Controls[2].Controls)
            {
                if (ct.GetType().Equals(typeof(ImageButton)))
                {
                    ibtn = ct as ImageButton;
                    if ((pgEnd-1) == curPg)
                    {
                        ibtn.ImageUrl = "~/images/PageLast_Disabled.jpg";
                    }
                    else { ibtn.ImageUrl = "~/images/PageLast.jpg"; }
                }
            }
        }

I also changed the section in Matt's Default.aspx to:

                            <!-- Notice this is outside the GridView -->
                            <div class="pager">
                                <asp:DataPager ID="pager" runat="server" PageSize="8" PagedControlID="gvProducts">
                                    <Fields>
                                        <asp:NextPreviousPagerField
                                            ButtonType="Image"
                                            FirstPageImageUrl="~/images/PageFirst.jpg"                                            
                                            RenderDisabledButtonsAsLabels="false" 
                                            ShowFirstPageButton="true" ShowPreviousPageButton="false" 
                                            ShowLastPageButton="false" ShowNextPageButton="false"
                                        /> 
                                        <asp:NumericPagerField
                                            ButtonCount="7" NumericButtonCssClass="command" 
                                            CurrentPageLabelCssClass="current" NextPreviousButtonCssClass="command"
                                        />
                                        <asp:NextPreviousPagerField 
                                        
                                            ButtonType="Image"
                                            LastPageImageUrl="~/images/PageLast.jpg"
                                            RenderDisabledButtonsAsLabels="false" 
                                            ShowFirstPageButton="false" ShowPreviousPageButton="false" 
                                            ShowLastPageButton="true" ShowNextPageButton="false"
                                        />                                            
                                    </Fields>                            
                                </asp:DataPager>
                            </div> 

The crude Microsoft Paint images are located here: http://techron.scottrichmond.com/downloads/2210036646138181629images.zip

Now you know a technique to customize the DataPager. I further customized the buttons to display custom buttons (print, search, etc.) in the center and pager buttons on the right using JavaScript. That involves a lot of screen calculation details and JavaScript that is another topic. Note, the customization comes at a performance cost. This can be improved with direct reference to the control[x].FindControl("myImgControl"), but that requires inspecting how .NET names the ImageButton in the Debugger.

The result is customized ImageButtons for enabled and disabled buttons.

Download/view Matt's code to add in the customization I've written about.

References:

• http://mattberseth.com/blog/2008/04/using_a_datapager_with_the_gri.html


• http://www.c-sharpcorner.com/UploadFile/nipuntomar/DataPagerGridView08012008123240PM/DataPagerGridView.aspx