| |
| Download
the source code
Please change the extension of the file to .zip after downloading. |
| Introduction |
| |
| A most common question in
many of the newsgroups and User Groups is "how to customize
Paging item(Page Selection Section) of DataGrid" in a
web page. For example this is one of the question posted in
a User Group "In the DataGrid, when I allow pagination
and choose numbers, it displays numbers for each pages. Is
there any way that I can add the word "Page" in
front of these numbers". In this article we will see
how we can do this in DataGrid web server control. We will
also see how we can customize Page Selection of DataGrid using
existing properties itself. |
| |
| Customize using Properties |
| |
| The pager is an element on
the DataGrid control that allow you to link to other pages when
paging is enabled. The PagerStyle property of the DataGrid uses
an instance of this class to represent the style properties
for the pager. To know about pagination and how to do paging
in DataGrid, check out the following article, |
| |
| http://www.microsoft.com/india/msdn/articles/PaginginDataGridWebServerControl.aspx |
| |
| By default, DataGrid provides
PagerStyle property with which we can customize Paging item
in DataGrid. For example, following properties of DataGrid PagerStyle
can be used to customize Paging in DataGrid, |
| |
| 1. |
Position : This
property is used to get and set the position of pager
element in the DataGrid. This property accepts one of
the PagerPosition Values. PagerPosition Values are Bottom,
Top and TopAndBottom. Top and Bottom will place the Pager
Item in the corresponding places in DataGrid. If you to
have Page Selection Section in both top and bottom, then
give it values as TopandBottom |
| |
| 2. |
NextPageText and PrevPageText
: This property is used to get and set the text displayed
for next and Previous page button. |
| |
| 3. |
PageButtonCount :
This property is used to get and set the number of numeric
buttons to display concurrently in the pager element of
the datagrid. |
| |
| 4. |
HorizontalAlign :
This property is to set the horizontal alignment of the
contents in the Paging item. This property accepts one
of the Horizontal Align values. Horizontal Align values
are Center, Justify, Left, NotSet and Right. For example
if the horizontal align is set to center, then Page button
will come in the center of DataGrid. |
|
| |
| Code for setting this property
and fig for this is shown below, |
| |
<asp:datagrid
id="DataGrid1" runat="server" AllowCustomPaging="True"
AllowPaging="True"
PagerStyle-Mode="NextPrev" PagerStyle-HorizontalAlign="Center"
PageSize="10" PagerStyle-NextPageText="Next"
PagerStyle-PrevPageText="Prev" Width="100%"
> <Columns>
</Columns>
</asp:datagrid> |
| |
 |
| |
| Like this you have lots of other
properties of PagerStyle with which you can customize Paging
item, for more details about this properties refer this link |
| |
| http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfsystemwebuiwebcontrolsdatagridpagerstyleclasstopic.asp
|
| |
| Customize using other methods |
| |
| As we have seen we can customize
page selection section of DataGrid using properties provided
by DataGrid. But in some cases we want to customize page selection
in different manner, for example following are the two such
requirements. |
| |
- In the DataGrid, when I allow pagination
and choose numbers, it displays numbers for each pages.
Is there any way that I can add the word "Page"
in front of these numbers
- In the DataGrid, When I do pagination with NextPrev
PagerStyle mode, I want to have Prev page button in
left end and Next Button in right end.
|
|
| For both these requirements
we cant customize Paging item using properties provided by DataGrid.
For these type of requirements we need to customize in a different
way. Actually like this, we have lots of requirements for customizing
Paging items. But in this article we will see how to solve this
two problems. With this concept you can customize paging item
for any requirements. |
| |
| For first requirement, we have
either Custom Paging or default paging in DataGrid. PagerStyle
mode for this DataGrid is "NumericPages". Basically
for this type of requirements we need to write our customization
code in ItemCreated Event of DataGrid. In this eventhandler
we need to look for Pager DataGridItem and then we can do whatever
we want in that DataGridItem. For example all Pager DataGrid
item will contains one cell(column). In that cell we will have
controls for showing Page Button. Controls will be of type labels
and DataGridLinkButton. So if you want to add something to the
text of these controls we can do it here. For example in this
requirement we need to add "Page " text to all the
page button in that DataGridItem Code snippet for this is shown
below: |
| |
Private
Sub DataGrid1_ItemCreated(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemCreated
If
e.Item.ItemType = ListItemType.Pager Then
Dim oControl As Control
For
Each oControl In e.Item.Cells(0).Controls
If
oControl.GetType.ToString = "System.Web.UI.WebControls.DataGridLinkButton"
Then
CType(oControl,
LinkButton).Text = "Page " & CType(oControl,
LinkButton).Text
ElseIf
TypeOf oControl Is Label Then
CType(oControl,
Label).Text = "Page " & CType(oControl, Label).Text
End
If
Next
End
If
End Sub |
| |
| In this, first we are checking
whether that DataGridItem type is Pager. Then we will access
the first column in that item, so from that we can access all
the controls (Page Button) inside that cell. Then for all the
controls we will be adding the text "Page " which
we want to add. Now the Page Selection Section will look like
this. |
| |
 |
| |
| For Second requirement, we have
either Custom Paging or default paging in DataGrid. PagerStyle
mode for this DataGrid is "PrevNext". For this requirement
also we will be customizing in the similar manner as we seen
above but with slight changes. So in the ItemCreated Event Handler,
we will writing our customization code. Code snippet for this
requirement is |
| |
Private
Sub DataGrid1_ItemCreated(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs)
Handles DataGrid1.ItemCreated Dim
Width As Int16
If e.Item.ItemType = ListItemType.Pager
Then
Dim
oControl As Control
Dim
bWidthSet As Boolean = False
For
Each oControl In e.Item.Cells(0).Controls
If
TypeOf oControl Is Label And Not bWidthSet Then
CType(oControl,
Label).Width = New Unit(96, UnitType.Percentage)
bWidthSet
= True
ElseIf
oControl.GetType.ToString = "System.Web.UI.WebControls.DataGridLinkButton"
And
Not
bWidthSet Then
CType(oControl,
LinkButton).Width = New Unit(96, UnitType.Percentage)
bWidthSet
= True
End
If
Next
End
If
End Sub |
| |
| In this also, first we are checking
whether that DataGridItem type is Pager. Then we will access
the first column in that item, so from that we can access all
the controls (Page Button) inside that cell. Here we will have
two controls inside that cell, one is for Previous Page Button
and other is Next Page Button. Then what we are doing is, we
will access one of its control and set its width to 96%. So
that it will occupy 96% of DataGrid width, so Previous Button
will come in Left end and Next Button will come in right end. |
| |
 |
| |
| Conclusion |
| |
| In this article we have seen
how to customize Page selection section of DataGrid using existing
properties of DataGrid and by other methods. We have taken two
requirements and customized DataGrid for that requirements.
With the help of this concepts we can customize the DataGrid
for any such requirements. |
| |
| Download
the source code
Please change the extension of the file to .zip after downloading. |
| |
- Saravana
Kumar
Microsoft India Community Star |
| |
| |
