In this article I have explained about how to create custom paging in Datalist control.
I will directly jump to the code. I have created a custom Visual WebPart with this Datalist to show some images stored in a image library.
The ascx page
| <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageView_EventsPhotoUserControl.ascx.cs" Inherits="My.SP.VisualWebpart.News.ImageView_EventsPhoto.ImageView_EventsPhotoUserControl" %> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%"> <tr class="ContentADP"> <td align="left" style="font-size: 22px; width: 50%" class="NewsHeading_LV2"> Events Photos </td> <td style="width: 50%; text-align: right; padding-right: 10px"> <asp:Button ID="btnPrev" runat="server" Text="<<" OnClick="btnPrev_Click" /><asp:Label ID="lblCurrentPage" runat="server" Text=""></asp:Label><asp:Button ID="btnNext" runat="server" Text=">>" OnClick="btnNext_Click" /> </td> </tr> </table> <asp:DataList ID="dlImages" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" OnItemDataBound="dlImages_ItemDataBound"> <ItemTemplate> <table id="Table1" cellpadding="0" border="1" cellspacing="1"> <tr> <td width="150px" style="height: 150px"> <asp:Image ID="imgProject" runat="server" ImageUrl='<%# Eval("RequiredField") %>' ToolTip='<%# Eval("NameOrTitle") %>' /> </td> </table> </ItemTemplate> </asp:DataList> |
Next is the Code behind file
| using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Data; using Microsoft.SharePoint; using Microsoft.Office.Server.Diagnostics;
namespace My.SP.VisualWebpart.News.ImageView_EventsPhoto { public partial class ImageView_EventsPhotoUserControl : UserControl { PagedDataSource pagedData = new PagedDataSource(); public int currentPage { get { object o = this.ViewState["_currentPage"]; if (o == null) return 0; else return (int)o; } set { this.ViewState["_currentPage"] = value; } }
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { try { BindImages(); } catch (Exception ex) { Microsoft.Office.Server.Diagnostics.PortalLog.LogString("Exception Occured in ListImage web part" + ex.Message); throw new SPException("Check Image view web part"); Response.Write(ex.ToString()); } } }
protected void BindImages() { try { SPSecurity.RunWithElevatedPrivileges(delegate() { SPSite elevatedSite = new SPSite(SPContext.Current.Site.Url); SPWeb elevatedWeb = elevatedSite.OpenWeb("/news"); SPList spListDocumentLib = elevatedWeb.Lists["EventsPhoto"]; DataTable dtItems = spListDocumentLib.Items.GetDataTable(); if (dtItems != null && dtItems.Rows.Count > 0) { pagedData.DataSource = dtItems.DefaultView; pagedData.AllowPaging = true; pagedData.PageSize = 12; pagedData.CurrentPageIndex = currentPage; btnPrev.Enabled = (!pagedData.IsFirstPage); btnNext.Enabled = (!pagedData.IsLastPage); lblCurrentPage.Text = "Page: " + (currentPage + 1).ToString() + " of " + pagedData.PageCount.ToString(); dlImages.DataSource = pagedData; dlImages.DataBind(); } }); } catch (Exception ex) { Microsoft.Office.Server.Diagnostics.PortalLog.LogString("Exception Occured in ListImage web part" + ex.Message); throw new SPException("Check Image view web part"); //throw ex; } }
protected void btnPrev_Click(object sender, EventArgs e) { //Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage - 1)); currentPage -= 1; BindImages(); }
protected void btnNext_Click(object sender, EventArgs e) { //Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage + 1)); currentPage += 1; BindImages(); }
protected void dlImages_ItemDataBound(object sender, DataListItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { string siteurl = SPContext.Current.Site.Url; Image imgProject = (Image)e.Item.FindControl("imgProject"); imgProject.ImageUrl = siteurl + "/news/EventsPhoto/" + imgProject.ToolTip; imgProject.Style.Add("width", "200px"); imgProject.Style.Add("height", "200px"); } } } } |
Thanks for reading..
If you have a more elegant solution – please post a comment… I’ll be happy to hear.
...HaPpY CoDiNg
Partha (Aurum)
