| RadControls version |
2010.3.1215.35
|
| .NET version |
3.5
|
| Visual Studio version |
2010
|
| programming language |
C#
|
| browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
This is Visual Webpart to Query Pages library based on Content type and display data into RadlistView with Paging and with Ajaxify for better performence.
Tools & Technology : Vs2010,Sharepoint 2010,Telerik Ajax Controls
Contorls Used : RadLoading Panel,RadajaxManager,RadDataPager,RadListView.
Lets say you have pages library under /events subsite.This Page library store all publishing pages based on event Content type now you want to query all pages based on Event Content type and want to display in RadListView with paging then example will help you.
I know all Sharepoint Developers Knows how to create Empty sharepoint 2010 project and add visual webpart in VS2010 so i skip this step.
Assumption : You have Created Empty Sharepoint 2010 Project and add VisualWebaprt as Sharepoint item in Solutions.
1.Now add Class file lets say Events.cs with all Properties you need in my case its looks like below
2.Create Class file called EventDB.cs to include bussiness logic and query data from sharepoint
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Publishing.Fields;
namespace CAS.EventsRollup
{
public class EventDb
{
public List<Events> GetEvents() {
SPWeb web = SPContext.Current.Web;
string CamlQuery = @"<Where>
<Eq>
<FieldRef Name='ContentType' />
<Value Type='Text'>Event Publicity Page</Value>
</Eq>
</Where>
<OrderBy><FieldRef Name='EventFirstOccurence' Ascending='True' /></OrderBy>";
string ViewFields = @"<FieldRef Name='Title1' />
<FieldRef Name='PublishingRollupImage' />
<FieldRef Name='Blurb' />
<FieldRef Name='ID' />
<FieldRef Name='Spotlightdatetime' /><FieldRef Name='Location' />";
SPQuery query = new SPQuery();
query.ViewFields = ViewFields;
query.Query = CamlQuery;
SPDocumentLibrary doclib = (SPDocumentLibrary)web.Lists["Pages"];
SPListItemCollection items = doclib.GetItems(query);
List<Events> listOfEvents = new List<Events>();
foreach (SPListItem item in items)
{
Events eventItem = new Events();
eventItem.ID = item["ID"].ToString();
if (item["Title1"] != null) {
eventItem.Title = item["Title1"].ToString();
}
if (item["PublishingRollupImage"] != null) {
eventItem.ImageUrl = ((ImageFieldValue)item["PublishingRollupImage"]).ImageUrl;
//string[] PublishingRollupImage = item["PublishingRollupImage"].ToString().Split(new char[] { ' ' });
//eventItem.ImageUrl = PublishingRollupImage[2].Remove(0, 4).Replace("\"", "");
}
else
{
eventItem.ImageUrl = "/news-events/events/PublishingImages/_t/music@DEspotlight_jpg.jpg";
}
if (item["Blurb"] != null)
{
eventItem.Excerpt = item["Blurb"].ToString();
}
eventItem.PageUrl = item.File.ServerRelativeUrl;
if (item["Spotlightdatetime"] != null)
{
eventItem.EventDate = item["Spotlightdatetime"].ToString();
}
if (item["Location"] != null)
{
eventItem.Location = item["Location"].ToString();
}
listOfEvents.Add(eventItem);
}
return listOfEvents;
}
}
}
3.Modify .ascx file as per your UI requirment in my case it looks something like this
<%@ 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" %>
<%@ Register TagPrefix="Telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2010.3.1215.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EventsRollupUserControl.ascx.cs" Inherits="CAS.EventsRollup.EventsRollup.EventsRollupUserControl" %>
<Telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Windows7"></Telerik:RadAjaxLoadingPanel>
<div class="events-info">
<asp:Panel ID="ListViewPanel1" runat="server">
<Telerik:RadListView ID="eventsRollup" DataKeyNames="ID" ItemPlaceholderID="EventsContainer" OnNeedDataSource="eventsRollup_NeedDataSource" AllowPaging="true" runat="server">
<LayoutTemplate>
<!-- <fieldset> -->
<!-- <legend>Events</legend> -->
<h4 class="">Upcoming Events</h4>
<asp:PlaceHolder ID="EventsContainer" runat="server" />
<table cellpadding="0" cellspacing="0" width="100%;" style="clear: both;">
<tr>
<td>
<Telerik:RadDataPager ID="eventDataPager" runat="server" PagedControlID="eventsRollup" PageSize="5">
<Fields>
<Telerik:RadDataPagerButtonField FieldType="FirstPrev" />
<Telerik:RadDataPagerButtonField FieldType="Numeric" />
<Telerik:RadDataPagerButtonField FieldType="NextLast" />
<Telerik:RadDataPagerPageSizeField PageSizeText="Page Size:" />
<Telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" TextBoxWidth="15" />
<Telerik:RadDataPagerTemplatePageField>
<PagerTemplate>
<div style="float: right">
<b>Items
<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
to
<asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />
of
<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
<br />
</b>
</div>
</PagerTemplate>
</Telerik:RadDataPagerTemplatePageField>
</Fields>
</Telerik:RadDataPager>
</td>
</tr>
</table>
<!--</fieldset> -->
</LayoutTemplate>
<ItemTemplate>
<div class="news-items">
<div class="image-area-left">
<img src='<%# DataBinder.Eval(Container.DataItem,"ImageUrl") %>' alt="" width="122px" height="95px" />
</div>
<div class="news-item">
<a href='<%# DataBinder.Eval(Container.DataItem,"PageUrl") %>' title='<%# DataBinder.Eval(Container.DataItem,"Title") %>'><%# DataBinder.Eval(Container.DataItem, "Title") %></a>
<p><%# DataBinder.Eval(Container.DataItem, "EventDate")%></p>
<p><%# DataBinder.Eval(Container.DataItem, "Location")%></p>
<div class="news-excerpt">
<%# DataBinder.Eval(Container.DataItem, "Excerpt")%>
</div>
</div>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<h4>Upcoming Events</h4>
<div style="margin:5px;">There are no upcoming events...</div>
</EmptyDataTemplate>
</Telerik:RadListView>
</asp:Panel>
</div>
<div id="errorPanel">
<asp:Panel ID="Error" runat="server" Visible="false">
<asp:Label ID="lblerror" runat="server"></asp:Label>
</asp:Panel>
</div>
4.Code Behind file (.ascx.cs)
5.Now Most Important thing for RadAjaxManager and RadAjaxLoadingPanel to work in sharepoint 2010 webpart.Make sure you create Instance of RadAjaxManager in OnInit method of webpart class as shown below.
using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Telerik.Web.UI;
namespace CAS.EventsRollup.EventsRollup
{
[ToolboxItemAttribute(false)]
public class EventsRollup : WebPart
{
// Visual Studio might automatically update this path when you change the Visual Web Part project item.
private const string _ascxPath = @"~/_CONTROLTEMPLATES/CAS.EventsRollup/EventsRollup/EventsRollupUserControl.ascx";
RadAjaxManager ajaxmgr;
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
ajaxmgr = new RadAjaxManager();
Page.Items.Add(typeof(RadAjaxManager), ajaxmgr);
Page.Form.Controls.AddAt(0, ajaxmgr);
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
}
protected override void CreateChildControls()
{
Control control = Page.LoadControl(_ascxPath);
Controls.Add(control);
Panel panel = control.FindControl("ListViewPanel1") as Panel;
RadAjaxLoadingPanel loadingPanel = control.FindControl("RadAjaxLoadingPanel1") as RadAjaxLoadingPanel;
ajaxmgr.AjaxSettings.AddAjaxSetting(panel, panel, loadingPanel);
}
}
}
6.Now Modify feature name,.Webpart file as per your req.
7.Build,Package and Deploy it.
here is live url of Working sample
http://www.music.udel.edu/news-events/events/Pages/default.aspx
please feel free to contact me if you have any question and need help.
Thanks
Ronak