DetailsView Control in ASP.NET - Part 5
Introduction
In Part 4 of this article series we have discussed how to paging through
data in DetailsView Control
and now in this article we will discuss how to customize the paging interface
in DetailsView Control.
Customizing Paging Interface in DetailsView Control
We can
customize the appearance of the paging interface by modifying the PagerSettings property. For example, the DetailsViewcontrol in the page given below displays
first, previous, next, and last links instead of page numbers.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DetailsView
id="dtlProducts"
DataSourceID="SqlDataSource1"
AllowPaging="true"
Runat="server">
<PagerSettings
Mode="NextPreviousFirstLast"
FirstPageText="[First]"
LastPageText="[Last]"
NextPageText="[Next]"
PreviousPageText="[Previous]" />
</asp:DetailsView>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [TITLE],
[COMPANY], [PRICE] FROM [PRO_LIST]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
· FirstPageImageUrl: Enables
us to display an image for the first page link.
· FirstPageText: Enables
us to specify the text for the first page link.
· LastPageImageUrl: Enables
us to display an image for the last page link.
· LastPageText: Enables
us to specify the text for the last page link.
· Mode: Enables
us to select a display mode for the pager user interface. Possible values are NextPrevious,NextPreviousFirstLast, Numeric, and NumericFirstLast.
· NextPageImageUrl: Enables
us to specify the text for the next page link.
· NextPageText: Enables
us to specify the text for the next page link.
· PageButtonCount: Enables
us to specify the number of page number links to display.
· Position: Enables us to specify the
position of the paging user interface. Possible values are Bottom, Top, TopAndBottom.
· PreviousPageImageUrl: Enables
us to display an image for the previous page link.
· PreviousPageText: Enables
us to specify the text for the previous page link.
· Visible: Enables
us to hide the paging user interface.
If we need to customize the paging interface completely, then we
can use a template. For example, the page given below displays a list of page
numbers in a drop-down list control.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub dtlProducts_DataBound(ByVal sender As Object, ByVal e As EventArgs)
Dim ddlPager As DropDownList = CType(dtlProducts.BottomPagerRow.Cells(0).FindControl("ddlPager"), DropDownList)
For i As Integer = 0 To dtlProducts.PageCount - 1
Dim item As New ListItem(String.Format("Product Number {0}", i + 1), i.ToString())
If dtlProducts.PageIndex = i Then
item.Selected = True
End If
ddlPager.Items.Add(item)
Next
End Sub
Protected Sub btnPage_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim ddlPager As DropDownList = CType(dtlProducts.BottomPagerRow.Cells(0).FindControl("ddlPager"), DropDownList)
dtlProducts.PageIndex = Int32.Parse(ddlPager.SelectedValue)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DetailsView
id="dtlProducts"
DataSourceID="SqlDataSource1"
AllowPaging="true"
OnDataBound="dtlProducts_DataBound"
Runat="server">
<PagerTemplate>
<asp:DropDownList
id="ddlPager"
Runat="server" />
<asp:Button
id="btnPage"
Text="Select"
Runat="server" OnClick="btnPage_Click" />
</PagerTemplate>
</asp:DetailsView>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [TITLE],
[COMPANY], [PRICE] FROM [PRO_LIST]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Now
when we open the page and select the ‘Product Number’ and then click on Select
button and it will navigate us to the selected record.
Note: Continue
in Next Part.
Comments
Post a Comment