Add Search-Engine-Style Paging To Your DataGrids

Add Search-Engine-Style Paging To Your DataGrids

isplaying two-dimensional table data in a grid is one of the most common programming tasks. When the number of rows is small, a single page with a scrollbar is sufficient, but when the data has many rows, it’s usually better to display a few rows at a time, adding controls that give the user a way to navigate from one screenful or “page” of the records to another, a process called “paging.” Having written paging functionality from scratch before the days of .NET, I was excited when Microsoft released ASP.NET and the DataGrid control. Using the ASP.NET DataGrid a programmer can easily display a grid complete with interface controls that provide paging capability using only a few lines of code. Yet as simple as that process is, I wanted a way to improve upon it

Specifically, I wanted a way to add paging to my DataGrids so that the paging mechanism worked similarly to most Web search engines. For example, if you search Google for a common word, you’ll get a page with a list of matches, and at the bottom of the page you’ll see a line containing paging links that let you jump to the next page or skip ahead to any of the next ten pages. Clicking your way through to, for example, the 20th page, changes the paging link scheme slightly; you’ll see that the paging links now include page-numbered links for the previous 10 pages and the next 10 pages, as well as next and previous links. In this article, I’ll show you how to create a simple server control so you can add this style of paging to your DataGrids.

Setting Up a DataGridPager Example
Start with a basic DataGrid on an aspx page as follows:

   

The preceding code sets the AllowPaging attribute to True to allow the control to page this DataGrid, and sets the PagerStyle-Visible attribute value to False to hide the DataGrid’s built-in DataGrid paging links.

Next, add code to the code-behind file to generate a dataset of random data and bind it to the DataGrid when the page loads. Here’s the code:

   Protected WithEvents dgTest As DataGrid      Private Sub Page_Load(ByVal sender As System.Object, _      ByVal e As System.EventArgs) Handles MyBase.Load         If Not IsPostBack Then         Session("MyDataSet") = BuildDataSet(1000)         dgTest.DataSource = Session("MyDataSet")         dgTest.DataBind()      End If   End Sub      Private Function BuildDataSet(ByVal NumberOfRecords _      As Integer) As DataSet      Randomize()         Dim ds As New DataSet      ds.Tables.Add()      With ds.Tables(0).Columns         .Add("RecordNumber", _            System.Type.GetType("System.Int32"))         .Add("RandomNumber", _            System.Type.GetType("System.Int64"))         .Add("RandomName", _            System.Type.GetType("System.String"))         .Add("RandomDateTime", _            System.Type.GetType("System.DateTime"))      End With      For Counter As Integer = 1 To NumberOfRecords         Dim dr As DataRow = ds.Tables(0).NewRow()         dr("RecordNumber") = Counter         dr("RandomNumber") = Rnd() * 1000         dr("RandomName") = GetRandomName()         dr("RandomDateTime") = Date.Now.AddDays(Rnd() * -365)         ds.Tables(0).Rows.Add(dr)      Next         Return ds   End Function      Private Function GetRandomName() As String      Select Case CType(Rnd() * 20, Integer)         Case 0 : Return "Abraham Bennet"         Case 1 : Return "Reginald Blotchet-Halls"         Case 2 : Return "Cheryl Carson"         Case 3 : Return "Michel DeFrance"         Case 4 : Return "Innes del Castillo"         Case 5 : Return "Ann Dull"         Case 6 : Return "Marjorie Green"         Case 7 : Return "Morningstar Greene"         Case 8 : Return "Burt Gringlesby"         Case 9 : Return "Sheryl Hunter"         Case 10 : Return "Livia Karsen"         Case 11 : Return "Charlene Locksley"         Case 12 : Return "Stearns MacFeather"         Case 13 : Return "Heather McBadden"         Case 14 : Return "Michael O'Leary"         Case 15 : Return "Sylvia Panteley"         Case 16 : Return "Albert Ringer"         Case 17 : Return "Anne Ringer"         Case 18 : Return "Meander Smith"         Case 19 : Return "Dean Straight"         Case 20 : Return "Dirk Stringer"      End Select   End Function

Don’t dwell on the preceding code too much. It simply builds a DataSet full of data on the fly. Just note that after building the dataset, the Page_Load method stores it in the user’s session so you can access it later as the user pages through the results.

When the page loads, it should look something like Figure 1.

?
Figure 1. DataGrid with Auto Generated Data. The figure shows the first page of the data from the random dataset displayed in a DataGrid.

Next, download the source code for this article and copy the code from the DataGridPager.vb file (see Listing 1) into your Web project. Add the following to the top of the aspx page to assign the “x” prefix to controls within your project:

   <%@ Register TagPrefix="x" Namespace="MyProjectName"          Assembly="MyProjectName" %>

Note that you should replace the MyProjectName values above with the name of the project you are working with. Also, “x” is just the prefix I choose, you can set this to whatever prefix you like. Just make sure that when you add the paging control that you use the prefix you assign here.

Now to add the paging control, add the following tag wherever you would like the paging links to appear:

   

Note the DatagGridToAttachTo attribute. This attribute is required and tells the control which DataGrid it should attach to and provide paging for. I’ll cover some of this control’s other attributes later and also get into the source code for the control. For now, it’s more important to get the example working.

Viewing the Page
With the DataGridPager control in place, run the page and click the paging links. Notice that the paging now emulates the functionality described earlier. Figure 2 and Figure 3 show how the paging feature looks by default on the initial page and after the user pages into the data.

?
Figure 2. Data Grid Pager on Page 1. Note that the paging links for the first and previous pages are grayed out when the DataGrid is on its first page. Also, the current page link appears in bold text. The control provides numbered page links for the next 10 pages.
?
Figure 3. Data Grid Pager on Page 12. With the DataGrid now on page 12, the DataGridPager control has automatically created numbered links for both the previous ten and the next ten pages. The control uses ten links by default, but you can control this by setting the MaxNumPageForwardLinks and MaxNumPageBackLinks properties.

The DataGridPager Control’s Properties
Now that you’ve seen the control in action, here are some of its other properties. You can view the control’s properties easily by switching your page to Design view, selecting the DataGridPager control, and then looking at the Properties pane. Figure 4 shows these properties with their default values. Table 1 lists the properties and a description of each.

?
Figure 4. DataGridPager’s Properties: The default DataGridPager control properties.
Property Name Property Description
DataGridToAttachTo The ID of the DataGrid to attach to.
FirstPageLinkText The text of the first page link. This property defaults to <<.
LastPageLinkText The text of the last page link. This property defaults to >>.
PreviousPageLinkText The text of the previous page link. This property defaults to < Previous.
NextPageLinkText The text of the next page link. This property defaults to Next >.
MaxNumPageForwardLinks The maximum number of numbered page links to show after the current page indicator. This property defaults to 10.
MaxNumPageBackLinks The maximum number of numbered page links to show before the current page indicator. This property defaults to 10.
PageLinkSeparator This property specifies the text used to separate the paging links. This property defaults to a space character.

You can set these properties in the properties pane, at run-time, or using attributes in the HTML for the page, for example:

   

How the DataGridPager Control Works
Starting at the top of the DataGridPager.vb class file in Listing 1, notice that the DataGridPager control is derived from the System.Web.UI.Control object. This object contains all the functionality the DataGridPager control needs.

The DataGridPager works by dynamically creating LinkButton controls and adding them to its child Controls collection. This means the DataGridPager is a composite control because it contains child controls. Microsoft specifies that composite controls must implement the INamingContainer interface and override the CreateChildControls() method. This is necessary so that when the control’s containing page runs, it will call the control’s CreateChildControls() method to allow the control to recreate its child controls. It’s vital because the page must recreate the child controls during postbacks so their Click() events can be handled properly. Look at the following code from the “Overrides” region:

   Protected Overrides Sub CreateChildControls()      ' Builds child pager buttons so their click events can       ' be handled      If TypeOf _dg Is DataGrid Then BuildPagerButtons()   End Sub

The preceding code simply recreates the paging buttons exactly as they were when last sent to the browser whenever the DataGridPager control is attached to a DataGrid.

Continuing through the code for Listing 1, you’ll notice that this control also overrides the OnInit() and Render() methods. OnInit() initializes the _dg member variable to point to the DataGrid object. The overridden Render() method allows the control to write out an error message to the page if the control is unable to find the DataGrid specified in its DataGridToAttachTo property.

The next two regions, “Member Variables” and “Properties” implement the control’s properties. These properties set or return the values from private variables within the class.

The final region, “Private Routines”, contains the BuildPagerButtons() and PagerLinkButtonClick() methods.

The BuildPagerButtons() method is the backbone of this control. This method creates and configures the paging link buttons and adds them to the control. Note that the control exposes properties (NextPageLinkText and PreviousPageLinkText) that you can use to specify the text for these controls. Also note that the code sets each LinkButton’s CommandName and CommandArgument properties, which the application needs when a user clicks one of the links.

Clicking one of the pager LinkButtons calls the PagerLinkButtonClick() method, which uses the clicked LinkButton’s CommandName and CommandArgument to determine which paging action to take. After the DataGrid has been moved to its new page, the control rebinds the DataGrid and calls the BuildPagerButtons() method, which rebuilds the paging links to match the grid’s updated page position.

As you’ve seen in this article, you can use a simple server control to add search-engine-style paging to a DataGrid. I’ve purposely kept the example control as simple as possible to make it easy to understand. You may choose to extend the control by adding additional properties, functionality, designer support, or other items. I hope you found this control handy and that it (or some variation of it) works its way into your development efforts. I know I’ll be carrying it in my bag of tricks for some time to come.

devx-admin

devx-admin

Share the Post:
Poland Energy Future

Westinghouse Builds Polish Power Plant

Westinghouse Electric Company and Bechtel have come together to establish a formal partnership in order to design and construct Poland’s inaugural nuclear power plant at

EV Labor Market

EV Industry Hurting For Skilled Labor

The United Auto Workers strike has highlighted the anticipated change towards a future dominated by electric vehicles (EVs), a shift which numerous people think will

Soaring EV Quotas

Soaring EV Quotas Spark Battle Against Time

Automakers are still expected to meet stringent electric vehicle (EV) sales quotas, despite the delayed ban on new petrol and diesel cars. Starting January 2023,

Affordable Electric Revolution

Tesla Rivals Make Bold Moves

Tesla, a name synonymous with EVs, has consistently been at the forefront of the automotive industry’s electric revolution. The products that Elon Musk has developed

Poland Energy Future

Westinghouse Builds Polish Power Plant

Westinghouse Electric Company and Bechtel have come together to establish a formal partnership in order to design and construct Poland’s inaugural nuclear power plant at the Lubiatowo-Kopalino site in Pomerania.

EV Labor Market

EV Industry Hurting For Skilled Labor

The United Auto Workers strike has highlighted the anticipated change towards a future dominated by electric vehicles (EVs), a shift which numerous people think will result in job losses. However,

Soaring EV Quotas

Soaring EV Quotas Spark Battle Against Time

Automakers are still expected to meet stringent electric vehicle (EV) sales quotas, despite the delayed ban on new petrol and diesel cars. Starting January 2023, more than one-fifth of automobiles

Affordable Electric Revolution

Tesla Rivals Make Bold Moves

Tesla, a name synonymous with EVs, has consistently been at the forefront of the automotive industry’s electric revolution. The products that Elon Musk has developed are at the forefront because

Sunsets' Technique

Inside the Climate Battle: Make Sunsets’ Technique

On February 12, 2023, Luke Iseman and Andrew Song from the solar geoengineering firm Make Sunsets showcased their technique for injecting sulfur dioxide (SO₂) into the stratosphere as a means

AI Adherence Prediction

AI Algorithm Predicts Treatment Adherence

Swoop, a prominent consumer health data company, has unveiled a cutting-edge algorithm capable of predicting adherence to treatment in people with Multiple Sclerosis (MS) and other health conditions. Utilizing artificial

Personalized UX

Here’s Why You Need to Use JavaScript and Cookies

In today’s increasingly digital world, websites often rely on JavaScript and cookies to provide users with a more seamless and personalized browsing experience. These key components allow websites to display

Geoengineering Methods

Scientists Dimming the Sun: It’s a Good Thing

Scientists at the University of Bern have been exploring geoengineering methods that could potentially slow down the melting of the West Antarctic ice sheet by reducing sunlight exposure. Among these

why startups succeed

The Top Reasons Why Startups Succeed

Everyone hears the stories. Apple was started in a garage. Musk slept in a rented office space while he was creating PayPal with his brother. Facebook was coded by a

Bold Evolution

Intel’s Bold Comeback

Intel, a leading figure in the semiconductor industry, has underperformed in the stock market over the past five years, with shares dropping by 4% as opposed to the 176% return

Semiconductor market

Semiconductor Slump: Rebound on the Horizon

In recent years, the semiconductor sector has faced a slump due to decreasing PC and smartphone sales, especially in 2022 and 2023. Nonetheless, as 2024 approaches, the industry seems to

Elevated Content Deals

Elevate Your Content Creation with Amazing Deals

The latest Tech Deals cater to creators of different levels and budgets, featuring a variety of computer accessories and tools designed specifically for content creation. Enhance your technological setup with

Learn Web Security

An Easy Way to Learn Web Security

The Web Security Academy has recently introduced new educational courses designed to offer a comprehensible and straightforward journey through the intricate realm of web security. These carefully designed learning courses

Military Drones Revolution

Military Drones: New Mobile Command Centers

The Air Force Special Operations Command (AFSOC) is currently working on a pioneering project that aims to transform MQ-9 Reaper drones into mobile command centers to better manage smaller unmanned

Tech Partnership

US and Vietnam: The Next Tech Leaders?

The US and Vietnam have entered into a series of multi-billion-dollar business deals, marking a significant leap forward in their cooperation in vital sectors like artificial intelligence (AI), semiconductors, and

Huge Savings

Score Massive Savings on Portable Gaming

This week in tech bargains, a well-known firm has considerably reduced the price of its portable gaming device, cutting costs by as much as 20 percent, which matches the lowest

Cloudfare Protection

Unbreakable: Cloudflare One Data Protection Suite

Recently, Cloudflare introduced its One Data Protection Suite, an extensive collection of sophisticated security tools designed to protect data in various environments, including web, private, and SaaS applications. The suite

Drone Revolution

Cool Drone Tech Unveiled at London Event

At the DSEI defense event in London, Israeli defense firms exhibited cutting-edge drone technology featuring vertical-takeoff-and-landing (VTOL) abilities while launching two innovative systems that have already been acquired by clients.

2D Semiconductor Revolution

Disrupting Electronics with 2D Semiconductors

The rapid development in electronic devices has created an increasing demand for advanced semiconductors. While silicon has traditionally been the go-to material for such applications, it suffers from certain limitations.

Cisco Growth

Cisco Cuts Jobs To Optimize Growth

Tech giant Cisco Systems Inc. recently unveiled plans to reduce its workforce in two Californian cities, with the goal of optimizing the company’s cost structure. The company has decided to

FAA Authorization

FAA Approves Drone Deliveries

In a significant development for the US drone industry, drone delivery company Zipline has gained Federal Aviation Administration (FAA) authorization, permitting them to operate drones beyond the visual line of

Mortgage Rate Challenges

Prop-Tech Firms Face Mortgage Rate Challenges

The surge in mortgage rates and a subsequent decrease in home buying have presented challenges for prop-tech firms like Divvy Homes, a rent-to-own start-up company. With a previous valuation of

Lighthouse Updates

Microsoft 365 Lighthouse: Powerful Updates

Microsoft has introduced a new update to Microsoft 365 Lighthouse, which includes support for alerts and notifications. This update is designed to give Managed Service Providers (MSPs) increased control and

Website Lock

Mysterious Website Blockage Sparks Concern

Recently, visitors of a well-known resource website encountered a message blocking their access, resulting in disappointment and frustration among its users. While the reason for this limitation remains uncertain, specialists