Serializing/De-Serializing datatable

   To Serialize a datatable we can use the inbuilt function WriteXml. We have put in 3 parameters the filename,xmlwritemode,writehierarchy.

Giving a name to the datatable is a must or you might get an exception “Cannot serialize the DataTable. DataTable name is not set”. In this case we have used the name “dtDoctype” using  the TableName  property  of  datatable.

If you forget to mention the writemode, you might get other errors like “Root element is missing.” While trying to de-serialize it.

The parameter “Mode” is to identify if it is a new entry or an edit. The parameter “item” indicates which list the item is being fetched from.

String docxmlPath = @”C:\KMUserControl\docList.xml”;

if (!File.Exists(docxmlPath))

{

   DataTable dt = new DataTable();

               

   dt = adBuzLogic.PopulateInformationTypeDataTable(ref Mode, item);

   dt.TableName = “dtDocType”;

   dt.WriteXml(docxmlPath, XmlWriteMode.WriteSchema, true);

 

   ddlInfoType.DataSource = dt;

   ddlInfoType.DataBind();

   if (Mode.Equals(“Edit”))

   {

     if (item != null)

     {

 

     ddlInfoType.Items.FindByText(item.ParentList.Title).Selected = true;

       }

    }

 

}

else

{

 

   DataTable dt = new DataTable();

   dt.ReadXml(docxmlPath);

               

   ddlInfoType.DataSource = dt;

   ddlInfoType.DataTextField = dt.Columns[0].ToString();

   ddlInfoType.DataValueField = dt.Columns[0].ToString();

   ddlInfoType.DataBind();

   if (Mode.Equals(“Edit”))

   {

     if (item != null)

     {

 

     ddlInfoType.Items.FindByText(item.ParentList.Title).Selected = true;

       }

    }

}

 

In PopulateInformationTypeDataTable function, we simply return a datatable from items in a Sharepoint list. ———————-

public DataTable PopulateInformationTypeDataTable(ref string mode, SPListItem editItem)

{

    DataTable dt = new DataTable(); //Define a datatable.

    DataColumn column = new DataColumn(); //Define a datacolumn.Here only one column is added which is of type string.

    column.DataType = Type.GetType(“System.String”);

    column.ColumnName = “item”;

    dt.Columns.Add(column);

try

{

SPWeb ospWeb = SPContext.Current.Web;

foreach (SPList ospList in ospWeb.Lists)

{

if (((ospList.BaseTemplate == SPListTemplateType.DocumentLibrary) || (ospList.BaseTemplate == SPListTemplateType.PictureLibrary)) && (ospList.ContentTypes["New Document"] != null)) //filter condition,from where to read items to form a datatable.

 {

    DataRow dr = dt.NewRow(); //dynamically adding datarows by reading from Sharepoint lists.

    ListItem liInformationType = new ListItem(ospList.Title, ospList.RootFolder.Name);

     dr[0] = liInformationType; //assigning value to the datarow.

     dt.Rows.Add(dr[0]); //adding datarow to datatable.

    }

  }

}

 catch (Exception exception)

 {

      Throw exception;         

 

  }

  return dt;

}

 

Tab Control using hotmap

It is very simple to implement tab control using hotmap.It is all with html and a bit of javascript. Refer to the images shown in Tab control without postback.
, where on clicking each tab the color of that tab had to change.

The image map was something like this,

<img id="imgHotmap" src="images/arrows_step_1.gif" width="342" height="34" border="0" usemap="#steps" />

<map name="steps" id="steps">

<area shape="poly" coords="253,1,330,1,342,17,331,34,252,34,264,17,254,3" href="#" alt="step4" onclick="changeImage(4);" />

<area shape="poly" coords="168,1,245,1,257,17,246,34,167,34,179,17,169,3" href="#" alt="step3" onclick="changeImage(3);" />

<area shape="poly" coords="0,0,77,0,88,16,77,32,0,32,1,1" href="#" alt="step1" onclick="changeImage(1);" />

<area shape="poly" coords="84,0,161,0,173,16,162,33,83,33,95,16,85,2" href="#" alt="step2" onclick="changeImage(2);" />

</map>

All, we did was to invoke a javascript for each area of the map i.e for each tab.
The job of the javascript was simple, it changed the image of “imgHotmap”.

function changeImage(opt)
{
if(opt == 1)
{
document.getElementById(’imgHotmap’).src = ‘/_layouts/images/novartis/arrows_step_1.gif’;

}
if(opt == 2)
{
document.getElementById(’imgHotmap’).src = ‘/_layouts/images/novartis/arrows_step_2.gif’;
}
if(opt == 3)
{
document.getElementById(’imgHotmap’).src = ‘/_layouts/images/novartis/arrows_step_3.gif’;
}
if(opt == 4)
{
document.getElementById(’imgHotmap’).src = ‘/_layouts/images/novartis/arrows_step_4.gif’;

}
}

 

Javascript to get value from People Editor.

We had to implement a functionality wherein we had a tab control with a peopleeditor in the first tab and we had to show the summary of all controls of the first tab in the second tab.

Initially,we were facing difficulties in fetching values in the peopleeditor, then we found out a way: Our people editor control had the id=pplContact

@ Register Tagprefix=”wssawc” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %> 

<wssawc:PeopleEditor id=”pplContacts” runat=”server” MultiSelect=”true” AllowEmpty=”false” PlaceButtonsUnderEntityEditor=”false” Width=”388px”/>

 

In the javascript for tab change, we included the following:

var users = null;
var  elem = document.forms[0].elements;

for(var i=0; i < elem.length; i++) {// look for the value we set the peopleeditor’s id to and “TextBox”

 

 

if(elem[i].id.indexOf(“pplOwner”) != -1 && elem[i].id.indexOf(“TextBox”) != -1) users = elem[i].value; }

 

Thus, we couls easily put the value of people editor pplOwner in a label on the next tab using:

document.getElementById(‘<%=lblOwner.ClientID %>’).innerHTML = users;

 

Tab control without postback.

 

  

We had to implement a tab functionality without postback, wherein the image of each tab changed on being clicked . This could be done very easily by implementing javascript and showing an hiding of different <div> on being clicked.

We had four divs, country1, country2, country3, country4.

On first time load only country1 is displayed and the others are hidden, consecutively, on clicking the second image country2 is displayed and the others are hidden.

 

I had a table displaying all the images,

<table>

<tr>

<td>

<div style=”float:left”>

<a href=”#” rel=”tcontent1″ >

<img id=”Img1″ src=”/_layouts/images/basics_hover.gif” onclick=”return changeImage(1);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent2″ >

<img id=”Img2″ src=”/_layouts/images/scope_active001.gif” onclick=”return changeImage(2);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent3″ >

<img id=”Img3″ src=”/_layouts/images/kits_active001.gif” onclick=”return changeImage(3);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent1″ >

<img id=”Img4″ src=”/_layouts/images/submit_active001.gif” onclick=”return changeImage(4);”  style=”border:0″ />

</a>

</div>

</td>

</tr>

</table>

 

 

 The javascript for doing the trick is given below,

function changeImage(opt)

    {

    //alert(opt);

    var currImage1=document.getElementById(“Img1″).src;

    var currImage2=document.getElementById(“Img2″).src;

    var currImage3=document.getElementById(“Img3″).src;

    var currImage4=document.getElementById(“Img4″).src;

   

    var rExp1 = /basics_hover.gif/gi;

    var newstring1 = new String(“basics_active001.gif”);

   

    var rExp2 = /scope_hover.gif/gi;

    var newstring2 = new String(“scope_active001.gif”);

   

    var rExp3 = /kits_hover.gif/gi;

    var newstring3 = new String(“kits_active001.gif”);

   

    var rExp4 = /submit_hover.gif/gi;

    var newstring4 = new String(“submit_active001.gif”);

   

    if (opt==1)

    {

    

       if (currImage1.indexOf(“basics_active001.gif”)!=-1)

       { 

        var rExp = /basics_active001.gif/gi;

        var newstring = new String(“basics_hover.gif”);

        var result = currImage1.replace(rExp, newstring);

       

        document.getElementById(“Img1″).src = result;  

       

        if(currImage2.indexOf(“scope_hover.gif”)!=-1)

        {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2″).src = result;

        }

        if(currImage3.indexOf(“kits_hover.gif”)!=-1)

        {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3″).src = result;

        }

        if(currImage4.indexOf(“submit_hover.gif”)!=-1)

        {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4″).src = result;

        }

       

        country4.style.display= “none”;

        country1.style.display = “block”;

        country2.style.display = “none”;

        country3.style.display = “none”;

        

        }

        else if(currImage1.indexOf(“basics_hover.gif”)!=-1)

       {

        var rExp = /basics_hover.gif/gi;

        var newstring = new String(“basics_active001.gif”);

        var result = currImage1.replace(rExp, newstring);

        document.getElementById(“Img1″).src = result;

       }

    }

   

    if (opt==2)

    {

    

       if (currImage2.indexOf(“scope_active001.gif”)!=-1)

       { 

        var rExp = /scope_active001.gif/gi;

        var newstring = new String(“scope_hover.gif”);

        var result = currImage2.replace(rExp, newstring);

        document.getElementById(“Img2″).src = result;

       

        if(currImage1.indexOf(“basics_hover.gif”)!=-1)

        {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1″).src = result;

        } 

      

        if(currImage3.indexOf(“kits_hover.gif”)!=-1)

        {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3″).src = result;

        }

        if(currImage4.indexOf(“submit_hover.gif”)!=-1)

        {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4″).src = result;

        }

       

        country4.style.display= “none”;

        country1.style.display = “none”;

        country2.style.display = “block”;

        country3.style.display = “none”;

       

        }

        else if(currImage.indexOf(“scope_hover.gif”)!=-1)

       {

      

       }

    }

    if (opt==3)

    {

        if (currImage3.indexOf(“kits_active001.gif”)!=-1)

        {

            var rExp = /kits_active001.gif/gi;

            var newstring = new String(“kits_hover.gif”);

            var result = currImage3.replace(rExp, newstring);

            document.getElementById(“Img3″).src = result;

           

            if(currImage1.indexOf(“basics_hover.gif”)!=-1)

            {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1″).src = result;

            }

            if(currImage2.indexOf(“scope_hover.gif”)!=-1)

            {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2″).src = result;

            }

            if(currImage4.indexOf(“submit_hover.gif”)!=-1)

            {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4″).src = result;

            }

           

            country4.style.display= “none”;

            country1.style.display = “none”;

            country2.style.display = “none”;

            country3.style.display = “block”;

           

        }

        else if(currImage.indexOf(“kits_hover.gif”)!=-1)

        {

           

        }

    }

    if (opt==4)

    {

   

        if (currImage4.indexOf(“submit_active001.gif”)!=-1)

        {

            var rExp = /submit_active001.gif/gi;

            var newstring = new String(“submit_hover.gif”);

            var result = currImage4.replace(rExp, newstring);

            document.getElementById(“Img4″).src = result;

           

            if(currImage1.indexOf(“basics_hover.gif”)!=-1)

            {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1″).src = result;

            }

            if(currImage2.indexOf(“scope_hover.gif”)!=-1)

            {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2″).src = result;

            }

            if(currImage3.indexOf(“kits_hover.gif”)!=-1)

            {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3″).src = result;

            }

           

            country4.style.display= “block”;

            country1.style.display = “none”;

            country2.style.display = “none”;

            country3.style.display = “none”;

           

        }

        else if(currImage.indexOf(“kits_hover.gif”)!=-1)

        {  

        } }}

 

 

Problem with character ‘&’ in CAML query.

In a particular scenario,we faced a problem with CAML query, returning an error “The property Query contains an invalid value.”.

Our CAML query was:

<Where>
<Contains><FieldRef Name=’Kits’/><Value Type=’Text’>Ray & Martin</Value></Contains>;
</Where>

After lots of tries we came to the solution that only in value’s containing ‘&’ we faced the problem, for other cases it worked fine.

We tried using CDATA, and it worked.

The reason being,a CDATA section is a section of element content that is marked for the parser to interpret as only character data, not markup.

So, our new approach as:

<Where> 
<Contains>   
<FieldRef Name=’Kits’/>     
<Value Type=’Text’>  <![CDATA[Ray & Martin]]></Value></Contains>
</Where>

 

Downloading large zip files causing problem while trying to open (the compressed zip folder is invalid or corrupted)

We had to download zip files from a FTP server, it was found that if the files were of small size there was no problem, however for big files (larger than around 4MB), after downloading them, it could not be opened and kept saying “the compressed zip folder is invalid or corrupted”.
The original code was:

FtpWebRequest reqFTP;
Response.Buffer = true;
Response.Clear();
Response.AddHeader(”Content-Disposition”, “inline; filename=” + filename);
Response.ContentType = “application/x-zip-compressed”;
Response.Flush();
reqFTP = (FtpWebRequest)FtpWebRequest.Create(new Uri(”ftp://” + ftpServerIP + “/” + filename));
reqFTP.Proxy = null;
reqFTP.Method = WebRequestMethods.Ftp.DownloadFile;
reqFTP.UseBinary = true;
reqFTP.Credentials = new NetworkCredential(ftpUserID, ftpPassword, ftpDomain);
FtpWebResponse response = (FtpWebResponse)reqFTP.GetResponse();
Stream ftpStream = response.GetResponseStream();
MemoryStream MemStream = new MemoryStream();
int bufferSize = 1024;
byte[] respBuffer = new byte[bufferSize];
int bytesRead = ftpStream.Read(respBuffer, 0, respBuffer.Length);
while (bytesRead > 0)
{
MemStream.Write(respBuffer, 0, bytesRead);
bytesRead = ftpStream.Read(respBuffer, 0, respBuffer.Length);
}
byte[] finalByte = MemStream.GetBuffer();
Response.BinaryWrite(finalByte);

So, I changed the above 2 lines and wrote the below line which solved my problem.

Response.BinaryWrite(MemStream.ToArray());

 

Creating Custom Site Definition and implementing Features

I had to create a site definition for a blog site that I created so that it could be used as a template. My site had various custom webparts  and I also created some lists. So to incorporate all that I also used features. Here is a brief explanation of it:

Site Definitions are located in the following folder on the SharePoint server: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\SiteTemplatesThe aspx pages and various lists that make up the site definition are stored here.Inside the xml subfolder is the onet.xml which contains the various configurations and modules of the site definition like the various web part zones in the pages.

Steps:

1.       First I traversed to C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\SiteTemplatesCopied the Blog folder and pasted it back, renamed it to SampleBlog.

2.       Next, connect the new site definition to sharepoint by copying the WEBTEMP.XML file in “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\1033\XML” and paste it to the same location renaming it as webtempSampleblog.xml.

Open the file and delete any unnecessary <template> tag as shown below:

<?xml version=”1.0″ encoding=”utf-8″?>

<!– _lcid=”1333″ _version=”12.0.4518″ _dal=”1″ –>

<!– _LocalBinding –>

<Templates xmlns:ows=”Microsoft SharePoint”>

 <Template Name=”SampleBlog” ID=”1333″>

    <Configuration ID=”0″ Title=”Sample Blog Template” Hidden=”FALSE” ImageUrl=”/_layouts/images/BLOGPREV.PNG” Description=”Sample blog template” DisplayCategory=”Sample Templates”></Configuration>

</Template>

</Templates>

Change the name attribute to “Sample Blog Template” and the ID so that it is unique, generally numbers above 1000 will be safe.

3.       Reset IIS.

4.    Customizing the site definition.

After this point, one can see the new site definition and create new sites,but we want to customize our site definition, add various web parts etc.To do that we need to change the ONET.XML

The <Module> is created  for various pages.Inside that is <View> which represents various web part zones of the page. So, I exported the webparts and copied the xml’s in respective <View> tags representing the proper zone.

My next challenge was  with copying the xmlof DataView Web parts, as by default  Sharepoint Designer binds the control to the list instance using the list instance GUID. So, it is difficult to create a new site using this template along with the GUID’s of the DataView Web Part.

So, we need to replace the GUID’s with the list names.

i) On the attributes of the DataFormWebPart element replace the attribute ListName=”{GUID}” by ListName=”LIST_NAME” where LIST_NAME is the name of the list that you are binding to.

ii) Go through all of the DataFormParameter elements and replace:   

    <WebPartPages:DataFormParameter Name=”ListID” ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{GUID}”/>

With:

<WebPartPages:DataFormParameter Name=”ListName” ParameterKey=”ListName” PropertyName=”ParameterValues” DefaultValue=”LIST_NAME”/>

iii) Go to the ParameterBindings element and replace

    <ParameterBinding Name=”ListID” Location=”None” DefaultValue=”{GUID}”/>

With:

    <ParameterBinding Name=”ListName” Location=”None” DefaultValue=”LIST_NAME”/>   

This should give you a GUID free DataForm webpart that can be placed on a page layout used by multiple sites on your site collection (as long as the name of the list is the same on all sites).

5. IMPLEMENTING FEATURES

I had created several lists in my site, so to include those while I create a new site from my site definition, I had to use features.

To implement a feature we need to create a folder in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES

So, I created one named SampleBlogSite, and here is the content:

<Feature Id=”67409a48-46c8-4a28-8f2e-bca0a56e4213″

  ActivateOnDefault=”False”

  Title=”Sample Blog Site”

  Scope=”Web”

  ReceiverAssembly=”Sample.Blog.FeatureDefinition, Version=1.0.0.0, Culture=neutral, PublicKeyToken=246c59317fd65cd2″

  ReceiverClass=”Sample.Blog.FeatureDefinition.FeatureListner”

  Description = “Activate this feature to convert current blog site to Sample Blogs site. this feature can only be activated to a blogs site defintion.”

  xmlns=”http://schemas.microsoft.com/sharepoint/”>

</Feature>

Here, Sample.Blog.FeatureDefinition is the dll  implementing the feature.

Create a class inherited from SPFeatureReceiver. Implement the methods FeatureActivated, FeatureDeactivating, FeatureInstalled and FeatureUninstalling by overriding the base methods.

Write your code into the FeatureActivated-method.

Now change your feature.xml in the props ReceiverClass and ReceiverAssembly and set the corresponding values there for your assembly.

Refer this feature from your ONET.XML, as:

<Feature ID=“67409a48-46c8-4a28-8f2e-bca0a56e4213“ />

So, this completes the entire process.

 

How to get a populate on demand treeview in asp.net 2.0

I needed to add a populate on demand treeview to a div because the normal treeview was taking a very long time to get loaded. This is what I did.

public System.Web.UI.WebControls.TreeView tvGeoScope = new System.Web.UI.WebControls.TreeView();
string strCountry =”Country”;
tvGeoScope.ID =”tvGeoScope”;
//gets called whenever a node is clicked to expand.
tvGeoScope.TreeNodePopulate += new TreeNodeEventHandler
(tvGeoScope_TreeNodePopulate);
TreeNode n2 = new TreeNode(strCountry, strCountry);
n2.Expanded = false;
n2.SelectAction = TreeNodeSelectAction.None;
n2.PopulateOnDemand = true;
n2.ShowCheckBox = false;

 

Problem in uploading files in FTP Server.

I faced a typical problem while uploading files in a FTP server, it worked fine in the development server, however, when I deployed it in the production environment, it came up with an error “The Requested FTP Command is not supported when using HTTP proxy.”                                                                                 

 To solve this problem we have to set the proxy method of FTPWebRequest to null.

 

Problem with implementing tab control using AJAX in user control

I faced a typical problem where I had to implement a tab control using AJAX in a sharepoint site. When I tested it in sharepoint, I found that only the first time click of the tab buttons was working. When I clicked for the first time in a tab button it was working but when I clicked the second time it wasn’t.

To solve this problem, I wrote a method which will reset the form action as there is a sharepoint script included for changing the form action which may stop the form submission.

//Fixing Form Action
        private void FixFormAction ()
        {
            if (this.Page.Form != null)
            {
                string formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"];
                if (formOnSubmitAtt == “return _spFormOnSubmitWrapper();”)
                {
                    this.Page.Form.Attributes["onsubmit"] = “_spFormOnSubmitWrapper();”;
                }
            }
            ScriptManager.RegisterStartupScript(this, typeof(AjaxWebPart), “UpdatePanelFixup”, “_spOriginalFormAction = document.forms[0].action; _spSuppressFormOnSubmitWrapper=true;”, true);
        }

Or u can add the following after<@%Register> tag in your user contol

<script type=’text/javascript’>_spOriginalFormAction = document.forms[0].action; _spSuppressFormOnSubmitWrapper=true;</script>

which also does the same thing.