[March 17, 2010] An updated script is now available here.
Yesterday I shared a live demo that shows how the usability of boxed views can be improved. Really cool effects, thanks again jQuery!
But, as Charlie Epes commented, a script that changes the boxed view from two columns to one would already be really useful.
So here is a simple one – 4 lines!
<script type="text/javascript">
var boxedview = document.getElementById("WebPartWPQ1").innerHTML;
boxedview = boxedview.replace(/<td width="1.5%"> <\/td>/gi,"<\/tr><tr style='font-size:6px\;'><td> <\/td><\/tr><tr>");
boxedview = boxedview.replace(/<td width="1%"> <\/td>/gi,"<\/tr><tr style='font-size:6px\;'><td> <\/td><\/tr><tr>");
document.getElementById("WebPartWPQ1").innerHTML = boxedview;
</script>
Add the script to a CEWP, under the boxed view. You can see it at work on this page.
The above script is written for wss. It identifies the Web Part by its id “WebPartWPQ1”. If you use MOSS, or if the boxed view is on a page along with other Web Parts (typically on the site home page), you’ll need to change the id to “WebPartWPQ2” or “WebPartWPQn“. Or you can modify the code to scroll through all the Web Parts on the page and grab the boxed views.
Path to SharePoint... and Beyond! 
Wow! My own personal developer! Thank you so much, Christophe.
Charlie Epes
Buffalo, NY
Hi Christophe:
I’m not sure why my Boxed view is not stacking into one column like yours. My List is WebPartWPQ1 and the CEWP is WebPartWPQ2. I am using WSS3.0.
What am I missing?
Charlie Epes
I tested it again, and the above code works fine for me in wss 3.0. I used both IE7 and Firefox 3.
Did anybody else try this in wss 3.0?
I don’t want to sidetrack this with my issues. I’ll try it again on another site.
Thanks… and by the way, have a great time abroad.
Charlie
Charlie, did you get it to work? If not, contact me by e-mail.
Hi, it works against “Boxed, no labels” style. How can you get it to work with “Boxed” (with labels)?
I am using MOSS and my box view is showing labels.
Question 1:
I am using a Form Library in MOSS and the “Boxed View” style name for this type of list is called “Document Details,” not “Boxed.”
Question 2:
When trying to customize for MOSS, my web part ID is 3DF9CE5B-06DC-4678-BB33-AA4893E43A36
Would I append this number to your code and should it look like this?
var boxedview = document.getElementById(“WebPartWPQ3DF9CE5B-06DC-4678-BB33-AA4893E43A36″).innerHTML;
boxedview = boxedview.replace(/ /gi,” “);
boxedview = boxedview.replace(/ /gi,” “);
document.getElementById(“WebPartWPQ3DF9CE5B-06DC-4678-BB33-AA4893E43A36”).innerHTML = boxedview;
Ooops. The code got messed up. Not sure how to share code.
//
var boxedview = document.getElementById(“WebPartWPQ3DF9CE5B-06DC-4678-BB33-AA4893E43A36″).innerHTML;
boxedview = boxedview.replace(/ /gi,” “);
boxedview = boxedview.replace(/ /gi,” “);
document.getElementById(“WebPartWPQ3DF9CE5B-06DC-4678-BB33-AA4893E43A36”).innerHTML = boxedview;
In this script, we are not looking at the Web Part id, but at the id of the DIV that hosts the Web Part content.
On the list default page, this id is WebPartWPQ1 (for wss) or WebPartWPQ2 (for MOSS).
On other pages, you need to identify the correct number by looking at the source code. The id will be WebPartWPQn where n is an integer somewhere between 1 and 1+total number of WebParts on the page. Or you could add a loop to the script to scan all Web Parts on the page.
Hi
I didn`t under stand how to use this ?
Can pls help me
Narsinh
Did you ever figure out the right code for applying this fix to MOSS? I have not been able to get it to work trying n=1 to 20. It just continues to display with two columns.
Following up on Jim’s questions, was anyone able to get the code to work in MOSS?
Christophe, As usual, just what I need — However (notice that there is always a “however” from your fans?)…
The Boxed View is very helpful, I am using it in combination Paul Grenier’s jQuery Print Any Web Part — but needed to remove the column-titles as they made the horizontal dimension unmanagable. To turn off the column-titles, I found the simple ” .ms-viewheadertr { display: none;} ” solution, and there in lies the rub.
When combined with your One-Column Boxed View script, the normal two columns display, when I remove the ” .ms-viewheadertr { display: none;} ,” your One-Column script works.
Is there a simple work-around?
As always, very grateful for your guidance!
R’grds – Ben.
Christophe, I think I may have found my problem… I have successfully used with the “Boxed, No Labels” view, and realized that was where this script was failing me (and not from the style statement as suspected).
So, my finding is that this script works with the “Boxed, No Labels” view, and does not work with the simple “Boxed” view.
My purpose is to use this script to allow a neatly laid-out printed view of my list, but will need the column-labels to make it easy to read.
So, now my question is: “Is there a simple way to get this script to work with a simple “Boxed” view as well as the “Boxed, No Labels” view?”
Very grateful for your attention.
R’grds – Ben.
Hey Christophe,
it has been a while and I see you’re getting around. Miss the posts here. I recently saw an update to the boxed views and I remembered that when I implemented this script it did not work. When I looked closely at the page elements I realized I needed some additional code. So I added this to your code and it works great:
boxedview = boxedview.replace(/ /gi,” “);
something with the cell tags not having a width caused this script to fail. once I added this no issues. feel free to use it if you like.
Thanks Larry, I’ll check it out.
SharePoint has 2 boxed views in the list of styles, the issue might be that I wrote the script for one of them (boxed, no labels), and it doesn’t directly apply to the other one.
Hey C,
working with this script again and I ran into a wall. reading your last reply I understand why, just cant figure out a solution. I have setup a grouped boxed view. I found that there are 3 columns now. I have continually tried to customized the script to remove the outter columns, just will not work. I am using WSS, and the webpart ID is correct. The first column has this code:
So I modified what you had to this
am I missing something?
Finally was able to figure this out. With the addition of CSS I was able to remove the first and last column, getting the result I needed. You have some great work. I look forward to all your posts.
thanks
Have any of you tried a script that goes from two columns to three in WSS 3.0? I’m not sure how to change from the single column view to the three.
Nice trick, and your blog is a good source for sharepoint inspiration in general!
I have a similiar question as David, any pointer towards changing the boxed view to show more than two columns?
@Johan,
What are you trying to do? I had a similar requirement and I was able to achieve that through the use of a calculated field and Christophe other script Text 2 HTML. Using the sceond script you can build tables graphs or what ever you want. I actually used one column and built my layout using calc fields. Here is an image showing the output I was able to achieve:
let me know if this is what you are talking about.
@Johan: I wanted to give it a try (4 columns), but it’s a little more complicated than I initially thought (have to take into account cases where there’s an odd number of rows).
@Christophe Would be really great to have a script doing eg four columns… I can understand the potential complexity, and unfortunately my skills in this area too limited to give it a try myself – if you are able to solve this it would be great…
@larry – I had a look at your screenshot – I understand this as “one box per row, and the boxes are displayed like a table”
I’d like to have more than one box per row (compare with the “original” boxed view, which displays two boxes per row (ie two columns) – I’m looking for a solution where more than two boxes can be displayed on ach row.
HI Johan,
I too am looking out for a similar type of solution. I would like to have 3 or 4 boxed view (3 -4 columns) in a row. As of now it displays only items in 2 column.
Do you have any solution for this
Hi Gemma,
sorry, I haven’t found any other solution for this (and it sounds like we are looking for the same possibility).
The good thing is that I noticed that this is on Christophe’s ToDo list (http://pathtosharepoint.com/Lists/ToDoList/AllItems.aspx – the “Script for n column display” entry) – I hope that this will go from 60% completed cutrrently to 100%.. 😉
I would be interested in any findings you do on this topic.
Gemma and Johan: I have a draft script for this, built on jQuery. If you know how to use jQuery I can send you the beta version.
Hey Christophe,
I believe you sent a beta version to me some time back. I am back testing it again and I am having trouble understanding how you write the cell and contents. At the bottom you have tr.append 3 times. I am guessing the middle one is the cell and its contents. I am trying to format that cell but I am failing. Also I noticed the original class “ms-stylebox” is missing when script is applied.
Have you done anymore work on this? Are you still testing it?
Like for several other scripts, I stopped releasing updates because of SP 2010. Unfortunately I haven’t found the time to do anything new on this one.
I am struggling with this on MOSS; I have confirmed that I am correctly identifying the webpart id WebPartWPQ2 (on the default page) but nothing seems to work. Is there anything recently that takes care of the “single column” not working issue? Is there an updated script that should work?
thanks in advance..
I am working on this and there should be an update this week (see my to-do list on http://www.pathtosharepoint.com).
Could you precise which of the boxed styles you’re using?
Pingback: Update: boxed view with one column only « Path to SharePoint
Christophe,
I can at least give the jQuery script a try… My email is johan @ my blog domain.
Thanks!
Hi, Christophe
I am interested in “Script for n column display” this topic.
I already use jquery to do one column to Boxed views, but i need
to do four columnsto boxed views in my sharepoint 2010.
Could you give me some tips for this ?
Thank you very much.
Kelvin.
Pingback: Wöchentliche Linkrückschau (weekly) « Webbericht