Friday 20 August 2010

Read Text value from ReadOnly TextBox

Some time we need to make textbox read-only for showing data. If we make textbox read-only at the designer setting as below, then the textbox always returns blank in the code behind.



Here I am giving you an example of the issue and the solution.
For date picker I used ASP.NET AJAX 's Calendar extender that can be attached to any ASP.NET TextBox control only. And in the textbox I don't want that user directly write any text.
For achieving this, if I make textbox read-only then at the server side textbox.text will come as blank(empty).
Solution




In code behind add an attribute.

txtDate.Attributes.Add("readonly", "readonly");

By doing this we can retrieve read-only textbox's value in the code behind.

Friday 21 May 2010

Color coding List item based on date

We had a need to maintain a set of books as library. I decided to go with SharePoint list with 'Issued Date' as DateTime column and 'Due Date' column as calculated column (Issued Date + 14 days).
The formula for 'Due Date' is =[Issued Date]+14

Added one more column of type 'Yes\No' with name 'Returned' to note if the book has been returned or not.

Ok, now i have to display the row in yellow(or light pink) if today's date is just 3 days or less away from 'Due Date', make it red if today's date is 'Due Date' or crossed. All other rows in green.
To do this on client side, CEWP had to be added to the page as the last WebPart.
The script to check for the date and change the row color was

<script type="text/javascript">
// Change these variables to suit your needs
var green = 3; // Items this many days out will be green
var yellow = 1; // Items that are this many days or more are yellow

var tbls = document.getElementsByTagName("TABLE");
var col = new Array();
for (var t in tbls) {
if (tbls[t].className == "ms-listviewtable") {
var rows = tbls[t].childNodes[0].childNodes;
var hRow = rows[0].getElementsByTagName("TH");
for (i=0;i<hRow.length;i++) {
col[i] = (hRow[i].innerText || hRow[i].textContent) + "";
col[i] = col[i].replace(/n/,"");
}
for (r=1;r<rows.length;r++) {
for (c=0;c<col.length;c++) {
if ((col[c] == 'Due Date') && (rows[r].childNodes[c+1].innerText == 'No')) {
colorIt(rows[r],rows[r].childNodes[c],green,yellow);
}
}
}
}
}

function colorIt(row,x,green,yellow) {
var strDate = x.innerText || x.textContent;
var dt1 = parseInt(strDate.substring(0,2),10);
var mon1 = parseInt(strDate.substring(3,5),10);
var yr1 = parseInt(strDate.substring(6,10),10);
mon1 = mon1 - 1;

var startDate = new Date(yr1, mon1, dt1);
var today = new Date();
var toDate = new Date(today.getFullYear(), today.getMonth() , today.getDate());
var dateDiff = (startDate - toDate )/86400000;;

if (dateDiff > green) {
row.style.backgroundColor='#66FF99';
} else if (dateDiff >= yellow) {
row.style.backgroundColor='Pink';
}
else
{
row.style.backgroundColor='#CC0066';
}
}
</script>

Color Coded SharePoint Calendar

Once i had to give different color for the Calendar items. Below are the steps i followed

1. Created one Calculated Column with title 'ColorTitle'
2. Added the formula
="<div style='border: 1px solid #009933; padding: 3px; margin: 0px; background-color: #FFFFB0; color: #009933'>"&Title&"</div>"
3. Edited the default view as below
     a. Chose 'ColorTitle' for Month View Title
     b. Chose 'ColorTitle' for Week View Title


Saved the view. Thats all :)

Note: You can change the color based on a field value by slightly modifiying the formula.

Hide fields of SharePoint Calendar

I wanted a Calendar in my team site without fields 'Recurrence' and 'Workspace'. Since it was production server, i cannot do any custom coding, installation or configuration and even i cannot use any tool to tweak the fields.
So, the solution is to do with JavaScript + CEWP.
Go to the Display.aspx form and EditForm.aspx through an  item in calendar and bring the page into edit more to include the CEWP.

One trick to bring the Displayform or editform to edit mode, just append "toolpaneview=2" after ".aspx" in the address bar of browser
.......DisplayForm.aspx?toolpaneview=2 or
-----EditForm.aspx?toolpaneview=2

Add CEWP to the bottom of page. Add the following script to the CEWP

<script type="text/javascript">
var trs = document.getElementsByTagName("TR");</P><p>
for (var r in trs) {
var row = (trs[r].innerText
trs[r].textContent)+"";
if (row.match(/^Workspace/)) { trs[r].style.display = "none"; }
if (row.match(/^Recurrence/)) { trs[r].style.display = "none";}
}
</script>

Tuesday 6 April 2010

Show traffic lights in SP List based on Checkbox(Yes\No) column

I had to create a SharePoint list with traffic lights as shown below.


The decision for color of traffic light is from a Checkbox field.

One calculated field for each traffic light has to be created with formula like
="< d i v >< i m g src="http://www.blogger.com/_layouts/images/KPIDefault-%22&IF([Gate%201]=TRUE,"0.GIF","2.GIF")&"" /> < / d i v >"

 

The idea is to use the existing SharePoint KPI images.

Since the formula is based on Checkbox, the following IF condition will work.
="< d i v >< i m g src="http://www.blogger.com/_layouts/images/KPIDefault-%22&IF([Gate%201]=TRUE,"0.GIF","2.GIF")&"" /> < / d i v >"
"


Did NOT work:
="< d i v >< i m g src="http://www.blogger.com/_layouts/images/KPIDefault-%22&IF([Gate%201]=Yes,"0.GIF","2.GIF")&"" /> < / d i v >"

="< d i v >< i m g src="http://www.blogger.com/_layouts/images/KPIDefault-%22&IF([Gate%201]=1,"0.GIF","2.GIF")&"" /> < / d i v >"


It will just set the HTML tags to the calculated field based on the checkbox value.
How to make the browser to interpret the HTML tags and display the image.

Here comes the handy script from http://blog.pathtosharepoint.com/2008/09/01/apply-color-coding-to-your-sharepoint-lists/

A CEWP has to be added at bottom of the page and include the following script in the CEWP, thats all.
It does magic for you...

< s c r i p t type="text/javascript">
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length) { try { TDContent = theTDs[i].innerText || theTDs[i].textContent; if ((TDContent.indexOf("") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML="
<><><><>"+htmlToRender+"
";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < theTBODYTDs.length) { try { TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent; if ((TDContent.indexOf("") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
< / s c r i p t >

Monday 4 January 2010

ReportViewer in WebPart (SharePoint)

Using ReportViewer control inside SharePoint Webpart is bit tricky and challenging.
Below are the steps to make it happen.

1. web.config (of SharePoint) changes (Extra space has been included after > and < to make it appear in blog)

add below line to < httpHandlers > section

< add verb="*" path="Reserved.ReportViewerWebControl.axd" type = "Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" / >


and below line to < assemblies >

< add assembly="Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" / >

2. Add Report (.rdlc) and DataSet (.xsd) files to Solution


Sample Code

------------------------------------------------------------
using System;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.Reporting.WebForms;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;

namespace ReportWebpart
{
public class ReportsWP : WebPart
{
Label lblTime;
ReportViewer ReportViewer1;
TextBox tb1;
Button btn;

protected override void CreateChildControls()
{
base.CreateChildControls();
try
{
lblTime = new Label();
lblTime.Text = "Enter Plant No.";

tb1 = new TextBox();

btn = new Button();
btn.Text = "Refresh Report";
btn.Click += new EventHandler(btn_Click);

ReportViewer1 = new ReportViewer();
ReportViewer1.Width = Unit.Percentage(80);
ReportViewer1.EnableViewState = true;
ReportViewer1.LocalReport.ReportPath = @".\Report1.rdlc"; // Copy the rdlc file to root of IIS
ReportViewer1.ProcessingMode = ProcessingMode.Local;
ReportViewer1.ID = "rprtViewer1";

this.Controls.Add(lblTime);
this.Controls.Add(tb1);
this.Controls.Add(btn);
this.Controls.Add(ReportViewer1);
}
catch (Exception ex)
{
string k = ex.Message;
}
}

void btn_Click(object sender, EventArgs e)
{
DataTable newDT = GetTable();
ReportViewer1.LocalReport.DataSources.Clear();
ReportViewer1.LocalReport.DataSources.Add(new ReportDataSource("DataSet1_Employee", newDT));//Name of Dataset (.xsd file)+ '_' + table name
ReportViewer1.ID = "rprtViewer1";
ReportViewer1.DocumentMapCollapsed = true;
ReportViewer1.LocalReport.Refresh();
}

private DataTable GetTable()
{
//FRAME THE QUERY AS NEEDED. THE FIELDS RETURN SHOULD MATCH WITH REPORT'S DESIGN TIME FIELDS
}
}
}
----------------------------------------------------------

NOTE: If you are getting following error while accessing the WebPart page containing ReportViewer

Microsoft.SharePoint.Portal.Analytics.UI.ReportViewerMessages, Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c does not implement IReportViewerMessages or could not be found


Try either of following to fix it

1In web.config of SharePoint, comment the following line under
1. <appsettings >
< ! -- < add key="ReportViewerMessages" value="Microsoft.SharePoint.Portal.Analytics...... / > -- >

or

2.  Add  following to < appsettings >
< remove key="ReportViewerMessages" >


------------------------------------------------------