Browse DevX
Sign up for e-mail newsletters from DevX


Add Search-Engine-Style Paging To Your DataGrids : Page 2

You don't have to just accept the default Microsoft DataGrid paging scheme. Find out how to create a server control that attaches to your existing DataGrids and provides paging like that found on search-engine results pages.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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:

<x:DataGridPager RunAt="server" Id="dgp" DataGridToAttachTo="dgDemo" FirstPageLinkText="First" LastPageLinkText="Last" PreviousPageLinkText="Previous" NextPageLinkText="Next" MaxNumPageForwardLinks="5" MaxNumPageBackLinks="5" PageLinkSeparator="&nbsp;-&nbsp;" />

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date