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.
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:
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.4 on SP2007 and 1.x on SP2010
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:
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.
The sourcecode for the file “ToggleColumnVisibility.js” and the CEWP is found here
Ask if anything is unclear.
72 thoughts on “Toggle column visibility in list view”
awesome. will try this out. thank you.
this is great. works much better than what I had. one problem I have, which I see is the same for yours is when exporting to excel.
Is there a was to hide the same columns when exporting?
Is there a way to change the checked option using query string var? I think may need another function, but am hoping to see if a way to work it like when the filters are applied then can provide a link the the same hidden fields are hidden.
Still great work. I have really come to admire your efforts.
Question 1: No – export user the view as specified in the list settings.
Question 2: Yes, i will add this option.
No to Q1 make me sad. How about this. I know a datatable or datagrid with the help of code can be exported to Excel. Is there any way to mimic this functionality? A way to copy what is visible then open and paste into Excel?
I am working on the updated query string. I have tested this and it does not appear to be working. I may be missing something so this is what i have tried. I added the qs values after the “?” and no change. I added them as the second parameters after an “&” and no change. I added an alert after this line
the alert returns the qs values so it works up to that point.
The check boxes work perfectly.
It is only when I try the qs values it does not seem to work.
I did notice in the alert the values are returned like this:
your function is looking for
could this be the issue?
Please supply the full CEWP code and i will look at it.
I found it is conflicting with another script. I will need to figure this one out. Thanks again for your support
Nice & clean, Alexander. Great addition to your work!
a small help hint. I found that not everyone uses best practices when creating a list, go figure. any way I was having trouble with a large list identifying the attribute name as opposed to the display name. I added a title tag to display “Name” on hover. line 36 added
now can easily identify names needed for the array.
Thanks a lot, it helped me big time!
Although I’m having an issue when having multiple listview webparts on a single page.
It seems to randomly hide other columns from other webparts (sometimes only the headings) or hide them all if they happen to have the same name as the one I really want to hide.
Is there any easy way that we can specify just the “target” webpart or
maybe place the ECW on a specific area?
I would appreciate any help.
I implemented this script several time with much success. Today I added it to list that is using the Instant List Filter. This adds an additional row for the filter boxes.
I added some code to your script. really copied what you had and modified it. I added this to the hideColumn(obj) function.
check and uncheck hides and shows these items perfectly. My problem in on page load. These boxes are just hanging there until I check, unchceck one of the hidden columns.
How can I hide this on page load like the arr of columns?
Nevermind, again. Actually I did 2 things. Removed the code above caused I realized your already handled that.
1. I placed the list filter code before the hide columns code.
2. I wraped the init_checkboxes in a $(document).ready function
working perfectly now.
I’ve set a pre unchecked hidden field using:
var arrOfPreHiddenColumns =
How can I make it so the header with the check boxes for displaying the fields does not display? I’m using this script so I can use filtering with Connections, Provide Row To but without displaying the field that is being sorted by (which works fine using the script just I don’t want the tick boxes to appear at the top).
Change Line 38 like this:
You could however change the code to “hard code” the columns to hide, thus eliminating the need for passing the values in the URL.
This is very tidy code, pretty much covered everything you can think of, I especially like the including the refresh of hidden details on group expansions.
However I had a slight problem when dropping multiple list views on a page. I found that whilst the content of the columns were hidden in every list view the column header was only hidden on the first list view.
I got round this by writing my own code to recursively look through and hide each of the column headers.
The issue was with function hidecolumn it hides the column header and then all content. But whilst it finds each content cell (and by that rule hides every instance in every web part) it only does the first column header.
var thToToggle = $(this).find(”[name*=’Profiles’]“);
The code is updated to support multiple views in the same page. Please test and report any bugs.
for some reason the script working for some lists and for other lists it shows error.
do you know what may make it to not work?
You need to find what the difference’s are – maybe you are using other scripts that interfere with this one?
This works great, thanks.
Can I prevent columns from having the show/hide option completely? I have two columns where I don’t want a show/hide option and don’t want them to display as a choice to hide at all.
See the updated code.
Awesome… Thank you!
Hi, this is really nice..
With data view, do you mean a SharePoint Designer created list view?
If so, it would be very difficult to create something generic because of the fact that the dataview is custom made by each and every user.
It would be possible to do this, but not in a generic way. I it would have to be a custom made solution.
Can this great code work in SharePoint 2010 list view?
Hey Alexander, What would be the easiest way to make this script work on a webpart page that has multiple lists /views. I am creating a dashboard that has several views for one list. When I added this script it created a check box for every column in every view on the page, replicating many of them.
I am also using Christophe’s Easy Tabs. If I can only show this for one view I can get by. Was hoping there is a way to maybe dispaly by a webpart ID and display each the check boxes for each visible view. What do you think, possible, impossible, difficult?
nevermind, I’m a dumbass. Should have read all the post first. You are brilliant!
Its my first time to write you but many times i have tried your solutions.
Alexander, i want to fix the column heading in list but this will not to disturb the group fields. kindly help me out.
Could you please clarify, I do not understand what you want to achieve.
i have a list, having more then 15000 list items, data displayed in this in multiple groups, for eg group by month and then zone. i want to fix the column heading of this list just like datasheet view but i dont want to disturb the data grouping.
i had found a script over the internet for this but this will expand all the groups on loading, because of this all client computers hang for almost 4..5 minutes.
i want to fix the column heading while scrolling the items but do not want to disturb data groups.
Excellent. you are awesome man ! Now is it possible to check for values that are non blanks in each and just display them – ie.,display only those fields that have values.
I have a document library with 2 content types 1 is for folder and 1 is the document.
I have created a view with both display columns came from 2 content types.
Now my issue is if I am in the folder level the content types folder columns only have values when I click in the folder the document content types column display only.
now is there a way to do this in jscript? I mean if i am in the folder level It will hide all document content type column? same thing goes when i am inside the folder the folder content types column will hide.
You could check the URL for the parameter “RootFolder” and have a script hide the columns based upon the value for the parameter.
Use this code to retrieve it:
Truely a great script. I am having an issue with a list view containg more than 20 columns. This is the only script running on the page, about 150 row items and started woth 50 columns. I would get a Windows IE error “Stop running the script?” Do yu know the max number of columns this supports?
I do not have a number for you, but try reducing the number of rows in the view. This code “times out” due to a large number of instructions when iterating trough all items in a large list view.
I am trying to use this to hide the filtered column in a grouped list view. It works fine, by adding the one column to arrOfPreHiddenColumns and all the remaining to arrOfFieldInternalNamesToSkip.
Unfortunately it leaves me a check boox with my filtered list column name. If I add my filtered column to arrOfPreHiddenColumns, the column is not hidden.
Is their a streamilined way to hide a filtered list column in a grouped list view, and not provide a means to unhide it?
Sorry for the late reply, but now i finally found the time to update the solution. See top of article for details.
I really would like to use this script but it doesn’t work in Sharepoint 2010. Do you have any plan to release the modified version of it for Sharepoint 2010?
See updated code for SharePoint 2010.
I apologize – wrong email address.
I really liked the article, and the very cool blog
This is cool, but have can i arrange the checkbox in a table … have about 30 columns and would like to have 10checkboxes in a column thanks
Add this to the top of your CEWP:
Hi Alex, I did not think I will get a response, but I did and I so appreciative. I will try the solution and get back to you..
But please I also need your expertise with SP list form validation. How do I validate for required fields and put the error messages on the top of the form.
Also I want to be able to allow the text “not available” for my date field if user doesn’t have the registered date at the time of filling the form. Or is how you would suggest this to be done if text/string cannot be entered in the date field
And if the user has and enters the date, I also what to check that date entered is not greater than today as the registered date cannot be in future
And lastly I had as yes/no/not available radio button question with sub questions and if uses selects “yes” then sub question are required but if they select ‘no”, I want to populate the sub questions with the value ‘NO” and is they select ‘not available” I want to populate the sub questions with the value “not available” and if the go from ‘no’ or ‘not available’ buttons to ‘yes’ I want to remove the set values.
Hi, This was a lot in one go… I’m in the process of making a solution for dynamically setting mandatory fields in a NewForm / EditForm. I guess you must wait until that is published and then we can take the rest from there.
Thanks again, i’ll wait. Oh by the way the div.customToggleColumnCheckbox … for the toggle checkbox column did not work as i needed it too.
i was actually looking to align the checkboxes … something like this .. http://jsfiddle.net/DuSP5/
Can this be incorporated with you toggle script?
That should not be a problem, but if you could write that code, you’ll do this with no problems. Look in the file “ToggleColumnVisibility.js” in line 64.
Thanks, but i dont how to write it and i was hoping you can help
Sorry for the late reply. I’ll make a not of it and see what i can do. I’m a bit short on time these days and cannot promise anything.
Still need help with writting the code that will arranging the checkboxes in a table, i have about 30 columns and would like to have 10checkboxes in a column so its all neat and tidy.
Any suggestion or help anyone?
Sorry I forgot about your request. Here is a little code that you must put BELOW the call to “init_Checkboxes” in your CEWP:
The argument “breakAfter” is the number of columns you want in the table.
Hope this helps,
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; MS-RTC LM 8)
Timestamp: Thu, 5 Jan 2012 18:51:04 UTC
Message: Object doesn’t support this property or method
URI: (rest of my url-removed from this post)/ToggleColumnVisibility.js
Also, I only get this error, once I uncheck a column to be displayed. The column never disappears and the javascrip error happens.
SP2007 or 2010 – and which jQuery version are you using? Note that you must use v1.6x for the latest version.
I am unable to download the ToggleColumnVisibility.js script. Could you please specify if there is another link from where I can download this file.
The link is fixed.
Thank you so much! This is a wonderful tool.
Just what I need.
NOTES: for Sharepoint 2010 v1.0, I found a small problem with ToggleColumnVisibility.js:
Thank you for finding this bug. I have fixed it in v1.1 by using this code:
Very useful script, apologise for my ignorance, but is there any way of making default where no checkboxes are selected at start. As I have 20+ columns and finding all the names is tedious!
Great solution! A few questions. I have it working but I have about 200 fields. I don’t intend to make use of all 200 in one list by maybe more like 50.
1) I’d like to reverse the logic so that all fields are uncheck by default except a small set of exceptions. When the page loads I’ll check the ones I want to add. Can this be easily done?
2) Any way to have the checkboxes appear in alphabetical order?
3) I’ve used the added piece that lines up all the checkboxe into nice columns but the text size increased dramatically. Can the text size be set?
4) When I use this solution in combination with the LimitMultilineTextInView solution the limit solution breaks. Any thoughts?
Again, very very helpful.
Hi, does this solution to toggle the columns in a listview work for SharePoint 2013?
Have you find the solution to hide the same columns when exporting?
This is not possible.
Thank you for the solution, however i could not display checkbox as your screen above. What i did is the following:
– Create library called scripts containing jquery and
– Create a blank web part page
– add content editor webpart in web part page
– add script into the content query webpart
what did i missed?. How do script find the list that we want to display?. Thank you
Don’t worry i got it working now. Thank you
I’m glad you figured it out.
I love this solution and really have a need for it. Will it work in SP 2013? If so, I must be doing something wrong. I paste your CEWP text into a CEWP under my List Webpart and nothing happens. Any help is appreciated.
I have not testes this in SP2013 (it was last updated in 2011), and it might need some tweaking.
Do you see any errors in the developer console (hit F12 > console)?
Thank you for the quick response.
I know that this wasn’t developed for SP 2013, but thought I would ask anyway.
I, unfortunately, don’t see any errors in developer console. The page loads fine, but there’s no check boxes displayed. 🙁 I could satisfy my requirement with OOTB SP Views, but I can’t figure out a way to switch the Current View of a List WebPart. I’m not even sure if that’s possible.
Sorry, but I haven’t had the time to look at this one. It is most likely an issue with the elements in the page that the script “looks at” to identify the columns and insert the checkboxes.
If you try to delay the loading of the script to ensure the page has finished loading, and if this does not help, you must try to step trough the script to see if it targets elements that no longer exist in the page (and need to be changed).