Toggle column visibility in list view

25.08.2011 I have ported this to SharePoint 2010. The instruction for use is the same as for v1.4 for SharePoint 2007. You find the code in the download section.

---

24.08.2011 I have released a new version (v1.4) that adds the following new feature requested by Bill G:
Added a new parameter “arrDoNotRender”. This is an array of fields passed as an argument to the function “init_Checkboxes”.
The fields in this array will not render as a checkbox, but can be prehidden using the array “arrOfPreHiddenColumns” or passed as an argument in the URL.

There are changes to:
The file “ToggleColumnVisibility.js” and the CEWP-code.

---

Change log:

30.08.2010 Added the ability to skip one or more columns by adding them to the array “arrOfFieldInternalNamesToSkip”. Both the CEWP code and the file “ToggleColumnVisibility.js” has changed.

19.05.2010 Modified code to support multiple list views in the same page. The code is not fully tested so please report any bugs. Only the code for the file ToggleColumnVisibility.js” has changed.

19.04.2010 Modified code to support “pre hiding” from query string parameter. Both the CEWP code and the file “ToggleColumnVisibility.js” has changed.

---

Here are a solution for toggling the columns visibility in a list view by adding a checkbox row above the list view. Remove the check to hide the column. recheck to show.

The solution dynamically adapts to the columns in the view.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.4.2.min. If you download another version, please update the code in the CEWP.

The sourcecode for the file “ToggleColumnVisibility.js” is provided below.

Add this code to a CEWP below the list view:
For v1.3

<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/ToggleColumnVisibility.js"></script>
<script type="text/javascript">
// To "pre uncheck" checkboxes, add names to this array
	var arrOfPreHiddenColumns = ['MyPeoplePicker','My multi line'];
// Pull columns to "pre uncheck" from the query string parameter "ColumnsToHide"
	var qStrPAram = getQueryParameters();
	var colFromQueryString = qStrPAram.ColumnsToHide;
	if(colFromQueryString!=undefined){
		arrOfPreHiddenColumns = arrOfPreHiddenColumns.concat(colFromQueryString.split(','));
	}
// Array of columns to skip
	var arrOfFieldInternalNamesToSkip = [];
// Call the script
	init_Checkboxes(arrOfPreHiddenColumns,arrOfFieldInternalNamesToSkip);
</script>

For v1.4 on SP2007 and 1.x on SP2010

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/ToggleColumnVisibility/ToggleColumnVisibility.js"></script>
<script type="text/javascript">
// To "pre uncheck" checkboxes, add names to this array
	var arrOfPreHiddenColumns = ['MyPeoplePicker','My multi line','ID'];
// Array of columns to skip
	var arrOfFieldInternalNamesToSkip = [];
// Array of columns that will not render a checkbox
	var arrDoNotRenderCheckbox = ['LinkTitle','ID'];
	
// Call the script
	init_Checkboxes(arrOfPreHiddenColumns,arrOfFieldInternalNamesToSkip,arrDoNotRenderCheckbox);
</script>

Regarding the variable “arrOfPreHiddenColumns”:
Refer fields by their FieldInternalName. The “Edit” button and multi line text fields however does not have their FieldIternalName present in the column header and therefore must be addressed by their DisplayName.

Passing columns to hide in the query string:
To hide columns by query string, pass them in the URL like this:
/test/English/Lists/ToggleColumnVisibility/AllItems.aspx?ColumnsToHide=MyNumberColumn,ID

Regarding the variable “arrOfFieldInternalNamesToSkip”:
The array “arrOfFieldInternalNamesToSkip” is used to prevent the creation of checkboxed for those fields. Add the FieldInternalName of the field(s) you don’t want the checkboxes for.

Regarding the variable “arrDoNotRenderCheckbox” (new in v1.4):
The array “arrDoNotRenderCheckbox” is used for fields that should not render as a checkbox. These fields can be prehidden using the array “arrOfPreHiddenColumns” or passed as an argument in the URL.

Download

The sourcecode for the file “ToggleColumnVisibility.js” and the CEWP is found here

Ask if anything is unclear.

Regards
Alexander