Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
Resources » Articles » ASP.NET/Web Applications »
Paging in ASP.NET Part I
|
DataGrid contains a property to enable paging: AllowPaging. This property needs to be set to True to enable the DataGrid's paging features.
Along with the AllowPaging property, there is a PageSize property that specifies how many records to display per page. This property has a default value of 10.
Note: DataReader object cann’t be used in paging instead Dataset should be used. The reason for using a DataSet is because when using the default paging, the DataSource must be set to an object that implements the ICollection interface.
Why datagrid uses ICollection interface? Datagrid uses ICollection interface because DataGrid needs to be able to calculate the total number of records to determine how many total pages there are for the given DataSource.
DataGrid also offers custom paging. When using custom paging, the DataSource need not implement ICollection.
The DataGrid has two properties for paing:
CurrentPageIndex : The property determines what page is currently being displayed.
PageCount : Total No. of pages to be displayed.
PageCount can be calculated as:
PageCount=Total No of records/PageSize.
When we click over hyperlink on the grid, the page get posted and the DataGrid's PageIndexChanged event is raised.
We need to implement PageIndexChanged event handler and in eventhandler, update the DataGrid's CurrentPageIndex property and rebind the DataSource to the DataGrid. If you don’t rebind the data, previous page data will be displayed from viewstate.
ItemsGrid.CurrentPageIndex = e.NewPageIndex
ItemsGrid.DataBind()
PagerStyle property is an instance of a class—specifically the DataGridPagerStyle class which controls the paging behavior.
Few important attributes of PagerStyle class:
Mode
Mode: Specifies whether the pager should be displayed as a Next/Previous set of hyperlinks or a list of links for each page. The default is to display Next/Previous hyperlinks.
NextPageText: The text to display for the Next hyperlink when Mode is set to display Next/Previous hyperlinks. The default is >.
PrevPageText : The text to display for the Next hyperlink when Mode is set to display Next/Previous hyperlinks. The default is <.
PageButtonCount: If Mode is set to display a list of links for each page, specifies how many pages of links to display. Defaults to 10. If this property is set to a value less than the total number of pages, after the last page link, an ellipsis (...) is displayed.
Position : Specifies where the paging hyperlinks should appear. Options include Bottom, Top, and TopAndBottom.
Sample Code for pagestyle:
<PagerStyle BackColor="Navy" ForeColor="White" Font-Size="8pt"
Font-Bold="True" HorizontalAlign="Right"
NextPageText="Next >" PrevPageText="< Prev"
Position="TopAndBottom" />
Following example demonstrate paging and page style for datagrid.
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<HTML>
<script runat="server">
Function CreateDataSource() As ICollection
' Create sample data for the DataGrid control.
Dim dt As DataTable = New DataTable()
Dim dr As DataRow
' Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", GetType(Int32)))
dt.Columns.Add(new DataColumn("StringValue", GetType(String)))
dt.Columns.Add(new DataColumn("CurrencyValue", GetType(Double)))
' Populate the table with sample values.
Dim i As Integer
For i=0 To 100
dr = dt.NewRow()
dr(0) = i
dr(1) = "Item " & i.ToString()
dr(2) = 1.23 * (i + 1)
dt.Rows.Add(dr)
Next i
Dim dv As DataView = New DataView(dt)
Return dv
End Function
Sub Page_Load(sender As Object, e As EventArgs)
' Load sample data only once, when the page is first loaded.
If Not IsPostBack Then
ItemsGrid.PagerStyle.Mode = PagerMode.NumericPages
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End If
End Sub
Sub Check_Change(sender As Object, e As EventArgs)
' Allow or prevent paging depending on the user's selection.
If AllowPagingCheckBox.Checked Then
ItemsGrid.AllowPaging = True
Else
ItemsGrid.AllowPaging = False
End If
' Rebind the data to refresh the DataGrid control.
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End Sub
Sub NumericPaging_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles NumericPaging.CheckedChanged
If NumericPaging.Checked Then
ItemsGrid.PagerStyle.Mode = PagerMode.NumericPages
Else
ItemsGrid.PagerStyle.Mode = PagerMode.NextPrev
End If
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End Sub
Sub Grid_Change(sender As Object, e As DataGridPageChangedEventArgs)
' For the DataGrid control to navigate to the correct page when
' paging is allowed, the CurrentPageIndex property must be updated
' programmatically. This process is usually accomplished in the
' event-handling method for the PageIndexChanged event.
' Set CurrentPageIndex to the page the user clicked.
ItemsGrid.CurrentPageIndex = e.NewPageIndex
' Rebind the data to refresh the DataGrid control.
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End Sub
</script>
<body>
<form runat="server" ID="Form1">
<h3>DataGrid AllowPaging Example</h3>
Select whether to allow paging in the DataGrid control.
<br>
<br>
<b>Product List</b>
<asp:DataGrid id="ItemsGrid" BorderColor="black" BorderWidth="1" CellPadding="3" AutoGenerateColumns="False"
PageSize="10" AllowPaging="True" OnPageIndexChanged="Grid_Change" runat="server">
<HeaderStyle BackColor="#00aaaa"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="IntegerValue" SortExpression="IntegerValue" HeaderText="Item" />
<asp:BoundColumn DataField="StringValue" SortExpression="StringValue" HeaderText="Description" />
<asp:BoundColumn DataField="CurrencyValue" HeaderText="Price" SortExpression="CurrencyValue" DataFormatString="{0:c}">
<ItemStyle HorizontalAlign="Right"></ItemStyle>
</asp:BoundColumn>
</Columns>
</asp:DataGrid>
<hr>
<table cellpadding="5">
<tr>
<td>
<asp:CheckBox id="AllowPagingCheckBox" Text="Allow paging" AutoPostBack="True" Checked="True"
OnCheckedChanged="Check_Change" runat="server" />
</td>
<td>
<asp:CheckBox id="NumericPaging" runat="server" Checked="True" AutoPostBack="True" Text="Numeric Paging"></asp:CheckBox>
</td>
</tr>
</table>
</form>
</body>
</HTML>
|
Responses
|
No responses found. Be the first to respond and make money from revenue sharing program.
|
|