Implement Simple Rating Concept in GridView using SharePoint List Data

OutPut:-

Images I have used to achieve this functionality:-

Steps:-

1. Create a New Custom SharePoint List.
2. Create a Column of Number Type “Rating”.
3. Specify column as a Required Field.
4. Specify a Range of 0 to 5 in the rating Column.
5. Set Default Value as 0 in Default Value of the Rating Column.
6. Now Create the Names of the Images as given below.

For Rating we will use numbers 0 to 5 Range. So Create the Image Names like this given below and upload them them to the Document Library.

• 0Star.png
• 1Star.png
• 2Star.png
• 3Star.png
• 4Star.png
• 5Star.png

Ascx

<%@ 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="RatingGridViewUserControl.ascx.cs" Inherits="RatingGridView.RatingGridView.RatingGridViewUserControl" %> <asp:GridView ID="dgvRating" runat="server" AutoGenerateColumns="False"     Width="100%" CellPadding="4" EnableModelValidation="True" ForeColor="#333333"     GridLines="None">     <AlternatingRowStyle BackColor="White" /> <Columns> <asp:BoundField HeaderText="Article Name" DataField="Title" /> <asp:TemplateField HeaderText="Rating"> <ItemTemplate> <img src="/UserPages/StarImages/<%# Eval("Rating") %>Star.png" height="55px" title="<%# Eval("Rating") %>Star" /> </ItemTemplate> <AlternatingItemTemplate> <img src="/UserPages/StarImages/<%# Eval("Rating") %>Star.png" height="55px" title="<%# Eval("Rating") %>Star" /> </AlternatingItemTemplate> </asp:TemplateField> </Columns>     <EditRowStyle BackColor="#7C6F57" />     <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />     <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />     <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />     <RowStyle BackColor="#E3EAEB" />     <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /> </asp:GridView>

Ascx.Cs

using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using System.Security; namespace RatingGridView.RatingGridView {     public partial class RatingGridViewUserControl : UserControl     {         protected void Page_Load(object sender, EventArgs e)         {             getRatingData();         }         public void getRatingData()         {             try             {                 SPSecurity.RunWithElevatedPrivileges(delegate()                 {                     SPQuery sQuery = new SPQuery();                     sQuery.Query = "<OrderBy><FieldRef Name=\"ID\" Ascending=\"False\" /></OrderBy>";                     SPListItemCollection myColl = SPContext.Current.Web.Lists["New Articles"].GetItems(sQuery);                     if (myColl.Count > 0)                     {                         dgvRating.DataSource = myColl.GetDataTable();                         dgvRating.DataBind();                     }                 });             }             catch (Exception Ex)             {                 Response.Write(Ex.ToString());             }         }     } }