1. Using the built in content types to specify which columns you wish to be hidden.
2. Using jQuery and a content editor web part to hide the columns as desired.
3. Hide the columns programmatically using code.

I just wanted to make some comments on all three. The content type approach is a good one and relatively simple to implement. Once you’ve enabled content types for your list or library, click on the default content type, let’s say it’s Item, and choose the column you’d like to have hidden and simply set it’s column settings to Hidden. Here is an excellent reference for this technique: http://littletalk.wordpress.com/2009/03/30/hide-remove-title-column-from-sharepoint-list/.

Ok so the above works good, but what happens if you only want to introduce these hidden columns on your New and Edit forms but not your Disp form as an example. Or what if your scenario requires that they are hidden from all default New, Edit and Disp forms, but you have some custom SharePoint Designer disp forms that you’ve created that those fields need to be visible on. The content type approach will hide the column for all forms and so that won’t always work. We need something more granular.

So there is where the jQuery approach comes in handy. Some great resources for this:

• Paul Galvin has written some great articles on this topic over at EndUserSharePoint – http://www.endusersharepoint.com/2009/06/17/quick-and-easy-use-jquery-to-hide-a-text-field-on-a-sharepoint-form/ and http://www.endusersharepoint.com/2009/06/18/quick-and-easy-a-better-way-to-use-jquery-to-hide-a-text-field-on-a-sharepoint-form/

As per the comments by Nathan Ahlstrom in the second link noted above, the final fix for me was to use:

<script type="text/javascript">
$(document).ready(function() {
    $('nobr:contains("Completion time")').closest('tr').hide();
    $('nobr:contains("Score")').closest('tr').hide();
});
</script>

Please note that I had to add quotes around the tr tag for this to work for me.

The final approach uses some custom code and the object model to hide columns for a given list. http://www.sharepointkings.com/2008/05/how-to-hide-column-of-sharepoint-list.html. Now I’m not entirely sure how this works with custom forms besides the New, Edit and Disp forms, and until I have time to try out, I won’t know the answer to that. It’s worth mentioning because it does give you some granularity in that you can specify hidden properties per form.

That’s all for now. Please send in your comments if you have them, would love to hear from you.

I found a ton of useful info on the jqGrid forums but it didn’t quite get me there.

The forum article in the above link suggests that you add the follwing CSS to your page:

1
2
3

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
}

The above worked great for FF, but in IE, it would wrap the content, but the cell height would not auto adjust and therefore you really couldn’t see the full content. So I made a couple more changes as per the code snippet below and this seemed to work for me.

So the height:auto forces the cell height to auto adjust based on the size of the wrapped content. I haven’t noticed any side effects of changing this. If anyone has I’d love to hear about it. The vertical-align:top ensures that the text positions at the top so that the cells with less content don’t disappear in the centre due to the larger cell blocks. And finally, I added a bit of padding so that my cells don’t look oddly aligned due to the vertical-align bit, but that’s optional. It’ll work without it.

1
2
3
4
5
6

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}

If anyone else has run into this issue or has had to make a similar change, add your contribution to the comments below.

1
2
3
4

<div id="thisismydiv1"></div>
<div id="thisismydiv2"></div>
<div id="thisismydiv3"></div>
<div id="thisismydiv4"></div>

To return an array of all divs that start with ‘thisismydiv’, you would use the following:

1

var divList = $("div[id^='thisismydiv']");

The above translates to, find me all divs whose id starts with ‘thisismydiv’. You could now do something cool like add a class to all those divs:

1

$("div[id^='thisismydiv']").addClass('myClass');

Now after doing a bit of digging, I learned that this is actually functionality that is in the works for future releases of jQuery UI. Ticket 3924 is currently open and in development, which is a good sign. Further investigation landed me on this page: http://jsbin.com/uqage which is a fantastic example of how the Closable Tabs concept could work.

My final solution involved me tweaking the above to work as follows:

Setting Up the HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="mytabs"> 
   <ul>
      <li><a href="#tabs-home">My Projects Home</a></li>
   </ul>
   <div id="tabs-home">
      <h3>Welcome to My Projects Home</h3>
      <p><a href="#" onclick="addTab('myActiveProjects', 'My Active Projects', 'RadGrid1')">My Active Projects</a></p>
      <p><a href="#" onclick="addTab('mySalesActivities', 'My Sales Activities', 'RadGrid2')">My Sales Activities</a></p>
   </div>
</div>
<div id="tabs-myActiveProjects" style="display:none;">
<h3>My Active Projects</h3>
 
</div>
<div id="tabs-mySalesActivities" style="display:none;">
<h3>My Sales Activities</h3>
 
</div>

Wiring Up the Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(document).ready(init);
 
function init() {
 
    // tabs init with a custom tab template and an "add" callback filling in the content
    var $tabs = $("#mytabs").tabs({
        tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-test"><img src="images/cross.png" /></span></li>'
    });
 
    // close icon: removing the tab on click
    // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
    $('#mytabs span.ui-test').live('click', function() {
        var index = $('li',$tabs).index($(this).parent());
        $('#mytabs span.ui-test').parent().remove();
        $("#mytabs").tabs('select', 0);
    });
}
 
function addTab(tabID, tabName, grid) 
{
    // double check to see if tab is already open
    if($("a[href^=#tabs-"+ tabID +"]").length > 0)
    {
        $("a[href^=#tabs-"+ tabID +"]").parent().show();
    } else {
        currentTabID = tabID;
 
        // this will add a tab via the standard method
        $("#mytabs").tabs("add","#tabs-" + tabID,tabName);
        $("#tabs-" + tabID).css("display","block");
    }
 
    $("#mytabs").tabs('select', tabID);
}

Finalizing the Styles

1
2
3
4
5
6
7

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="styles/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<style type="text/css">
    #mytabs { margin-top: 1em; }
    #mytabs li .ui-test { float: left; margin: 0.5em 0.4em 0 0; cursor: pointer; }
</style>

Please, please leave a comment if you have any difficulty with this and I’ll do my best to help!

1. I needed to create a page with some static links, that when clicked on would spawn a new tab.
2. The content area for each tab would contain a Close button that would remove the tab and hide the div contents. I didn’t want the div contents removed because I wanted users to be able to open the tabs again if they wanted to.

NOTE: I did attempt to dynamically generate the div contents by using a jQuery append statement on the content divs, but I ran into issues with this when placing a Telerik RadGrid onto the page and had to abandon that approach.

Building the above with the jQuery UI Tabs library took me part of the way there. In the end, my solution looks as follows:

Building the UI Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="mytabs"> 
   <ul>
      <li><a href="#tabs-home">My Projects Home</a></li>
   </ul>
   <div id="tabs-home">
      <h3>Welcome to My Projects Home</h3>
      <p><a href="#" onclick="showTab('myActiveProjects', 'My Active Projects')">My Active Projects</a></p>
      <p><a href="#" onclick="showTab('mySalesActivities', 'My Sales Activities')">My Sales Activities</a></p>
   </div>
</div>
<div id="tabs-myActiveProjects" style="display:none;">
    <h3>My Active Projects</h3>
    <p><input type="button" name="killTab" value="Close" onclick="hideTab('myActiveProjects')" /></p>
</div>
<div id="tabs-mySalesActivities" style="display:none;">
    <h3>My Sales Activities</h3>
    <p><input type="button" name="killTab" value="Close" onclick="hideTab('mySalesActivities')" /></p>
</div>

Wiring Up The Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function init()
{
    $("#mytabs").tabs();
}
 
function showTab(tabID, tabName)
{
    currentTabID = tabID;
 
    // this will add a tab via the standard method
    $("#mytabs").tabs("add","#tabs-" + tabID, tabName);
    $("#tabs-" + tabID).css("display","block");
 
    $("#mytabs").tabs('select', tabID);
}
 
function hideTab(tabID) 
{
    $("#tabs-" + tabID).css("display","none");
    $("a[href^=#tabs-"+ tabID +"]").parent().remove();
    $("#mytabs").tabs('select', 0);
}
 
$(document).ready(init);

Don’t forget to include the jQuery UI JS file and the corresponding CSS. You’ll also need to include the jQuery JS file as well. If you have any troubles with this, drop me a note.

1
2
3

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="styles/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

My next step with the above is to relocate the Close button so that it is an ‘X’ image on the tab itself that when clicked on would close the tab. I’ll update once I figure that out! Good times!

I have been trying unsuccessfully over the past hour or so to pass in the value of a checkbox as a parameter to my AutoComplete plugin as follows:

1
2
3
4
5

cacheLength:0,
minChars:2,
max:20,
autoFill:false,
extraParams: { active : $('input[name=status]').is(':checked') }

Now the issue I was encountering was regardless of what the state of the checkbox was, checked or unchecked, the AutoComplete plugin always returned it’s initial value. So if by default it was unchecked, it always returned false. If by default it was checked, it always returned true.

After a bit of digging, I finally stumbled across this site that explains that the value is locked in once the AutoComplete plugin is initialized: http://stackoverflow.com/questions/1216222/jquery-passing-checkbox-values

So to solve the issue:

1
2
3
4
5
6
7
8
9

cacheLength:0,
minChars:2,
max:20,
autoFill:false,
extraParams: {
    active : function() { 
        return $('input[name=status]').is(':checked'); 
    }
}

Awesome! Thanks to Stack Overflow and redsquare!

Sometimes, we need to get at those controls via some client side javascript so that we may manipulate their properties or simply get/set their values.

If you’re not already familiar with JQuery, you need to take 5 minutes of your day and read up on it. It’s a very light javascript library that any decent developer should have in their toolbelt.

http://jquery.com/

Now getting started with JQuery is pretty simple. It doesn’t matter what type of app you’re building, you simply need to download the jquery-1.3.2.min.js (this is the current version as of the time i wrote this post) file and include it in the HEAD tag your page:

1

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Some examples of what you can do with JQeury (I got most of this from reading the documentation):

Example 1 – DOM Ready

1
2
3
4

$(document).ready(function () {
    // execute any code here that you'd like to be run as soon as the dom is ready. You may often
    // want to show/hide certain controls on page load
});

Example 2 – Determine if an ASP.NET radio button is checked

1
2
3

var radio = $("#<%= radioButton.ClientID %>");
var domRadio = radio[0];
var isChecked = domRadio.checked;

1

<input type="radio" id="radioButton" name="age" value="20" runat="server" />

This is the most important part:

1

$("#<%= radioButton.ClientID %>")

radioButton.ClientID gets replaced with the automatically generated ASP.NET client id of this control. When I was working with prototypejs, I used to use the class selector to get a handle to these controls: $(“.className”) so naturally I started doing the same thing when I began working with JQuery. I wasn’t entirely happy with this method because it added what was otherwise an unnecessary property to my controls.

After discovering .ClientID, I use it most often. I still use the class selector but for different reasons. For example, if i want to show/hide a specific TR tag within a table, here is how I would do that:

Example 3 – Show/Hide

1
2
3
4
5

if (isChecked) {
    $(".rowHide").hide();
} else {
    $(".rowHide").show();
}

1
2
3

<tr class="rowHide">
    <td>some data</td>
</tr>

Example 4 – Set the url for a link tag

1
2
3

$("#<%= link.ClientID %>").attr({
    href: "/pages/mypage.aspx?id=" + id;
});

<a id="link" target="_blank" runat="server">My Link</a>

I’ll be writing a post that describes in detail how to leverage JQuery to build autocomplete functionality into your SharePoint applications. Some users prefer the ASP.NET Ajax route, but in my humble opinion, JQuery is far easier to configure and use.

If anyone would like to see that sooner, just ping me and I’ll send some notes of how I achieved this.

You can read about Microsoft’s news to include JQuery in Visual Studio on Scott’s blog.

“The jQuery intellisense annotation support will be available as a free web-download in a few weeks (and will work great with VS 2008 SP1 and the free Visual Web Developer 2008 Express SP1)”

I’ll be looking into JQuery in the next couple weeks to see how it performs against prototypejs and i’ll post any findings here, so stay tuned!

Erik was kind enough to post some info related to prototype and the content editor not behaving well together. It seems that JQuery might work better in this scenario. You can read more about that here.