Expandable Regions using HTML

You can create nice looking expandable regions using just HTML and some Java scripting. This is specially useful if you are to create a site without any major programming languages. Today I thought to share an expandable region that I created to give you an idea to get it done.

When the code works it will look like the following.

You should be excited by now, to get it working you need the following code inserted into a body section of a HTML file. Please note I have added the CSS also in to the page body, but if you have a separate CSS file please separate the CSS .

1. <style type="text/css">
2.     a.headingStyle
3.     {
4.         text-decoration: none;
5.         margin-left: 0.5em;            
6.     }
7.     a.headingStyle:hover
8.     {
9.         text-decoration: underline;
10.     }
11.     a.headingStyle span.charStyle
12.     {
13.         font-family: monospace;
14.         font-weight: normal;
15.     }
16.     .contentStyle
17.     {
18.         display: none;
19.         margin-left: 1.5em;
20.         margin-right: 0.5em;
21.         margin-bottom: 0.5em;
22.         border-width: thin;
23.         border-style: outset;
24.         background-color:#D2E3FF;
25.     }
26.     .upArrowStyle
27.     {
28.         height:32px;
29.         background-image: url('Up_Arrow_32x32.png');
30.         background-repeat:no-repeat;
31.     }
32.     .downArrowStyle
33.     {
34.         height:32px;
35.         background-image: url('Down_Arrow_32x32.png');
36.         background-repeat:no-repeat;
37.     }
38. </style>
39.  
40. <script type="text/javascript">
41.     function display(item) {
42.         if (document.getElementById) {
43.             // Retrieving the first child item.
44.             var firstChildItem = item.firstChild;
45.             // Getting the correct child item with inner HTML text.
46.             firstChildItem = item.firstChild.innerHTML ? item.firstChild : item.firstChild.nextSibling;
47.             // Toggling the + or - according to the state after click.
48.             firstChildItem.innerHTML = firstChildItem.innerHTML == '+' ? '-' : '+';
49.             // Toggling the display image after click.
50.             item.className = item.className == "downArrowStyle" ? "upArrowStyle" : "downArrowStyle";
51.             // Get the sub item to toggle visibility.
52.            var nextSubItem = item.parentNode.nextSibling.style ? item.parentNode.nextSibling : item.parentNode.nextSibling.nextSibling;
53.             // Toggle visibility of the sub item.
54.             nextSubItem.style.display = nextSubItem.style.display == 'block' ? 'none' : 'block';
55.         }
56.     }
57.  
58.     // Displaying everything if item could not be found.
59.     if (!document.getElementById)
60.         document.write('<style type="text/css"><!--\n .dspcont{display:block;}\n //--></style>');
61. </script>
62.  
63. <!-- If Java scripts are blocked, display everything expanded. -->
64. <noscript>
65.     <style type="text/css">
66.         .dspcont
67.         {
68.             display: block;
69.         }
70.     </style>
71. </noscript>
72. <div>
73.     <!-- If + or - is required to be displayed besides the image simply change display:none; to display:block; in following sections. -->
74.     <h1>
75.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
76.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 1</span>
77.         </a>
78.     </h1>
79.     <div class="contentStyle">Title 1 content goes here.</div>
80.     <h1>
81.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
82.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 2</span>
83.         </a>
84.     </h1>
85.     <div class="contentStyle">
86.         <h2>
87.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
88.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 1</span></a></h2>
89.         <div class="contentStyle">
90.             Sub title 1 content goes here.</div>
91.         <h2>
92.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
93.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 2</span></a></h2>
94.         <div class="contentStyle">
95.             Sub title 2 content goes here.</div>
96.     </div>
97.     <h1>
98.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
99.         <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 3</span></a></h1>
100.     <div class="contentStyle">Title 3 content goes here.</div>
101. </div>

 

Remember to correct the image URLs, otherwise they will go missing.

I need to thank M. C. Matti for his great article which gave me this idea. Also you can use this method to create expandable regions in other sites which use different technologies. For example if you need to add this to a SharePoint site, just use a Content Editor web part and paste the code using Source Editor in web part properties.

Hope this helps.

SharePoint 2010 Videos

Thought to share few sites I found which might help you start development on SharePoint 2010.

Official Microsoft SharePoint Site

Getting started developing on SharePoint

SharePoint Resources for Developers – This has links to many SharePoint learning videos

Using SharePoint 2010

Hope these helps.

Firing TreeView TreeNodeCheckChanged Event

Normally in ASP.Net TreeView you can enable it to show checkboxes in its node levels. So if you need to do any actions when a node is checked or unchecked you need to use the TreeNodeCheckChanged event. But the problem is TreeNodeCheckChanged event will not fire when a checkbox is clicked. The cause for this is because the TreeNode class which represents a node in the TreeView will not add onClick event on the checkbox.

But if you carefully check it the event is getting fired at the next page postback. Since I needed to do some actions when the checkbox statuses are changed I made the page post back when a checkbox is checked or unchecked by the following java script. What it does is simply it will check the element which caused the event is a checkbox and do a postback of the page.

1. <script type="text/javascript">
2.     function TreeViewCheckBoxClicked(Check_Event) {
3.         var objElement;
4.         try {
5.             // Get the element which fired the event.
6.             objElement = window.event.srcElement;
7.         }
8.         catch (Error) {
9.             //srcElement is failing, objElement is null.
10.         }
12.         if (objElement != null) {
13.             // If the element is a checkbox do postback.
14.             if (objElement.tagName == "INPUT" && objElement.type == "checkbox") {
15.                 __doPostBack("", "");
16.             }
17.         }
18.         else {
19.             //    If the srcElement is failing due to browser incompatibility determine
20.             // whether the element is and HTML input element and do postback.
21.             if (Check_Event != null) {
22.                 if (Check_Event.target.toString() == "[object HTMLInputElement]") {
23.                     __doPostBack("", "");
24.                 }
25.             }
26.         }
27.     }
28. </script>

To make this work you need to bind the onClick event with the javascript shown above as shown below.

1. protected void Page_Load(object sender, EventArgs e)
2. {
3.     // Adding the onClick script to the TreeView.
4.     TreeView1.Attributes.Add("onClick", "TreeViewCheckBoxClicked(event)");
5. }

Even though I have done this in Page Load this can be done in other places of code as well, for example if you are adding the TreeView by code you can use this right before adding it to the page.

The above will make the page post back when ever a checkbox in the TreeView is clicked, but nothing special will happen. You need to implement the code for TreeNodeCheckChanged event to get some task done out of it, for example I am using the following code to check or uncheck the child nodes depending on the action done for the parent node.

1. protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
2. {
3.     // Loop through all the child nodes and change the checked status as required.
4.     foreach (TreeNode tn in e.Node.ChildNodes)
5.     {
6.         if (e.Node.Checked)
7.             tn.Checked = true;
8.         else
9.             tn.Checked = false;
10.     }
11. }

Creating a Web Part to use with SharePoint

Creating a web part for SharePoint consists of several steps.
1. Create a user control.
2. Create the web part DLL to hold the user control.
3. Add user control and web part to SharePoint and make the web part safe.
4. Add the web part to the web parts gallery.
5. Finally add the web part to the page.
Lots of steps ha, don’t worry we’ll do step by step.

1. Create a user control.
a. Start Visual Studio and click on File -> New -> Web Site.

b. Select ASP.NET Web Site as the template, select C# as the language, and give a file system location and a name (prjFirst) for the project before pressing Ok. c. Now we need to add a page to write our code. To do that, right click on top of the project and click on Add New Item....
d. Select Web User Control as the template, select the language as C#, give a name for the user control (ucFirst) and ensure that Place code in separate file check box is checked before pressing Ok. e. Now you need to use the required web controls and write the code required in the appropriate files. For this demonstration I will put a label and a button only. When the button is clicked I will display a greeting message in the label.
f. After creating the controls and naming them as required I need to import Microsoft.SharePoint.dll since I am going to access SharePoint object model. To do this first we need to refer this dll. Right click on the project and click on Add Reference..., select the Browse tab and go to folder C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\ISAPI and select Microsoft.SharePoint.dll to add the reference to the project. If your machine doesn’t have a SharePoint installation then you need to copy this file from a SharePoint installed machine to your machine and refer it.
g. After coding for the button click my code looks like this. h. Now build and see if the page is having any errors. If no errors step one is done.

2. Create the web part DLL to hold the user control.
a. Start another instance of Visual Studio and click File -> New -> Project....

b. Select Class Library as the template under C# project type and give a location and a name (clFirstWebPart) before clicking Ok. c. Right click and delete the Class1.cs file since we would like to create a new class with a meaningful name.
d. Now right click on the project and click on Add -> New Item..., then select Class as the template and give an appropriate name (csFirstWebPart.cs) and click Add. e. Now you need to refer System.Web namespace. To do so right click on project and click ok Add Reference..., then select the System.Web and click Ok. f. After inheriting the class from the WebPart override the CreateChildControls method to create a user control and load the user control we create earlier in step 1.
We are loading the user control file (ucFirst.ascx) from the SharePoint UserControls folder which we are to copy later. g. Now build the project by right clicking on project and selecting Build. If no errors occur then that means we have completed step 2 as well.

3. Add user control and web part to SharePoint and make the web part safe.

1. Now we have a user control and a web part dll which loads the user control. In order to use this in SharePoint we need to add these to SharePoint. This has 3 tasks to be done in the SharePoint Server machine.
a. Adding User Control files.

i. Go to the location that you created the user control project in step 1 and copy the 2 files of the user control (ucFirst.ascx and ucFirst.ascx.cs). ii. Go to the root folder of the web site (C:\Inetpub\wwwroot). Now find the folder named UserControls and paste the copied two files there. Notes –
· I’m trying to put the newly created web part to the default web application. So I am using C:\Inetpub\wwwroot\UserControls folder. If you need to use this web part then you needs to use the appropriate folder. For example if I am to use this in the web application http://ironone-ms-t01:16173/ then I have to create UserControls folder in C:\Inetpub\wwwroot\wss\VirtualDirectories\16173. To find the correct location of your web application use IIS Manager web site properties page. · If the UserControls folder doesn’t exist you can create it there.
b. Adding Web Part DLL.
i. Go to the location that you created the web part DLL project in step 2 and copy the output DLL file (clFirstWebPart.dll) of it. ii. Go to the root folder of the web site (C:\Inetpub\wwwroot). Now find the folder named bin and paste the copied file there. Notes –
· I’m trying to put the newly created web part to the default web application. So I am using C:\Inetpub\wwwroot\UserControls folder. If you need to use this web part then you needs to use the appropriate folder. For example if I am to use this in the web application http://ironone-ms-t01:16173/ then I have to create bin folder in C:\Inetpub\wwwroot\wss\VirtualDirectories\16173. To find the correct location of your web application use IIS Manager web site properties page. · If the bin folder doesn’t exist you can create it there.
c. Making the web part a trusted web part.
In order to use the web part we need to make the web part a trusted web part. To do this there are two ways,
1. Put an entry to the web.config file of the application.
2. Give the dll a fully trusted name and putting it to GAC.
I will be using the first method. Make a backup of the web.config file located in the C:\Inetpub\wwwroot and open it. Then add an entry to the SafeControls section. The easiest way is to copy the last line and paste it at the end and changing the Assembly and the Namespace to the dlls’ name (clFirstWebPart). Save the config file and to be in safe side do an IIS reset by typing IISReset in the Run Window.

4. Add the web part to the web parts gallery.
a. Open an Internet Explorer and browse to the site which you need to add the web part. Then click on Site Actions -> Site Settings -> Modify All Site Settings.
b. Click on Web Parts under Galleries in the Site Settings page to open the Web Part Gallery. c. In the web part gallery page you will see all the added web parts. But not our one. So we need to add that here. To do this click on New button. Note –
The files with .dwp extension are Windows SharePoint Services 2.0 web parts.
The files with .webpart are the new Windows SharePoint Services 3.0 web parts.
d. This list will have the newly added web part (clFirstWebPart.clFirstWebPart). Check the check box in front of it and click on Populate Gallery. e. Now our new web part will appear in the Web Part Gallery. This is enough but it is always better to change some properties of the web part. So open up the web part property page by clicking on the Edit button. Change the Title, Description and the Group of the web part and press Ok. f. Remember that we need to test the web part before we add it to a web page. To do this simply click on the web part. g. If you are also having the default settings then you will definitely get an error of request for the permission of type.... This is because we didn’t change the SharePoint trust level. To change this I will use the easy way of changing the trust level in the configuration file to full though the best way is to create a trust file.
Open the web.config file at C:\Inetpub\wwwroot and find the entry and change the trust level to Full. Do an IISReset and refresh the internet explorer page. Now the web part will be displayed to you.

5. Finally add the web part to the page.
Now our newly created web part is available for us to use. We’ll now add it to a page.
a. Open the required web page in the internet explorer and click Site Actions -> Edit Page to start editing mode.

b. Now on any web part zone click ‘Add a Web Part’ button. c. Among all the web parts listed select the web part that we have created (First Web Part), select the check box in front of it and click the Add button. You will see the web part appearing on the page.
d. To finalize the page click Publish button on the page. e. Click on ‘Click Me’ button and see the output. Even though adding a new web part was bit of a process, after adding doing changes to it is not that difficult. What you have to do is change the ascx and ascx.cs files and copy the new ones to the UserControls folder. I have simply changed the message to a new one using this method.