How to paginate records in DetailsView?

DetailsView

DetailsView control is another data-bound control that helps us to display a single record at a time. It also gives us flexibility to manipulate, paginate the records.

Get hundreds of ASP.NET Tips and Tricks and ASP.NET Online training here.

In the previous article, we learnt about How to show a record using DetailsView in ASP.NET? In this article,we shall learn how to paginate records into DetailsView?

ASPX PAGE

 
<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"CellPadding="4" OnPageIndexChanging="ChangeRecord" ForeColor="#333333"GridLines="None" >
<AlternatingRowStyle BackColor="White" />
<CommandRowStyle BackColor="#FFFFC0" Font-Bold="True" />
<FieldHeaderStyle BackColor="#FFFF99" Font-Bold="True" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
</asp:DetailsView>

CODE BEHIND

string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PopulateData();
}
}
 
private void PopulateData()
{
DataTable table = new DataTable();
// get the connection
using (SqlConnection conn = new SqlConnection(_connStr))
{
// write the sql statement to execute
string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";
// instantiate the command object to fire
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
// get the adapter object and attach the command object to it
using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
{
// fire Fill method to fetch the data and fill into DataTable
ad.Fill(table);
}
}
}
// specify the data source for the DetailsView
DetailsView1.DataSource = table;
// bind the data now
DetailsView1.DataBind();
}

/// <summary>
/// Changes the record.
/// </summary>
/// <param name="sender">The sender.</param>
/// <param name="e">The <see cref="System.Web.UI.WebControls.DetailsViewPageEventArgs"/> instance containing the event data.</param>
 
protected void ChangeRecord(object sender, DetailsViewPageEventArgs e)
{
DetailsView1.PageIndex = e.NewPageIndex;
this.PopulateData();
}

In the above code snippet, we have attached ChangeRecord method with OnPageIndexChanging event of the DetailsView in which we have set the new page index to the Page index property of the DetailsView and re-populated the data.

OUTPUT

Note:

Other data manipulations operations can be performed in the similar way as we do in the GridView and other Data controls.

Hope this article was useful. Thanks for reading, hope you liked it.

Keep reading my forth coming articles. To read my series of articles on ASP.NET,click here.